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.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

Hover Card

Author:
Maxim

1 year ago

2.5k
Beautiful post cards

Author:
Matej Kovač

1 year ago

2.6k
credit card checkout

Author:
Antony

1 year ago

3.1k
Team Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

2k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

3 months ago

404
Food App Web design

Author:
Aitrik Saha

7 months ago

1.3k
cards
cards with background animation

Author:
Anonymous

2 years ago

11k
Article card

Author:
Sienna

2 years ago

9.7k
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

4 months ago

699
Hover effect card

Author:
Rakib Hasan Sohag

9 months ago

1.3k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

3 years ago

17.3k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

5 months ago

774

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components