Cards | Tailwind Templates

PHOTO EMBED

Fri Aug 13 2021 21:54:01 GMT+0000 (UTC)

Saved by @mtsit

<div class="p-8">
  <div class="shadow-xl rounded-lg">
    <div style="background-image: url('https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260')" class="h-64 bg-gray-200 bg-cover bg-center rounded-t-lg flex items-center justify-center"> 
      <p class="text-white font-bold text-4xl">Profile</p>
    </div>
    <div class="bg-white rounded-b-lg px-8">
      <div class="relative">
            <img class="right-0 w-16 h-16 rounded-full mr-4 shadow-lg absolute -mt-8" src="http://tailwindtemplates.io/wp-content/uploads/2019/03/link.jpg" alt="Avatar of Jonathan Reinink">
      </div>
      <div class="pt-8 pb-8">
        <h1 class="text-2xl font-bold text-gray-700">Link</h1>
        <p class="text-sm text-gray-600">From hyrule</p>
        
        <p class="mt-6 text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a sem varius, fringilla sapien at, sollicitudin risus.</p>
        
        <div class="flex justify-around mt-8">
          <i class="material-icons">chat</i>
          <i class="material-icons">duo</i>
          <i class="material-icons">location</i>
        </div>
      </div>
    </div>
  </div>
</div>
content_copyCOPY

https://tailwindtemplates.io/cards/