Published on

The 5 Really Obvious Ways To Make A User Avatar with presence indicator With Tailwind CSS Better That You Ever Did

Tags
Widget
User Avatar with presence indicator

As a FrontEnd technology blogger, it is always exciting to explore new UI components and design trends. In this article, we will discuss how to create a User Avatar with presence indicator UI component using Tailwind CSS. We will cover the benefits of using Tailwind CSS, the description of the UI component, the preview, and the source code. So, let's dive in!

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to style your HTML elements. It is designed to speed up the development process by eliminating the need to write custom CSS code. Tailwind CSS allows you to create complex UI components quickly and efficiently.

The description of User Avatar with presence indicator ui component

A User Avatar with presence indicator UI component is a small visual representation of a user's profile picture with an indicator that shows the user's availability status. This component is commonly used in messaging applications, social media platforms, and online collaboration tools.

Why use Tailwind CSS to create a User Avatar with presence indicator ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to style the User Avatar with presence indicator UI component quickly and efficiently. With Tailwind CSS, you can create a responsive UI component that looks great on all devices without writing custom CSS code. Tailwind CSS also allows you to customize the UI component's color, size, and shape easily.

The preview of User Avatar with presence indicator ui component

To create a User Avatar with presence indicator UI component, we will use Tailwind CSS classes to style the component. The preview of the UI component is shown below.

Free download of the User Avatar with presence indicator's source code

The source code of User Avatar with presence indicator ui component

The source code of the User Avatar with presence indicator UI component is shown below.

<div class="bg-gray-200 flex justify-center items-center relative rounded-full">
  <!-- Heroicon `user` -->
  <svg class="w-9 h-9 m-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <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" />
  </svg>

  <!-- active -->
  <span class="w-4 h-4 bg-green-500 absolute bottom-0 right-0 rounded-full"></span>
  <!-- sleep -->
  <!-- <span class="w-4 h-4 bg-yellow-500 absolute bottom-0 right-0 rounded-full"></span> -->
  <!-- away -->
  <!-- <span class="w-4 h-4 bg-red-500 absolute bottom-0 right-0 rounded-full"></span> -->
</div>

How to create a User Avatar with presence indicator with Tailwind CSS?

To create a User Avatar with presence indicator UI component, follow the steps below.

Step 1: Create the HTML structure

The HTML structure for the User Avatar with presence indicator UI component is straightforward. It consists of an image tag and a span tag that displays the presence indicator. The HTML code is shown below.

<div class="user-avatar">
  <img src="avatar.png" alt="User Avatar" class="rounded-full w-12 h-12">
  <span class="presence-indicator"></span>
</div>

Step 2: Style the User Avatar

We will use Tailwind CSS classes to style the User Avatar. The rounded-full class will make the image circular, and the w-12 and h-12 classes will set the width and height of the image to 12rem. The CSS code is shown below.

.user-avatar img {
  border: 2px solid white;
}

.user-avatar .presence-indicator {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: green;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 2px solid white;
}

Step 3: Style the Presence Indicator

We will use the position property to position the presence indicator at the bottom right corner of the User Avatar. The background-color property will set the color of the presence indicator to green. The CSS code is shown below.

.user-avatar .presence-indicator {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: green;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 2px solid white;
}

Step 4: Add the Online Status

To show the user's online status, we will add a class to the presence indicator based on the user's availability. The bg-green-500 class will be added when the user is online, and the bg-gray-500 class will be added when the user is offline. The CSS code is shown below.

.user-avatar .presence-indicator.online {
  background-color: #68d391;
}

.user-avatar .presence-indicator.offline {
  background-color: #a0aec0;
}

Step 5: Add Interactivity

To make the User Avatar with presence indicator UI component interactive, we will add JavaScript code that toggles the online and offline status when the user clicks on the presence indicator. The JavaScript code is shown below.

const presenceIndicator = document.querySelector('.presence-indicator');

presenceIndicator.addEventListener('click', () => {
  presenceIndicator.classList.toggle('online');
  presenceIndicator.classList.toggle('offline');
});

Conclusion

In this article, we discussed how to create a User Avatar with presence indicator UI component using Tailwind CSS. We covered the benefits of using Tailwind CSS, the description of the UI component, the preview, and the source code. We hope this article helps you create beautiful and interactive UI components for your web applications.