DEV Community

Cover image for Building a Tailwind CSS alert component
Zoltán Szőgyényi for Themesberg

Posted on • Updated on • Originally published at flowbite.com

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Final result:

Tailwind CSS alert component 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.

Top comments (3)

Collapse
 
uithemes profile image
ui-themes

Nice, thanks for sharing!

Collapse
 
sm0ke profile image
Sm0ke

🚀🚀