Published on

Advanced Guide: Build A Avatar With Username With Tailwind CSS

Tags
ButtonsWidget
Avatar with username

As a FrontEnd technology blogger, I am always on the lookout for new ways to create beautiful and functional UI components. In this article, I will show you how to build an Avatar with username UI component using Tailwind CSS.

What is Tailwind CSS?

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

The description of Avatar with username UI component

An Avatar with username UI component is a common design element that you can find on many websites and applications. It typically consists of an image or icon that represents the user and their username displayed next to it. This component is useful for displaying user information in a compact and visually appealing way.

Why use Tailwind CSS to create an Avatar with username UI component?

Tailwind CSS is an excellent choice for building UI components like the Avatar with username. It provides a wide range of pre-defined classes that you can use to style your HTML elements, which makes it easy to create complex designs without writing custom CSS. Additionally, Tailwind CSS is highly customizable, which means you can easily adjust the styles to match your design requirements.

The preview of Avatar with username UI component

To create an Avatar with username UI component, we will use Tailwind CSS classes to style our HTML elements. The result will be a visually appealing component that displays the user's avatar and username.

Free download of the Avatar with username's source code

The source code of Avatar with username UI component

To create an Avatar with username UI component, we will use HTML and Tailwind CSS classes. The HTML will define the structure of the component, while the Tailwind CSS classes will style it.

<style>
  .line-height-username1 {
    line-height: 3.75rem;
  }

  .line-height-username2 {
    line-height: 5.5rem;
  }

  .line-height-username3 {
    line-height: 7.5rem;
  }
</style>
<div>
  <div class="line-height-username1 mb-6 inline-block h-16 rounded-full bg-gray-300 pr-5">
    <img
      class="float-left h-full rounded-full"
      src="https://randomuser.me/api/portraits/women/34.jpg"
    />
    <span class="ml-3">Kate Horwitz</span>
  </div>

  <div></div>

  <div class="line-height-username2 mb-6 inline-block h-24 rounded-full bg-gray-300 pr-6 text-3xl">
    <img
      class="float-left h-full rounded-full"
      src="https://randomuser.me/api/portraits/women/34.jpg"
    />
    <span class="ml-3">Kate Horwitz</span>
  </div>

  <div></div>

  <div class="line-height-username3 inline-block h-32 rounded-full bg-gray-300 pr-8 text-5xl">
    <img
      class="float-left h-full rounded-full"
      src="https://randomuser.me/api/portraits/women/34.jpg"
    />
    <span class="ml-4">Kate Horwitz</span>
  </div>
</div>

How to create an Avatar with username with Tailwind CSS?

To create an Avatar with username UI component with Tailwind CSS, follow these steps:

Step 1: Set up your HTML

The first step is to set up your HTML. Here is an example:

<div class="flex items-center">
  <div class="w-12 h-12 rounded-full overflow-hidden">
    <img class="w-full h-full object-cover" src="https://via.placeholder.com/150" alt="Avatar">
  </div>
  <div class="ml-4">
    <div class="text-lg font-medium text-gray-900">Username</div>
    <div class="text-sm font-medium text-gray-500">Role</div>
  </div>
</div>

In this example, we have a div element with the flex and items-center classes. This will center the child elements horizontally and vertically. Inside this div, we have another div element with the w-12, h-12, rounded-full, and overflow-hidden classes. This will create a circular container for the avatar image. Inside this container, we have an img element with the w-full, h-full, and object-cover classes. This will make the image fill the container and maintain its aspect ratio.

Next, we have another div element with the ml-4 class. This will add a margin of 4 units to the left of the element. Inside this div, we have two div elements with the text-lg, font-medium, text-gray-900, and text-sm, font-medium, text-gray-500 classes. These will style the username and role text.

Step 2: Style with Tailwind CSS classes

The next step is to style our HTML with Tailwind CSS classes. Here is an example:

<div class="flex items-center">
  <div class="w-12 h-12 rounded-full overflow-hidden">
    <img class="w-full h-full object-cover" src="https://via.placeholder.com/150" alt="Avatar">
  </div>
  <div class="ml-4">
    <div class="text-lg font-medium text-gray-900">Username</div>
    <div class="text-sm font-medium text-gray-500">Role</div>
  </div>
</div>

In this example, we have used the following Tailwind CSS classes:

  • flex: This sets the display property to flex.
  • items-center: This centers the child elements horizontally and vertically.
  • w-12: This sets the width of the element to 12 units.
  • h-12: This sets the height of the element to 12 units.
  • rounded-full: This sets the border radius of the element to 50%.
  • overflow-hidden: This hides any content that overflows the element.
  • w-full: This sets the width of the element to 100%.
  • h-full: This sets the height of the element to 100%.
  • object-cover: This scales the image to cover the container and maintain its aspect ratio.
  • ml-4: This adds a margin of 4 units to the left of the element.
  • text-lg: This sets the font size of the element to large.
  • font-medium: This sets the font weight of the element to medium.
  • text-gray-900: This sets the text color of the element to dark gray.
  • text-sm: This sets the font size of the element to small.
  • text-gray-500: This sets the text color of the element to light gray.

You can adjust these classes to match your design requirements.

Conclusion

In this article, we have learned how to build an Avatar with username UI component using Tailwind CSS. We have seen how Tailwind CSS can simplify the process of creating complex UI components by providing a set of pre-defined classes that you can use to style your HTML elements. We have also seen how to customize the styles to match your design requirements. With this knowledge, you can create beautiful and functional UI components for your web projects.