Published on

6 Easy Ways To Make A User Dropdown With Icon + Profile Picture With Tailwind CSS Without Even Thinking About It

Tags
User Dropdown With Icon + Profile Picture

As a FrontEnd technology blogger, it is important to keep up with the latest trends and tools in the industry. Tailwind CSS is one such tool that has gained a lot of popularity in recent times. In this article, we will explore how to create a User Dropdown With Icon + Profile Picture ui component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly build responsive and custom user interfaces. It provides a set of pre-defined CSS classes that can be used to style HTML elements. With Tailwind CSS, you can create complex layouts and designs without writing custom CSS.

The description of User Dropdown With Icon + Profile Picture ui component

A User Dropdown With Icon + Profile Picture ui component is a common design element in web applications. It typically consists of a user's profile picture, name, and a dropdown menu with options such as logout, settings, and profile. This component is used to provide easy access to user-related actions and information.

Why use Tailwind CSS to create a User Dropdown With Icon + Profile Picture ui component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to style HTML elements. This makes it easy to create complex designs without writing custom CSS. Additionally, Tailwind CSS is highly customizable, which means that you can easily modify the styles to match your application's design.

The preview of User Dropdown With Icon + Profile Picture ui component

To create a User Dropdown With Icon + Profile Picture ui component, we will use Tailwind CSS classes to style the HTML elements. The final result will look something like this:

Free download of the User Dropdown With Icon + Profile Picture's source code

The source code of User Dropdown With Icon + Profile Picture ui component

To create the User Dropdown With Icon + Profile Picture ui component, we will use HTML and Tailwind CSS classes. The source code for the component is as follows:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<div class="h-screen bg-gray-200 flex justify-center items-center dark:bg-gray-500">
  <div x-data="{ open: false }" class="bg-white dark:bg-gray-800 w-64  shadow flex justify-center items-center">
      <div @click="open = !open" class="relative border-b-4 border-transparent py-3" :class="{'border-indigo-700 transform transition duration-300 ': open}" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100">
        <div class="flex justify-center items-center space-x-3 cursor-pointer">
          <div class="w-12 h-12 rounded-full overflow-hidden border-2 dark:border-white border-gray-900">
            <img src="https://images.unsplash.com/photo-1610397095767-84a5b4736cbd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" class="w-full h-full object-cover">
          </div>
          <div class="font-semibold dark:text-white text-gray-900 text-lg">
            <div class="cursor-pointer">Hasan Muhammad</div>
          </div>
        </div>
        <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute w-60 px-5 py-3 dark:bg-gray-800 bg-white rounded-lg shadow border dark:border-transparent mt-5">
          <ul class="space-y-3 dark:text-white">
            <li class="font-medium">
              <a href="#" class="flex items-center transform transition-colors duration-200 border-r-4 border-transparent hover:border-indigo-700">
                <div class="mr-3">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                </div>
                Account
              </a>
            </li>
            <li class="font-medium">
              <a href="#" class="flex items-center transform transition-colors duration-200 border-r-4 border-transparent hover:border-indigo-700">
                <div class="mr-3">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                </div>
                Setting
              </a>
            </li>
            <hr class="dark:border-gray-700">
            <li class="font-medium">
              <a href="#" class="flex items-center transform transition-colors duration-200 border-r-4 border-transparent hover:border-red-600">
                <div class="mr-3 text-red-600">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                </div>
                Logout
              </a>
            </li>
          </ul>
        </div>
      </div>
  </div>
</div>

How to create a User Dropdown With Icon + Profile Picture with Tailwind CSS?

Now that we have an understanding of what a User Dropdown With Icon + Profile Picture ui component is and why we should use Tailwind CSS, let's dive into the steps to create it.

Step 1: Create the HTML structure

The first step is to create the HTML structure for the component. We will use a div element with a class of "relative" to create a container for the component. Inside this div, we will create an img element with a class of "w-10 h-10 rounded-full" to display the user's profile picture. We will also create a span element with a class of "ml-2 text-gray-700 font-medium" to display the user's name. Finally, we will create a button element with a class of "ml-2 flex items-center text-gray-700 hover:text-gray-900" to display the dropdown icon.

