Cards

<!-- Component: Basic card -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <div class="p-6">
    <h3 class="mb-4 text-xl font-medium text-slate-700">Something to remember</h3>
    <p>
      All components can be copied and pasted and easily implemented in your tailwind css projects. You can choose which language you want to copy the desired component and just hover and click on the component you need and paste it on your project.
    </p>
  </div>
</div>
<!-- End Basic card -->

<!-- Component: Card with icon -->
<div class="overflow-hidden text-center bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!-- Icon -->
  <figure class="p-6 pb-0">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 mx-auto stroke-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" role="graphics-symbol" aria-labelledby="title-01 desc-01">
      <title id="title-01">Icon title</title>
      <desc id="desc-01">A more detailed description of the icon</desc>
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
    </svg>
  </figure>
  <!-- Body-->
  <div class="p-6">
    <h3 class="mb-4 text-xl font-medium text-slate-700">Bonus</h3>
    <p>
      All components come with proper attributes to ensure full accessibility with the WAI-ARIA standards. Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.
    </p>
  </div>
</div>
<!-- End Card with icon -->

<!-- Component: Card with subtitle -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <div class="p-6">
    <header class="mb-4">
      <h3 class="text-xl font-medium text-slate-700">A place under the night sky</h3>
      <p class="text-sm text-slate-400"> By George Johnson, jun3 28</p>
    </header>
    <p> There’s nothing better than hiking along the rocky footpaths, accompanied only by the noise of cicadas. As the boat docks in the harbor, gaze upon white and blue houses, craggy cliffs, sweeping olive groves, and the dazzling blues of the Aegean sea. </p>
  </div>
</div>
<!-- End Card with subtitle -->

<!-- Component: Basic image card -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!--  Image -->
  <figure>
    <img src="https://picsum.photos/id/69/800/600" alt="card image" class="aspect-video w-full" />
  </figure>
  <!-- Body-->
  <div class="p-6">
    <header>
      <h3 class="text-xl font-medium text-slate-700">Memories of the past</h3>
      <p class="text-sm text-slate-400"> By George, jun 3 2023</p>
    </header>
  </div>
</div>
<!-- End Basic image card -->

<!-- Component: Basic blog card -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!-- Image -->
  <figure>
    <img src="https://picsum.photos/id/101/800/600" alt="card image" class="aspect-video w-full" />
  </figure>
  <!-- Body-->
  <div class="p-6">
    <header class="mb-4">
      <h3 class="text-xl font-medium text-slate-700">The easy way to go</h3>
      <p class="text-sm text-slate-400"> By George, jun 3 2023</p>
    </header>
    <p>
      Experience the simple pleasures of a world with no cars, and only gentle walks through palm tree forests, and fallen coconuts. An island that’s home to extraordinary cliffs, swelling oceans, and mammoth manta rays.
    </p>
  </div>
</div>
<!-- End Basic blog card -->

<!-- Component: Blog card with avatar -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!-- Image -->
  <figure>
    <img src="https://picsum.photos/id/114/800/600" alt="card image" class="aspect-video w-full" />
  </figure>
  <!-- Body-->
  <div class="p-6">
    <header class="flex gap-4 mb-4">
      <a href="#" class="relative inline-flex items-center justify-center w-12 h-12 text-white rounded-full">
        <img src="https://i.pravatar.cc/48?img=24" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <div>
        <h3 class="text-xl font-medium text-slate-700">Stairing at the sky</h3>
        <p class="text-sm text-slate-400"> By Sue Longarm, jun 3 2023</p>
      </div>
    </header>
    <p> Following the journey of history and culture, is a journey through the beautiful green rice paddies, and endless golden fields! Dotted amongst the countryside are bustling towns, with a vibrant atmosphere and great cafe culture.</p>
  </div>
</div>
<!-- End Blog card with avatar -->

<!-- Component: Blog card with action button -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!-- Image -->
  <figure>
    <img src="https://picsum.photos/id/1081/800/600" alt="card image" class="aspect-video w-full" />
  </figure>
  <!-- Body-->
  <div class="p-6">
    <header class="flex gap-4 mb-4">
      <a href="#" class="relative inline-flex items-center justify-center w-12 h-12 text-white rounded-full">
        <img src="https://i.pravatar.cc/48?img=25" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <div>
        <h3 class="text-xl font-medium text-slate-700">In the urban Jungle</h3>
        <p class="text-sm text-slate-400"> By Mary Jay, jun 3 2023</p>
      </div>
    </header>
    <p>
      Day to day life operates outside, so get ready to see the beach become the living room, and the street the kitchen. A simple, yet beautiful, way of life that explains the sunny outlook.
    </p>
  </div>
  <!-- Action base sized link button -->
  <div class="flex justify-end gap-2 p-2 pt-0">
    <button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
      <span>Read more</span>
    </button>
  </div>
