Home
Anonymous
Stylish profile card with a hover effect

Stylish profile card with a hover effect

This tailwind example is contributed by Anonymous, on 07-Sep-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Profile

Author Anonymous

8.3k

Fork Fullscreen

<div class="max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg hover:shadow-blue-400">
  <div class="relative">
    <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1557862921-37829c790f19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHx1c2VyfGVufDB8MHx8fDE2OTQwOTU5Nzl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Profile Image">
  </div>
  <div class="px-6 py-4">
    <div class="text-xl font-semibold text-gray-800">John Doe</div>
    <p class="text-gray-600">Front-end Developer</p>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block px-2 py-1 font-semibold text-teal-900 bg-teal-200 rounded-full">Web</span>
    <span class="inline-block px-2 py-1 font-semibold text-indigo-900 bg-indigo-200 rounded-full">UI/UX</span>
    <span class="inline-block px-2 py-1 font-semibold text-purple-900 bg-purple-200 rounded-full">Design</span>
  </div>
  <div class="px-6 py-4">
    <a href="#" class="text-blue-500 hover:underline">View Profile</a>
  </div>
</div>

Related Examples

User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

2 years ago

60.5k
User Profile Card
Full-page Profile card

Author:
Prashant

2 years ago

17.5k
Basic Resume template
simple and clean layout that provides a professional look.

Author:
R.P Ketan

2 years ago

25.4k
User profile card with Cover Image

Author:
Noob

2 years ago

27.9k
About me section with image

Author:
Kofi Osei

2 years ago

23.2k
Modern resume template
modern resume template with data

Author:
Amit Pachange

1 year ago

19.9k
User profile card with social icons
Showcases a user's profile information along with links to their various social media accounts.

Author:
Simon Scheffer

2 years ago

14.5k
Show user details

Author:
Lucas Martinez

2 years ago

23.8k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

7 months ago

1.4k
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

1 year ago

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

Author:
SHARIFUL ISLAM

2 months ago

349
Portfolio

Author:
Aitrik Saha

3 months ago

680

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components