Profile1

This tailwind example is contributed by pablitodgb, on 21-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author pablitodgb

Tailwind v3.4 879 3

Fork Fullscreen

<div class="p-0 m-0 h-screen w-screen bg-slate-500 flex justify-center items-center">
  <div class="min-h-20 h-fit max-h-fit w-96 min-w-auto bg-slate-100 text-gray-600 rounded-lg">
    <div class="w-full rounded-lg">
      <img class="h-[6rem] w-full object-cover rounded-lg " src="https://images.unsplash.com/photo-1686953412699-b8f522999488?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxhdnRhcnxlbnwwfDB8fHwxNzUwMzU1MzI2fDA&ixlib=rb-4.1.0&q=80&w=1080" alt="image"/>
      <img class="size-20 object-fill rounded-full relative -top-14 mx-auto border border-4 border-slate-100" src="https://images.unsplash.com/photo-1686953412699-b8f522999488?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxhdnRhcnxlbnwwfDB8fHwxNzUwMzU1MzI2fDA&ixlib=rb-4.1.0&q=80&w=1080" alt="image"/>
    </div>
    <div class="p-1 py-3 w-full text-center">
      <main class="font-bold block">Sarah Smith</main>
      <p class="font-think block">Freelance Web Designer<p>
    </div>
    <div class="flex justify-between px-4">
      <div><p>😊</p><p>2k</P></div>
      <div><p>😂</p><p>10k</P></div>
      <div><p>🤣</p><p>15</P></div>
    </div>
  <div class="border border-t-1 my-3"></div>
  <div class="w-max mx-auto py-2">
    <button class="bg-black text-white p-2 m-1 rounded-full w-20">Follow</button>
  </div>
  </div>
</div>

Related Examples

Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.6k
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:

Prashant

4 years ago

65.5k
User profile card with Cover Image

Noob

3 years ago

33.8k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Author box

Mr Robot

3 years ago

12.5k
Profile card

Mr Robot

3 years ago

13.4k
User profile card

Mr Robot

3 years ago

11.9k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

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

Prajwal Hallale

3 years ago

7.6k