card

card section. find it makecomponents.com

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

Card

Author makecomponents

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

Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

1 year ago

3.6k
Holiday package card
Responsive card

Author:
Aman kumar

2 years ago

6.6k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.3k
Profile Card
Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

Author:
UI-Templates

4 months ago

609
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

1 year ago

2.5k
Product card

Author:
Oliver Hansen

3 years ago

10.1k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

4.2k
Smooth Scale & Float Reveal
An enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.

Author:
Juan D. Cortorreal

3 months ago

331
Minimal Info cards

Author:
Gopi Yadav

3 years ago

10.6k
Responsive Features Section

Author:
ariaw

10 months ago

961
Profile1

Author:
pablitodgb

8 months ago

433
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

18k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components