Published on

Advanced Guide: Create A Facebook Notification With Tailwind CSS

Tags
Widget
Facebook Notification

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly and easily create custom designs without writing any CSS. It provides a set of pre-defined classes that can be used to style HTML elements. With Tailwind CSS, you can create complex designs with minimal effort.

The description of Facebook Notification UI component

Facebook Notification is a UI component that displays notifications to users when they receive new messages, friend requests, or other updates. It typically appears as a small red circle with a number inside, located in the top right corner of the screen. When clicked, a dropdown menu appears, displaying the notifications.

Why use Tailwind CSS to create a Facebook Notification UI component?

Tailwind CSS provides a fast and efficient way to create custom designs. With its pre-defined classes, you can quickly style HTML elements without having to write any CSS. This saves time and effort, allowing you to focus on the functionality of your application. Additionally, Tailwind CSS is highly customizable, allowing you to create unique designs that match your brand.

The preview of Facebook Notification UI component

To create a Facebook Notification UI component with Tailwind CSS, we will use a combination of HTML and CSS. The HTML will define the structure of the component, while the CSS will provide the styling.

Free download of the Facebook Notification's source code

The source code of Facebook Notification UI component

To create the Facebook Notification UI component, we will use a combination of HTML and CSS. The HTML will define the structure of the component, while the CSS will provide the styling.

<!-- Facebook notification -->
<style>
        .text-blue {
            color: #1876f2;
        }
    </style>
<div class="bg-white mt-40 px-4 py-3 rounded-lg shadow-md max-w-xs">
            <div class="flex items-center justify-between">
                <span class="font-medium text-sm">New Notification</span>
                <button class="bg-gray-200 p-2 rounded-full">
                    <svg class="h-3 w-3 fill-current" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
                </button>
            </div>
            <div class="flex items-center mt-3 hover:bg-gray-100 rounded-lg px-1 py-1 cursor-pointer">
                <div class="flex flex-shrink-0 items-end">
                    <img class="h-16 w-16 rounded-full" src="https://drive.google.com/uc?id=1mNQj7dO9Y_2pe8HEljojHm9iLmt6iHvh">
                    <img class="w-6 h-6 -ml-5" src="https://drive.google.com/uc?id=1jAh9mzCA6TIsDj06NMMxcVjqvwEshlvu" alt="">
                </div>
                <div class="ml-3">
                    <span class="font-medium text-sm">John Doe</span>
                    <p class="text-sm">reacted to your comment: "Comment..."</p>
                    <span class="text-sm text-blue font-semibold">a few seconds ago</span>
                </div>
                <div>
                    <svg viewBox="0 0 8 8" fill="currentColor" class="h-4 w-4 text-blue"><circle cx="4" cy="4" r="3"></circle></svg>
                </div>
            </div>
        </div>

How to create a Facebook Notification with Tailwind CSS?

To create a Facebook Notification with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the following code:
<div class="relative">
  <button class="bg-gray-200 text-gray-600 rounded-full p-2 hover:bg-gray-300 focus:outline-none focus:shadow-outline">
    <svg class="h-6 w-6" viewBox="0 0 24 24">
      <path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm5.2 13.4l-.6.6c-.4.4-1 .4-1.4 0l-2.3-2.3c-.4-.4-.4-1 0-1.4l.6-.6c.4-.4 1-.4 1.4 0l2.3 2.3c.4.4.4 1 0 1.4zm-4.6 2.3c-.6 0-1.1-.2-1.5-.6-.4-.4-.6-.9-.6-1.5v-.8c0-.6.2-1.1.6-1.5.4-.4.9-.6 1.5-.6h.8c.6 0 1.1.2 1.5.6.4.4.6.9.6 1.5v.8c0 .6-.2 1.1-.6 1.5-.4.4-.9.6-1.5.6h-.8z"/>
    </svg>
  </button>
  <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 mr-2 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">
    99+
  </span>
</div>
  1. Add the Tailwind CSS CDN to the head of your HTML file:
<head>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
</head>

  1. Save the file and open it in your browser. You should see a button with a red circle containing the number 99+.

  2. To customize the component, you can modify the classes used in the HTML. For example, you can change the background color of the button by changing the bg-gray-200 class to a different color.

Conclusion

In this article, we learned how to create a Facebook Notification UI component with Tailwind CSS. Tailwind CSS provides a fast and efficient way to create custom designs, allowing developers to focus on the functionality of their applications. With its pre-defined classes and highly customizable nature, Tailwind CSS is a great choice for creating UI components.