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

Feature Card

Md. Tofayel islam

2 years ago

2.2k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Robert Chunga

1 year ago

3.3k
Pagination
It's my first project which i made him in the using tailwind css and html

Sufyan jutt

1 year ago

1.1k
Product card

Oliver Hansen

3 years ago

11k
Simple Card with Image
Horizontal card

Prem..

4 years ago

10.1k
profile2

pablitodgb

1 year ago

1.5k
Simple responsive cards

Shakti

3 years ago

10.6k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.2k
Pricing Plans

ariaw

1 year ago

634
Simple card layout with image

Leon Bachmann

3 years ago

11.3k
Beautiful Info card
Info card with info type section on the corner.

TailwindFlex

4 years ago

10.9k
Logos cards

Maxim

1 year ago

2.3k