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

Simple responsive cards

Author:
Shakti

2 years ago

10.1k
Avtar Cards
this is cards, for the profile section

Author:
pablitodgb

8 months ago

401
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

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

52.2k
Article card

Author:
Sienna

3 years ago

12.8k
Brand Grid with Hover Effect

Author:
ariaw

11 months ago

1.5k
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

11 months ago

835
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.7k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

10 months ago

757
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

1 year ago

2.8k
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.8k
Blog Card
A blog card with dark-mode

Author:
Robert Chunga

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components