</div>
<!-- End Blog card with action button -->

<!-- Component: E-commerce card -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!-- Image -->
  <figure>
    <img src="https://picsum.photos/id/493/800/600" alt="card image" class="aspect-video w-full" />
  </figure>
  <!-- Body-->
  <div class="p-6">
    <header class="mb-4">
      <h3 class="text-xl font-medium text-slate-700">Greek breakfast</h3>
      <p class=" text-slate-400"> $8.99</p>
    </header>
    <p>Blueberry Superpower: Vanilla Greek Yogurt + Fresh Blueberries + Granola + Honey.</p>
  </div>
  <!-- Action base sized basic button -->
  <div class="flex justify-end p-6 pt-0">
    <button class="inline-flex items-center justify-center w-full h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
      <span>Order now!</span>
    </button>
  </div>
</div>
<!-- End E-commerce card -->

<!-- Component: Social story card -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!-- Header-->
  <div class="p-6">
    <header class="flex gap-4">
      <a href="#" class="relative inline-flex items-center justify-center w-12 h-12 text-white rounded-full">
        <img src="https://i.pravatar.cc/48?img=26" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <div>
        <h3 class="text-xl font-medium text-slate-700">Looking back at time</h3>
        <p class="text-sm text-slate-400"> By Mary Jay, jun 3 2023</p>
      </div>
    </header>
  </div>
  <!-- Image -->
  <figure>
    <img src="https://picsum.photos/id/146/800/600" alt="card image" class="aspect-video w-full" />
  </figure>
  <!-- Body-->
  <div class="p-6">
    <p>
      Spend days here, exploring a way of life by bicycle. Discover cobbled streets sandwiched between beautiful rickety townhouses and the lazy flow of the canal.
    </p>
  </div>
  <!-- Action icon buttons -->
  <div class="flex justify-end gap-2 p-2 pt-0">
    <button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
      <span class="relative only:-mx-6">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-81 desc-81">
          <title id="title-81">Icon title</title>
          <desc id="desc-81">A more detailed description of the icon</desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
      </span>
    </button>
    <button class="inline-flex items-center justify-center h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded justify-self-center whitespace-nowrap text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:text-emerald-300 disabled:shadow-none disabled:hover:bg-transparent">
      <span class="relative only:-mx-6">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-82 desc-82">
          <title id="title-82">Icon title</title>
          <desc id="desc-82">A more detailed description of the icon</desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
        </svg>
      </span>
    </button>
  </div>
</div>
<!-- End Social story card -->

<!-- Component: User profile card -->
<div class="overflow-hidden text-center bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!-- Image -->
  <figure class="p-6 pb-0">
    <span class="relative inline-flex items-center justify-center w-20 h-20 text-white rounded-full">
      <img src="https://i.pravatar.cc/80?img=22" alt="user name" title="user name" width="80" height="80" class="max-w-full rounded-full" />
    </span>
  </figure>
  <!-- Body-->
  <div class="p-6">
    <header class="mb-4">
      <h3 class="text-xl font-medium text-slate-700">Nichole Jones</h3>
      <p class=" text-slate-400">Senior Designer</p>
    </header>
  </div>
  <!-- Action base sized with lead icon buttons  -->
  <div class="flex justify-end gap-2 p-6 pt-0">
    <button class="inline-flex items-center justify-center flex-1 h-10 gap-2 px-5 text-sm font-medium tracking-wide transition duration-300 rounded focus-visible:outline-none justify-self-center whitespace-nowrap bg-emerald-50 text-emerald-500 hover:bg-emerald-100 hover:text-emerald-600 focus:bg-emerald-200 focus:text-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-100 disabled:text-emerald-400 disabled:shadow-none">
      <span class="order-2">Send message</span>
      <span class="relative only:-mx-5">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-21 desc-21">
          <title id="title-21">Icon title</title>
          <desc id="desc-21">
            A more detailed description of the icon
          </desc>
          <path stroke-linecap="round" stroke-linejoin="round" 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>
      </span>
    </button>
    <button class="inline-flex items-center justify-center flex-1 h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
      <span class="order-2">Add friend</span>
      <span class="relative only:-mx-5">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" role="graphics-symbol" aria-labelledby="title-06 desc-06">
          <title id="title-06">Icon title</title>
          <desc id="desc-06">
            A more detailed description of the icon
          </desc>
          <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
        </svg>
      </span>
    </button>
  </div>
