Profile Card

This tailwind example is contributed by KULDEEP, on 21-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author KULDEEP

Tailwind v3.4 1.4k 3

Fork Fullscreen

<div class="mt-24 text-center">
  <h3 class="text-3xl font-bold text-gray-900 mb-4">Meet Our Team</h3>
  <p class="text-gray-600 mb-10">A diverse group of thinkers, doers, and innovators driving progress.</p>
  <div class="flex flex-wrap justify-center gap-8">
    
    <div class="bg-white rounded-lg shadow-md p-6 max-w-xs text-center hover:shadow-xl transition">
      <img class="w-24 h-24 rounded-full mx-auto mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member">
      <h4 class="text-lg font-medium text-gray-900">Alex Johnson</h4>
      <p class="text-sm text-gray-500">CEO & Co-Founder</p>
    </div>

<div class="bg-white rounded-lg shadow-md p-6 max-w-xs text-center hover:shadow-xl transition">
      <img class="w-24 h-24 rounded-full mx-auto mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member">
      <h4 class="text-lg font-medium text-gray-900">Sophie Lee</h4>
      <p class="text-sm text-gray-500">CTO</p>
    </div>

<div class="bg-white rounded-lg shadow-md p-6 max-w-xs text-center hover:shadow-xl transition">
      <img class="w-24 h-24 rounded-full mx-auto mb-4" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Team Member">
      <h4 class="text-lg font-medium text-gray-900">Michael Smith</h4>
      <p class="text-sm text-gray-500">Head of Design</p>
    </div>
  </div>
</div>

Related Examples

Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

saim-t8

1 year ago

1.1k
3D Interactive Premium Card
This sleek, modern UI card elevates the standard design with a three-dimensional, interactive experience. Utilizing a subtle 3D parallax tilt that responds to your mouse movement and a smooth, sweeping light-refraction effect on hover, the card instantly communicates premium quality and technical sophistication. It's built for presenting key metrics and deployment actions with dynamic flair.

CodewithFaraz

11 months ago

1.2k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.1k
User Profile Sidebar Menu
A clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.

SHARIFUL ISLAM

1 year ago

1.9k
Profile Card
Responsive modern profile card

Rajesh Maheshwari

1 year ago

1.1k
Cards section - Sport

ABDO-SY

1 year ago

3.2k
Contact us form with map
Contact us form with map

Chithira Kumar M

2 years ago

13k
Chats Screen in neomorphism

Akram Khan

2 years ago

3k
card
best responsive tailwind card

irahoza daniel

1 year ago

1.8k
Showcase Card

Jaber Zarif

2 years ago

3.3k
Experience Card
Experience card section you can use for portfolio or other profiles.

Khalid

2 years ago

4.4k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k