<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" 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 class="p-8">
  <div class="shadow-xl rounded-lg">
    <div style="background-image: url('/wp-content/uploads/2020/04/pexels-photo-814499-min.jpg')" 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="/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>

<div class="bg-white shadow p-3 rounded lg:w-64">
  <div>
    <div style="background-image: url('')"
         class="bg-cover bg-center bg-gray-300 h-32 rounded">
    </div>
  </div>
  <div class="mt-6">
    <p class="text-lg text-bold tracking-wide text-gray-600 mb-2">
      Title
    </p>
    <p class="text-sm text-gray-600 font-hairline">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </div>
  <div class="mt-6">
    <button class="rounded shadow-md flex items-center shadow bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
      Default
    </button>
  </div>
</div>

<div class="bg-white text-gray-700 rounded text-center">
    <div class="flex justify-center">
        <div class="bg-white rounded-full h-16 w-16 -mt-8 flex items-center justify-center">
            <i class="material-icons text-blue-500 text-4xl">
        contact_support
      </i>
        </div>
    </div>
    <div class="mt-6">
        <h1 class="text-xl text-blue-500 font-bold">
      Support
    </h1>
        <p class="mt-1 text-gray-600 text-sm">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
    </div>
    <a href="#" class="no-underline">
        <div class="mt-8 p-2 bg-gray-200 text-gray-600 font-bold hover:bg-gray-300 hover:text-gray-700">
            Contact Support
        </div>
    </a>
</div>

<div class="p-8">
  <div class="bg-white rounded-lg shadow-xl">
    <div class="p-16">
      <div>
       <!-- Insert your svg or image here -->
      </div>
      <div class="mt-8 text-center">
        <h1 class="font-bold text-lg text-gray-700 mb-1">Customer support 24/7</h1>
        <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <button class="mt-6 bg-blue-500 hover:bg-blue-400 text-white rounded-full px-12 py-3 shadow-xl focus:outline-none">
          Get started
        </button>
      </div>
    </div>
  </div>
</div>

<div class="shadow bg-white">
    <div class=" bg-size bg-cover bg-center"
         style="background-image: url('')">
        <div class="p-4 h-32 flex items-end text-white">
            <h3 class="mb-2">Card Title</h3>
        </div>
    </div>
    <div class="p-4">
        <p class="text-grey-600 text-sm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
            ligula eget dolor.
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
        <div class="mt-4">
            <a href="#" class="no-underline mr-4 text-blue-500 hover:text-blue-400">Link 1</a>
        </div>
    </div>
</div>

<div class="shadow bg-white">
    <div class=" bg-size bg-cover bg-center"
         style="background-image: url('')">
        <div class="p-4 h-32 flex items-end text-white">
            <h3 class="mb-2">Card Title</h3>
        </div>
        <div class="relative">
            <button class="bg-blue-500 hover:bg-blue-400 absolute right- mr-4 -mt-8 flex justify-center items-center rounded-full h-12 w-12 p-2"><i
                    class="material-icons text-white">add_to_queue</i></button>
        </div>
    </div>
    <div class="p-4">
        <p class="text-gray-600 text-sm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
            ligula eget dolor.
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
        <div class="mt-4">
            <a href="#" class="no-underline mr-4 text-blue-500 hover:text-blue-400">Link 1</a>
        </div>
    </div>
</div>

<div class="p-8">
  <div class="relative bg-black shadow-lg rounded-lg group h-64 w-64 flex justify-center items-center">
    <div class="rounded-lg h-full w-full absolute z-10 bg-cover bg-center hover:opacity-50 transition-all duration-500 ease-in-out" style="background-image: url('')">
    </div>
    <p class="font-bold text-lg text-white absolute z-20 pointer-events-none">
      Video Graphics
    </p>
  </div>
</div>

<div class="shadow p-4 bg-white">
    <div class="text-left">
        <h3 class="mb-2 text-gray-700">Card Title</h3>
        <p class="text-grey-600 text-sm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
    </div>
​
    <div class="mt-4">
        <a href="#" class="no-underline mr-4 text-blue-500 hover:text-blue-400">Link 1</a>
        <a href="#" class="no-underline mr-4 text-blue-500 hover:text-blue-400">Link 2</a>
    </div>
</div>

<div class="rounded h-full flex justify-center items-center">
  <div class="rounded bg-white shadow-md h-48 w-48 p-6 flex flex-col justify-around">
    <div>
      <p class="text-base text-gray-600">Revenue</p>
    </div>
    <div>
      <p class="text-2xl text-gray-700 font-bold">$56,734</p>
    </div>
    <div class="text-sm">
      <p class="text-green-500 mb-1 flex item-center">
        <i class="material-icons">
arrow_drop_up
</i> 5.77%
      
      </p>
      <p class="text-gray-600">Since last month</p>
    </div>
  </div>
</div>