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

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

Pokemon!
Cool Pokemon card!

Author:
Crimson

4 months ago

756
card
card section. find it makecomponents.com

Author:
makecomponents

9 months ago

1.3k
Highlights - Speakers Section

Author:
ABDO-SY

1 month ago

86
cards
cards with background animation

Author:
Anonymous

1 year ago

2.3k
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

2 weeks ago

103
Info Card

Author:
Prem..

2 years ago

18.4k
Form package

Author:
Hunter Guru

1 year ago

2k
Card with sale ribbon

Author:
Fagundo67

2 years ago

11k
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

3 months ago

159
Product card

Author:
Oliver Hansen

2 years ago

13k
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

13.4k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

10 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components