</div>
<!-- End User profile card -->

<!-- Component: Card with form -->
<form class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!-- Body-->
  <div class="p-6">
    <header class="mb-4 text-center">
      <h3 class="text-xl font-medium text-slate-700">Login</h3>
    </header>
    <div class="flex flex-col space-y-8">
      <!-- Input field -->
      <div class="relative my-6">
        <input id="id-b03" type="email" name="id-b03" placeholder="your name" class="relative w-full h-10 px-4 text-sm placeholder-transparent transition-all border rounded outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
        <label for="id-b03" class="absolute left-2 -top-2 z-[1] px-2 text-xs text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent">
          Your email
        </label>
        <small class="absolute flex justify-between w-full px-4 py-1 text-xs transition text-slate-400 peer-invalid:text-pink-500">
          <span>Type your email address</span>
        </small>
      </div>
      <!-- Input field -->
      <div class="relative my-6">
        <input id="id-b13" type="password" name="id-b13" placeholder="your password" class="relative w-full h-10 px-4 pr-12 text-sm placeholder-transparent transition-all border rounded outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
        <label for="id-b13" class="absolute left-2 -top-2 z-[1] px-2 text-xs text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent">
          Your password
        </label>
        <svg xmlns="http://www.w3.org/2000/svg" class="absolute top-2.5 right-4 h-5 w-5 stroke-slate-400 cursor-pointer peer-disabled:cursor-not-allowed" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
        </svg>
        <small class="absolute flex justify-between w-full px-4 py-1 text-xs transition text-slate-400 peer-invalid:text-pink-500">
          <span>Input field with trailing icon</span>
        </small>
      </div>
    </div>
  </div>
  <!-- Action base sized basic button -->
  <div class="flex justify-end p-6 ">
    <button class="inline-flex items-center justify-center w-full h-10 gap-2 px-5 text-sm font-medium tracking-wide text-white transition duration-300 rounded focus-visible:outline-none whitespace-nowrap bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-700 disabled:cursor-not-allowed disabled:border-emerald-300 disabled:bg-emerald-300 disabled:shadow-none">
      <span>Log in</span>
    </button>
  </div>
</form>
<!-- End Card with form -->

<!-- Component: Image overlay card -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
  <!-- Image -->
  <figure class="relative">
    <img src="https://picsum.photos/id/100/800/600" alt="card image" class="aspect-video w-full" />
    <figcaption class="absolute bottom-0 left-0 w-full p-6 text-white bg-gradient-to-t from-slate-900">
      <h3 class="text-lg font-medium ">Most famous beaches</h3>
      <p class="text-sm opacity-75"> By George, jun 3 2023</p>
    </figcaption>
  </figure>
</div>
<!-- End Image overlay card -->

<!-- Component: Horizontal card-->
<div class="flex flex-col overflow-hidden bg-white rounded shadow-md sm:flex-row text-slate-500 shadow-slate-200">
  <!-- Image -->
  <figure class="flex-1">
    <img src="https://picsum.photos/id/118/800/600" alt="card image" class="object-cover min-h-full aspect-auto" />
  </figure>
  <!-- Body-->
  <div class="flex-1 p-6 sm:mx-6 sm:px-0">
    <header class="flex gap-4 mb-4">
      <a href="#" class="relative inline-flex items-center justify-center w-12 h-12 text-white rounded-full">
        <img src="https://i.pravatar.cc/48?img=24" alt="user name" title="user name" width="48" height="48" class="max-w-full rounded-full" />
      </a>
      <div>
        <h3 class="text-xl font-medium text-slate-700">A day in the sun</h3>
        <p class="text-sm text-slate-400"> By Sue, jun 3 2023</p>
      </div>
    </header>
    <p>
      After a walk through history, there is nothing left to do but admire the hypnotizing landscapes that exist in every direction. From vast deserts to rainbow mountains, and everything in between.
    </p>
  </div>
</div>
<!-- End Horizontal card-->

<!-- Component: Empty card -->
<div class="overflow-hidden bg-white rounded shadow-md text-slate-500 shadow-slate-200">
    <div class="p-6">
    </div>
</div>
<!-- End Empty card -->