card

card section. find it makecomponents.com

This tailwind example is contributed by makecomponents, on 24-Aug-2024. Component is made with Tailwind v3.4. It is responsive.

Card

Author makecomponents

Tailwind v3.4 2.5k 6

Fork Fullscreen

<div class="container mx-auto py-48">
        <div class="grid lge:grid-cols-4 lg:grid-cols-4 md:grid-cols-2 mdsm:grid-cols-2 sm:grid-cols-1 lg:gap-6 lge:gap-6 md:gap-16 mdsm:gap-16 sm:gap-16 lg:px-2 lge:px-2 md:px-2 mdsm:px-2 sm:px-2">
  
          <div class="group relative">
            <div class="-top-12 left-[34%] absolute">
                <img 
           src="https://makecomponents.com/Image/teams/Team001/person1.webp"
            class="rounded-full transition delay-200 group-hover:border-[#bde9ff] border-4 border-[#001f2e] object-cover h-[100px] w-[100px]"
             alt="Michael Thompson" /> </div>
            <div class="group-hover:bg-[#001f2e] transition delay-200 bg-[#bde9ff] pt-16 px-4 pb-4">
              <h2 class=" group-hover:text-white transition delay-200 text-[#001f2e] text-center text-2xl font-semibold">
                David Nguyen
              </h2>
              <p class="group-hover:text-white transition delay-200 pb-10 text-[#001f2e] pt-4 leading-6 text-center text-base">
                Lorem ipsum is placeholder text commonly used in the graphic,
                print, and publishing industries for previewing layouts and visual
                mockups
              </p>
            </div>
          </div>
  
          <div class="group relative">
            <div class="-top-12 left-[34%] absolute">
              <img 
           src="https://makecomponents.com/Image/teams/Team001/person2.webp"
            class="rounded-full transition delay-200 group-hover:border-[#bde9ff] border-4 border-[#001f2e] object-cover h-[100px] w-[100px]"
             alt="Michael Thompson" />
            </div>
            <div class="group-hover:bg-[#001f2e] transition delay-200 bg-[#bde9ff] pt-16 px-4 pb-4">
              <h2 class=" group-hover:text-white transition delay-200 text-[#001f2e] text-center text-2xl font-semibold">
                Michael Thompson
              </h2>
              <p class="group-hover:text-white transition delay-200 pb-10 text-[#001f2e] pt-4 leading-6 text-center text-base">
                Lorem ipsum is placeholder text commonly used in the graphic,
                print, and publishing industries for previewing layouts and visual
                mockups
              </p>
            </div>
          </div>
  
          <div class="group relative">
            <div class="-top-12 left-[34%] absolute">
              <img   src="https://makecomponents.com/Image/teams/Team001/person3.webp" class="rounded-full transition delay-200 group-hover:border-[#bde9ff] border-4 border-[#001f2e] object-cover h-[100px] w-[100px]" alt="Emily Parker"/>
            </div>
            <div class="group-hover:bg-[#001f2e] transition delay-200 bg-[#bde9ff] pt-16 px-4 pb-4">
              <h2 class=" group-hover:text-white transition delay-200 text-[#001f2e] text-center text-2xl font-semibold">
                Emily Parker
              </h2>
              <p class="group-hover:text-white transition delay-200 pb-10 text-[#001f2e] pt-4 leading-6 text-center text-base">
                Lorem ipsum is placeholder text commonly used in the graphic,
                print, and publishing industries for previewing layouts and visual
                mockups
              </p>
            </div>
          </div>
  
          <div class="group relative">
            <div class="-top-12 left-[34%] absolute">
              <img   src="https://makecomponents.com/Image/teams/Team001/person4.webp"
              alt=" James Anderson" class="rounded-full transition delay-200 group-hover:border-[#bde9ff] border-4 border-[#001f2e] object-cover h-[100px] w-[100px]"/>
            </div>
            <div class="group-hover:bg-[#001f2e] transition delay-200 bg-[#bde9ff] pt-16 px-4 pb-4">
              <h2 class=" group-hover:text-white transition delay-200 text-[#001f2e] text-center text-2xl font-semibold">
                James Anderson
              </h2>
              <p class="group-hover:text-white transition delay-200 pb-10 text-[#001f2e] pt-4 leading-6 text-center text-base">
                Lorem ipsum is placeholder text commonly used in the graphic,
                print, and publishing industries for previewing layouts and visual
                mockups
              </p>
            </div>
          </div>
  
        </div>
      </div>

Related Examples

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

Noob

4 years ago

18.7k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Homayoun

10 months ago

1.2k
Card animate

Raul antonio de la cruz hernandez

1 year ago

2k
News Feed

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.4k
3D Card
Made a 3d card using tailwind css and the js

Sufyan jutt

7 months ago

825
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

R Thapa

2 years ago

11.8k
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Abhiraj

1 year ago

2.4k
Tailwind image grid
tailwind picture grid

Anonymous

2 years ago

11.3k
Feature card

Matti

1 year ago

2k
Holiday package card
Responsive card

Aman kumar

2 years ago

7.2k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Hamza Atig

1 year ago

973
Shoping Cart Popup

ABDO-SY

1 year ago

1.7k