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.9k
User Profile Card
Full-page Profile card

Author:
Prashant

2 years ago

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

Author:
R.P Ketan

2 years ago

25.6k
User profile card with Cover Image

Author:
Noob

2 years ago

28.3k
About me section with image

Author:
Kofi Osei

2 years ago

23.4k
Modern resume template
modern resume template with data

Author:
Amit Pachange

1 year ago

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

24.1k
Profit Card
Profit card with deatils

Author:
dongol heart

6 months ago

1k
Jobs recommended for you
This HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing: A colorful header background. A company logo/profile image styled as a rounded thumbnail. A job title (e.g., Senior Product Designer). A company name. A location with an icon. Job type (e.g., Full-time). Time since posting (e.g., 2d ago).

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

43
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

8 months ago

1.4k
Update Profile
Update profile page with basic informations

Author:
Sedat Kumcu

6 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components