Home
farid
Personal card

Personal card

A card to show minimal info for staff member

This tailwind example is contributed by farid, on 03-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information

Card Profile

Author farid

315

Fork Fullscreen

<article class="mx-auto flex flex-col items-center justify-between p-4 py-8 text-center transition-all bg-white dark:bg-gray-800 border-2 rounded border-gray-200 dark:border-gray-600 text-black dark:text-white max-w-min hover:shadow-xl">
    <picture class="w-40 overflow-hidden border-8 rounded-full fade-in aspect-square border-orange-200 dark:border-orange-600 transition duration-300 hover:border-4">
      <img alt="photo" src="data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 7C9.65685 7 11 5.65685 11 4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4C5 5.65685 6.34315 7 8 7Z' fill='%23ccc'/%3E%3Cpath d='M14 12C14 10.3431 12.6569 9 11 9H5C3.34315 9 2 10.3431 2 12V15H14V12Z' fill='%23cccccc'/%3E%3C/svg%3E" class="hover:scale-110 transition duration-300">
    </picture>
    <h3 class="py-2 mb-4 font-semibold xl">
      Name Surname
    </h3>

<h4 class="mb-0">Position</h4>
    <p class="mb-0">email@domain.com</p>
    <p class="font-bold">+1 23456789</p>
  </article>

Related Examples

Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

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

60k
User profile card with Cover Image

Author:
Noob

2 years ago

27.3k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

2 years ago

9.9k
Minimal Profile card

Author:
Abhijit Sen

2 years ago

10.5k
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

10.6k
Author box

Author:
Mr Robot

2 years ago

11.1k
Profile card

Author:
Mr Robot

2 years ago

11.9k
User profile card

Author:
Mr Robot

2 years ago

10.4k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

10.9k
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

13.1k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

1 year ago

7.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components