<div class="relative">
  <img class="w-10 h-10 rounded-full" src="user-profile-picture.jpg" alt="User Profile Picture">
  <span class="ml-2 text-gray-700 font-medium">John Doe</span>
  <button class="ml-2 flex items-center text-gray-700 hover:text-gray-900">
    <svg class="fill-current w-4 h-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18a2 2 0 100-4 2 2 0 000 4zM10 4a2 2 0 100-4 2 2 0 000 4z" />
    </svg>
  </button>
</div>

Step 2: Style the HTML elements with Tailwind CSS classes

The next step is to style the HTML elements using Tailwind CSS classes. We will use the following classes to style the elements:

  • The "relative" class will position the dropdown menu relative to the container.
  • The "w-10 h-10 rounded-full" class will set the width, height, and border radius of the profile picture.
  • The "ml-2" class will add a margin to the left of the name and dropdown icon.
  • The "text-gray-700 font-medium" class will set the font color and weight of the name.
  • The "flex items-center" class will display the dropdown icon and text on the same line.
  • The "hover:text-gray-900" class will change the color of the dropdown icon when the user hovers over it.
<div class="relative">
  <img class="w-10 h-10 rounded-full" src="user-profile-picture.jpg" alt="User Profile Picture">
  <span class="ml-2 text-gray-700 font-medium">John Doe</span>
  <button class="ml-2 flex items-center text-gray-700 hover:text-gray-900">
    <svg class="fill-current w-4 h-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18a2 2 0 100-4 2 2 0 000 4zM10 4a2 2 0 100-4 2 2 0 000 4z" />
    </svg>
  </button>
</div>

Step 3: Create the dropdown menu

The final step is to create the dropdown menu. We will use a div element with a class of "absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10" to create the dropdown menu. Inside this div, we will create a ul element with a class of "py-1" to display the menu items. We will also create a li element with a class of "px-4 py-2 hover:bg-gray-100 cursor-pointer" for each menu item.

<div class="relative">
  <img class="w-10 h-10 rounded-full" src="user-profile-picture.jpg" alt="User Profile Picture">
  <span class="ml-2 text-gray-700 font-medium">John Doe</span>
  <button class="ml-2 flex items-center text-gray-700 hover:text-gray-900">
    <svg class="fill-current w-4 h-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18a2 2 0 100-4 2 2 0 000 4zM10 4a2 2 0 100-4 2 2 0 000 4z" />
    </svg>
  </button>
  <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
    <ul class="py-1">
      <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Settings</li>
      <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Profile</li>
      <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Logout</li>
    </ul>
  </div>
</div>

Step 4: Style the dropdown menu with Tailwind CSS classes

The final step is to style the dropdown menu using Tailwind CSS classes. We will use the following classes to style the menu:

  • The "absolute" class will position the menu relative to the container.
  • The "right-0" class will align the menu to the right of the container.
  • The "mt-2" class will add some margin to the top of the menu.
  • The "w-48" class will set the width of the menu.
  • The "bg-white rounded-md shadow-lg" class will add a white background, rounded corners, and a shadow to the menu.
  • The "z-10" class will set the z-index of the menu to ensure that it appears on top of other elements.
  • The "py-1" class will add some padding to the top and bottom of the menu items.
  • The "px-4 py-2 hover:bg-gray-100 cursor-pointer" class will set the padding, background color, and cursor style of the menu items.
<div class="relative">
  <img class="w-10 h-10 rounded-full" src="user-profile-picture.jpg" alt="User Profile Picture">
  <span class="ml-2 text-gray-700 font-medium">John Doe</span>
  <button class="ml-2 flex items-center text-gray-700 hover:text-gray-900">
    <svg class="fill-current w-4 h-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
      <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18a2 2 0 100-4 2 2 0 000 4zM10 4a2 2 0 100-4 2 2 0 000 4z" />
    </svg>
  </button>
  <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
    <ul class="py-1">
      <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Settings</li>
      <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Profile</li>
      <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Logout</li>
    </ul>
  </div>
</div>

Conclusion

In this article, we explored how to create a User Dropdown With Icon + Profile Picture ui component using Tailwind CSS. We learned that Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that can be used to style HTML elements. We also learned that creating a User Dropdown With Icon + Profile Picture ui component is easy with Tailwind CSS, and we went through the steps to create it. With Tailwind CSS, you can quickly and easily create custom and responsive user interfaces without writing custom CSS.