Home
SHARIFUL ISLAM
User Profile Sidebar Menu

User Profile Sidebar Menu

A clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.

This tailwind example is contributed by SHARIFUL ISLAM, on 02-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author SHARIFUL ISLAM

416

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
  <div class="w-64 bg-white p-6 rounded-2xl shadow-md">
  
  <div class="flex flex-col items-center">
    <div class="relative">
      <img
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxX5eWXJCWIL0J94AAc80b6Ra9bcb1Ns8k1g&s"
        alt="Profile"
        class="w-20 h-20 rounded-full object-cover"
      />
      <div
        class="absolute bottom-0 right-0 bg-white p-1 rounded-full shadow-sm"
      >
        <svg
          class="w-5 h-5 text-gray-500"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L7.5 19.5H3v-4.5L16.732 3.732z"
          />
        </svg>
      </div>
    </div>
    <p class="text-sm text-gray-500 mt-2">Hello</p>
    <h2 class="text-lg font-semibold mt-1">Jenny Wilson</h2>
  </div>

<nav class="space-y-1">
    <a
      href="#"
      class="flex items-center gap-3 px-4 py-2 rounded-full border border-primary text-primary font-medium"
    >
      <svg
        class="w-5 h-5"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M3 3h7v7H3V3zm11 0h7v7h-7V3zm-11 11h7v7H3v-7zm11 0h7v7h-7v-7z"
        />
      </svg>
      Dashboard
    </a>

<a
      href="#"
      class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:text-primary"
    >
      <svg
        class="w-5 h-5"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9 12h6m2 8H7a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 01-2 2z"
        />
      </svg>
      Order History
    </a>

<a
      href="#"
      class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:text-primary"
    >
      <svg
        class="w-5 h-5"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M16 7a4 4 0 01-8 0m8 0a4 4 0 00-8 0m8 0v4a4 4 0 01-8 0V7m12 8v4M4 15v4m8-4v4"
        />
      </svg>
      Account Details
    </a>

<a
      href="#"
      class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:text-primary"
    >
      <svg
        class="w-5 h-5"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M17.657 16.657L13.414 12 17.657 7.343m-4.243 9.314L8.343 12l5.071-4.657"
        />
      </svg>
      Address
    </a>

<a
      href="#"
      class="flex items-center gap-3 px-4 py-2 text-gray-700 hover:text-primary"
    >
      <svg
        class="w-5 h-5"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M5 13l4 4L19 7"
        />
      </svg>
      To Review
    </a>

</div>

Related Examples

Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

12.5k
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 with Cover Image

Author:
Noob

2 years ago

28.4k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

2 years ago

10.1k
Minimal Profile card

Author:
Abhijit Sen

2 years ago

10.7k
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

11k
Author box

Author:
Mr Robot

2 years ago

11.3k
Profile card

Author:
Mr Robot

2 years ago

12k
User profile card

Author:
Mr Robot

2 years ago

10.7k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

11.2k
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

13.4k
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 2400+ components