Building a Tailwind CSS alert component

Tailwind CSS is an awesome utility-first framework that you can use to quickly prototype and build user interfaces.

One of the disadvantages compared to other frameworks like Bootstrap or Bulma is that you don't get a default set of UI components to get started.

Today I want to start a series of articles on how to build commonly used web components, such as alerts, button, dropdowns, and many more.

I will start with the alert component.

Tailwind CSS alert component

First things first, we need to build the basic HTML markup to which we will later add the styles:

<div>
  <p>
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>

A div and a paragraph element inside it will suffice. Let's now add some styles for the main block element. I'll choose a nice blue background color:

<div class="flex bg-blue-100 rounded-lg p-4 mb-4">
  <p>
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>

Already looking better! Let's also add some styles to the paragraph element:

<div class="flex bg-blue-100 rounded-lg p-4 mb-4">
  <p class="ml-3 text-sm text-blue-700">
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>

Awesome! I think an icon would look really great as well.

<div class="flex bg-blue-100 rounded-lg p-4 mb-4">
  <svg class="w-5 h-5 text-blue-700" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
  <p class="ml-3 text-sm text-blue-700">
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>

Final result:

That's it! You can use this same alert for success and danger messages as well by changing the color from blue to green or red and also by changing the text and icon.

Tailwind CSS Components Library - Flowbite

This Tailwind alert component is part of a larger Tailwind CSS components library that I helped develop. It is open source under the MIT license and it is also published on Github and NPM.

Learn more about Flowbite, a Tailwind CSS components library by following the quickstart guide.