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

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

64.1k
User Profile Card
Full-page Profile card

Author:
Prashant

3 years ago

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

Author:
R.P Ketan

2 years ago

27.5k
User profile card with Cover Image

Author:
Noob

3 years ago

32.1k
About me section with image

Author:
Kofi Osei

2 years ago

24.8k
Modern resume template
modern resume template with data

Author:
Amit Pachange

2 years ago

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

15.1k
Show user details

Author:
Lucas Martinez

3 years ago

25.4k
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

Author:
AyDin VM

1 year ago

6.1k
User Profile Card
User Profile Card

Author:
Tanvir Hasan Bappy (Tanvir)

3 weeks ago

14
Profile Card

Author:
Crimson

1 year ago

1.6k
card
best responsive tailwind card

Author:
irahoza daniel

8 months ago

730

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components