<div
    class="p-8 text-gray-500 bg-white border border-gray-100 rounded-2xl font-medium"
  >
    <p>Bordered</p>
  </div>

  <div class="p-8 text-gray-500 bg-gray-100  rounded-2xl font-medium">
    <p>Well</p>
  </div>

  <div class="p-8 text-gray-500 bg-white  rounded-2xl font-medium">
    <p>White</p>
  </div>

  <div
    class="p-8 text-gray-500 bg-white shadow-sm border border-gray-100  rounded-2xl font-medium"
  >
    <p>Raised</p>
  </div>

  <div
    class="p-8 text-gray-500 bg-white shadow-lg border border-gray-100  rounded-2xl font-medium"
  >
    <p>Floating</p>
  </div>

  <div
    class="p-8 text-gray-500 bg-white shadow-xl border border-gray-100 rounded-2xl font-medium"
  >
    <p>Popping</p>
  </div>
                    
                

                    
                         <div class="p-8">
<div class="bg-white p-6 shadow-lg rounded-lg flex justify-between items-center">
  <div class="flex">
    <div class="mr-4">
       <img class="shadow sm:w-12 sm:h-12 w-14 h-14 rounded-full bg-gray-100" src="" alt="Avatar" />
    </div>
    <div>
      <h1 class="text-xl font-medium text-gray-700">Link</h1>
      <p class="text-gray-600">UX Designer at Hyrule</p>
    </div>
  </div>
  <button class="bg-blue-500 hover:opacity-75 text-white rounded-full px-8 py-2">
    Follow
  </button>
</div>
</div>
                    
                

                    
                         <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 bg-gray-100" src="" alt="Avatar">
      </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">
          <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
          </button>
          <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
          </button>
          <button>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
                    
                

                    
                         <div class="p-8">
  <div class="bg-white shadow p-4 rounded lg:w-64">
  <div class="text-center mt-4">
    <p class="text-gray-600 font-bold">Name
    </p>
    <p class="text-sm font-hairline text-gray-600 mt-1">Subtitle
    </p>
  </div>
  <div class="flex justify-center mt-4">
    <img class="shadow sm:w-12 sm:h-12 w-10 h-10 rounded-full bg-gray-100" src="" alt="Avatar" />
  </div>
  <div class="mt-6 flex justify-between text-center">
    <div>
      <p class="text-gray-700 font-bold">20
      </p>
      <p class="text-xs mt-2 text-gray-600 font-hairline">Posts
      </p>
    </div>
    <div>
      <p class="text-gray-700 font-bold">99k
      </p>
      <p class="text-xs mt-2 text-gray-600 font-hairline">Likes
      </p>
    </div>
    <div>
      <p class="text-gray-700 font-bold">530
      </p>
      <p class="text-xs mt-2 text-gray-700 font-hairline">Shares
      </p>
    </div>
  </div>
  <div class="mt-6">
    <button class="rounded shadow-md w-full items-center shadow bg-blue-500 px-4 py-2 text-white hover:bg-blue-400">
      Follow
    </button>
  </div>
</div>
</div>