Home
Shariar Hasan
Card Component Simple

Card Component Simple

This is a Card Component for simple use &full responsive

This tailwind example is contributed by Shariar Hasan, on 16-Feb-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Shariar Hasan

1.4k

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-w-7xl mx-auto my-10">
  <div class="h-full"
    style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 0.5s cubic-bezier(0.5, 0, 0, 1) 0s, transform 0.5s cubic-bezier(0.5, 0, 0, 1) 0s;">
    <a href="/my-projects/test-porject-in-database">
      <div
        class="max-h-[200px] border border-gray-600 rounded relative group overflow-hidden hover:border-brand duration-200 hover:animat e-pulse peer">
        <div class="">
          <img alt="Test Porject in database" loading="lazy" width="500" height="500" decoding="async" data-nimg="1" class="w-full duration-200" 
          srcset="" 
          src="https://picsum.photos/200" style="color: transparent;">
        </div>
        <div  
          class="absolute bg-gradient-to-b from-transparent to-black/100 w-full h-full px-1 py-2 top-0 left-0 flex  items-start justify-end flex-col group-hover:opacity-100 group-hover:visible opacity-0 invisible duration-200 overflow-y-auto scrollbar-none text-white">
          <h5 class="translate-y-28 group-hover:translate-y-0 duration-200 tracking-wide text-sm px-2 text-gray-200">Test
            Porject in database</h5>
          <p class="translate-y-28 group-hover:translate-y-0 duration-200 text-gray-600 text-xs px-2 delay-100">Last updated :
            Feb 14th, 24</p>
        </div>
      </div>
    </a>
  </div>
  <div class="h-full"
    style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 0.5s cubic-bezier(0.5, 0, 0, 1) 0.05s, transform 0.5s cubic-bezier(0.5, 0, 0, 1) 0.05s;">
    <a href="/my-projects/shopno-dishari-web-site-desh-shera-1707845821077">
      <div
        class="max-h-[200px] border border-gray-600 rounded relative group overflow-hidden hover:border-brand duration-200 hover:animat e-pulse peer">
        <div class=""><img alt="Shopno Dishari Web Site desh shera" loading="lazy" width="500" height="500" decoding="async" data-nimg="1" class="w-full duration-200" srcset="https://picsum.photos/200" src="/_next/image?url=https%3A%2F%2Fpicsum.photos%2F400%2F250&amp;w=1080&amp;q=75" style="color: transparent;">
        </div>
        <div
          class="absolute bg-gradient-to-b from-transparent to-black/100 w-full h-full px-1 py-2 top-0 left-0 flex  items-start justify-end flex-col group-hover:opacity-100 group-hover:visible opacity-0 invisible duration-200 overflow-y-auto scrollbar-none text-white">
          <h5 class="translate-y-28 group-hover:translate-y-0 duration-200 tracking-wide text-sm px-2 text-gray-200">
            Shopno Dishari Web Site desh shera</h5>
          <p class="translate-y-28 group-hover:translate-y-0 duration-200 text-gray-600 text-xs px-2 delay-100">Last updated :
            Feb 13th, 24</p>
        </div>
      </div>
    </a>
  </div>
  <div class="h-full"
    style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 0.5s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.5s cubic-bezier(0.5, 0, 0, 1) 0.1s;">
    <a href="/my-projects/shopno-dishari-web-site-desh-shera-1707682549723">
      <div
        class="max-h-[200px] border border-gray-600 rounded relative group overflow-hidden hover:border-brand duration-200 hover:animat e-pulse peer">
        <div class=""><img alt="Shopno Dishari Web Site desh shera" loading="lazy" width="500" height="500" decoding="async" data-nimg="1" class="w-full duration-200" srcset="https://picsum.photos/200" src="/_next/image?url=https%3A%2F%2Fpicsum.photos%2F400%2F250&amp;w=1080&amp;q=75" style="color: transparent;">
        </div>
        <div
          class="absolute bg-gradient-to-b from-transparent to-black/100 w-full h-full px-1 py-2 top-0 left-0 flex  items-start justify-end flex-col group-hover:opacity-100 group-hover:visible opacity-0 invisible duration-200 overflow-y-auto scrollbar-none text-white">
          <h5 class="translate-y-28 group-hover:translate-y-0 duration-200 tracking-wide text-sm px-2 text-gray-200">
            Shopno Dishari Web Site desh shera</h5>
          <p class="translate-y-28 group-hover:translate-y-0 duration-200 text-gray-600 text-xs px-2 delay-100">Last updated :
            Feb 12th, 24</p>
        </div>
      </div>
    </a>
  </div>
  
</div>

Related Examples