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 focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Facebook Notification ui component

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

  • It can make the building process of Facebook Notification ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Facebook Notification component file.

The preview of Facebook Notification ui component

Free download of the Facebook Notification's source code

The source code of Facebook Notification ui component

<!-- 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?

Install tailwind css of verion 1.4.6

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.4.6

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to create a Facebook Notification component

  • bg-white
  • mt-40
  • px-4
  • py-3
  • max-w-xs
  • flex
  • text-sm
  • bg-gray-200
  • p-2
  • h-3
  • w-3
  • mt-3
  • hover:bg-gray-100
  • px-1
  • py-1
  • flex-shrink-0
  • h-16
  • w-16
  • w-6
  • h-6
  • -ml-5
  • ml-3
  • text-blue
  • h-4
  • w-4

25 steps to create a Facebook Notification component with Tailwind CSS

  1. Control the background color of an element to white using the bg-white utilities.

  2. Control the margin on top side of an element to 10rem using the mt-40 utilities.

  3. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  4. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  5. Set the maximum width/height of an element using the max-w-xs utilities.

  6. Use flex to create a block-level flex container.

  7. Control the text color of an element to sm using the text-sm utilities.

  8. Control the background color of an element to gray-200 using the bg-gray-200 utilities.

  9. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  10. Use h-3 to set an element to a fixed height(0.75rem).

  11. Use w-3 to set an element to a fixed width(0.75rem).

  12. Control the margin on top side of an element to 0.75rem using the mt-3 utilities.

  13. Control the background color of an element to gray-100 using the hover:bg-gray-100 utilities on hover.

  14. Control the horizontal padding of an element to 0.25rem using the px-1 utilities.

  15. Control the vertical padding of an element to 0.25rem using the py-1 utilities.

  16. Use flex to create a block-level flex container.

  17. Use h-16 to set an element to a fixed height(4rem).

  18. Use w-16 to set an element to a fixed width(4rem).

  19. Use w-6 to set an element to a fixed width(1.5rem).

  20. Use h-6 to set an element to a fixed height(1.5rem).

  21. Control the margin on left side of an element to -1.25rem using the -ml-5 utilities.

  22. Control the margin on left side of an element to 0.75rem using the ml-3 utilities.

  23. Control the text color of an element to blue using the text-blue utilities.

  24. Use h-4 to set an element to a fixed height(1rem).

  25. Use w-4 to set an element to a fixed width(1rem).

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to create a Facebook Notification components, learn and follow along to implement your own components.