Article Post Card with Image Using Tailwind UI

An elegant UI article card with an appealing visual design, combining information clarity and modern aesthetics, supported by a well-structured layout using the Tailwind CSS framework. inspired by Ramotion on Dribble
card
Loading component...
index.html
94 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Charis+SIL:ital,wght@0,400;0,700;1,400;1,700&display=swap"
  rel="stylesheet">

<style>
  .body {
    font-family: 'Charis SIL', serif;
  }
</style>

<div class="w-full flex flex-wrap gap-4 container px-2 py-12 mx-auto justify-center">
  <div class="bg-white shadow-md border border-gray-200 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
    <img class="rounded-t-xl h-64 w-full object-cover"
      src="https://images.unsplash.com/photo-1494199505258-5f95387f933c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=873&q=80"
      alt="">

    <div class="p-5 space-y-2">
      <span class="bg-green-500 text-gray-100 px-2.5 py-0.5 text-xs font-medium rounded-full">Article</span>
      <h5 class="text-gray-700 font-semibold text-2xl dark:text-white">Success Strategies in the World of Basketball:
        Exploring Effective Tactics</h5>
      <a href="#"
        class="text-blue-700 hover:text-blue-800 font-medium text-sm py-2 text-center inline-flex items-center dark:text-blue-600 dark:hover:text-blue-700">
        Learn more
        <svg class="-mr-1 ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd"
            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
            clip-rule="evenodd"></path>
        </svg>
      </a>
    </div>
  </div>
  <div class="bg-white shadow-md border border-gray-200 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">
    <img class="rounded-t-xl h-64 w-full object-cover"
      src="https://images.unsplash.com/photo-1525973132219-a04334a76080?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=785&q=80"
      alt="">

    <div class="p-5 space-y-2">
      <span class="bg-green-500 text-gray-100 px-2.5 py-0.5 text-xs font-medium rounded-full">Article</span>
      <h5 class="text-gray-700 font-semibold text-2xl dark:text-white">Why Basketball Remains Captivating: The Enduring
        Allure in the World of Sports</h5>
      <a href="#"
        class="text-blue-700 hover:text-blue-800 font-medium text-sm py-2 text-center inline-flex items-center dark:text-blue-600 dark:hover:text-blue-700">
        Learn more
        <svg class="-mr-1 ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd"
            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
            clip-rule="evenodd"></path>
        </svg>
      </a>
    </div>
  </div>
  <div class="bg-white shadow-md border border-gray-200 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">

    <img class="rounded-t-xl h-64 w-full object-cover"
      src="https://images.unsplash.com/photo-1647423753745-652b836e819b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
      alt="">

    <div class="p-5 space-y-2">
      <span class="bg-indigo-500 text-gray-100 px-2.5 py-0.5 text-xs font-medium rounded-full">Gallery</span>
      <h5 class="text-gray-700 font-semibold text-2xl dark:text-white">Success Strategies in the World of Basketball:
        Exploring Effective Tactics</h5>
      <a href="#"
        class="text-blue-700 hover:text-blue-800 font-medium text-sm py-2 text-center inline-flex items-center dark:text-blue-600 dark:hover:text-blue-700">
        Learn more
        <svg class="-mr-1 ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd"
            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
            clip-rule="evenodd"></path>
        </svg>
      </a>
    </div>
  </div>
  <div class="bg-white shadow-md border border-gray-200 rounded-xl max-w-sm dark:bg-gray-800 dark:border-gray-700">

    <img class="h-64 w-full object-cover rounded-t-xl"
      src="https://images.unsplash.com/photo-1505484123437-c4ecb3e13bef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
      alt="">
    <div class="p-5 space-y-2">
      <span class="bg-indigo-500 text-gray-100 px-2.5 py-0.5 text-xs font-medium rounded-full">Article</span>
      <h5 class="text-gray-700 font-semibold text-2xl dark:text-white">"Gallery of Classic Moments in Basketball
        History"</h5>
      <a href="#"
        class="text-blue-700 hover:text-blue-800 font-medium text-sm py-2 text-center inline-flex items-center dark:text-blue-600 dark:hover:text-blue-700">
        Learn more
        <svg class="-mr-1 ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd"
            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
            clip-rule="evenodd"></path>
        </svg>
      </a>
    </div>
  </div>
</div>
Article Post Card with Image Using Tailwind UI

Preview - Article Post Card with Image Using Tailwind UI
