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

2.9k

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

Profile card

Author:
Mr Robot

3 years ago

12.8k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

52k
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

1 year ago

2.6k
offer card

Author:
ABDO-SY

10 months ago

1.1k
Website Pricing List Card Component
A Website Pricing List Card Component is a reusable UI element that displays pricing plans or packages on a website, typically for SaaS products, subscriptions, or service tiers. It helps users easily compare different pricing options and choose the best one.

Author:
dev-fab250

7 months ago

1.1k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

2 years ago

10.4k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

3 years ago

10.7k
Profile Card
Simple and Attractive Profile card in tailwind css

Author:
KULDEEP

6 months ago

539
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

9 months ago

1.3k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

1 year ago

3k
Info cards

Author:
Samuel Dawson

2 years ago

11k
Best incamas to date

Author:
ORGIN_DREAMS

7 months ago

878

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components