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

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

3 years ago

62.9k
User Profile Card
Full-page Profile card

Author:
Prashant

3 years ago

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

Author:
R.P Ketan

2 years ago

26.9k
User profile card with Cover Image

Author:
Noob

3 years ago

30.6k
About me section with image

Author:
Kofi Osei

2 years ago

24.4k
Modern resume template
modern resume template with data

Author:
Amit Pachange

2 years ago

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

15k
Show user details

Author:
Lucas Martinez

2 years ago

24.9k
Profile, Team or Testimonial
Profile, Team or Testimonial

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.6k
User card with Social Icons

Author:
Anonymous

1 year ago

1.8k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

5 months ago

776
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components