Published on

Ways To Create A Notification With Tailwind CSS In 60 Minutes

Tags
CardsWidget
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 Notification ui component

Simple notification component

Why use Tailwind CSS to make a Notification ui component?

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

The preview of Notification ui component

Free download of the Notification's source code

The source code of Notification ui component

<!-- This is an example component -->
<style>
	@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

	* {
		font-family: 'Open Sans', sans-serif;
	}
</style>

<div class='flex items-center justify-center min-h-screen bg-gray-200'>
	<div
		class="bg-white border border-slate-300 w-max h-20 shadow-lg rounded-md gap-4 p-4 flex flex-row items-center justify-center">
		<section class="w-6 h-full flex flex-col items-center justify-start">
			<svg width="100%" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path
					d="M7.5 13.25C10.9518 13.25 13.75 10.4518 13.75 7C13.75 3.54822 10.9518 0.75 7.5 0.75C4.04822 0.75 1.25 3.54822 1.25 7C1.25 10.4518 4.04822 13.25 7.5 13.25Z"
					stroke="#21ce8f" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
				<path
					d="M4.3269 7.96143C4.80767 9.69219 6.73075 10.7499 8.46152 10.2691C9.51921 9.8845 10.3846 9.01912 10.6731 7.96143"
					stroke="#21ce8f" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
				<path
					d="M10.0481 5.55767C9.91536 5.55767 9.80774 5.45005 9.80774 5.31729C9.80774 5.18453 9.91536 5.0769 10.0481 5.0769"
					stroke="#21ce8f" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
				<path
					d="M10.0481 5.5577C10.1809 5.5577 10.2885 5.45008 10.2885 5.31732C10.2885 5.18456 10.1809 5.07693 10.0481 5.07693"
					stroke="#21ce8f" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
				<path
					d="M4.95193 5.55767C4.81917 5.55767 4.71155 5.45005 4.71155 5.31729C4.71155 5.18453 4.81917 5.0769 4.95193 5.0769"
					stroke="#21ce8f" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
				<path
					d="M4.95197 5.5577C5.08473 5.5577 5.19235 5.45008 5.19235 5.31732C5.19235 5.18456 5.08473 5.07693 4.95197 5.07693"
					stroke="#21ce8f" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
			</svg>
		</section>
		<section class="h-full flex flex-col items-start justify-end gap-1">
			<h1 class="text-base font-semibold text-zinc-800 antialiased">Successfully saved!</h1>
			<p class="text-sm font-medium text-zinc-400 antialiased">Anyone with a link can now view this file</p>
		</section>
		<section class="w-5 h-full flex flex-col items-center justify-start">
			<svg width="100%" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="cursor-pointer">
				<path
					d="M4.06585 3.00507C3.77296 2.71218 3.29809 2.71218 3.00519 3.00507C2.7123 3.29796 2.7123 3.77284 3.00519 4.06573L4.06585 3.00507ZM10.0763 11.1368C10.3692 11.4297 10.844 11.4297 11.1369 11.1368C11.4298 10.8439 11.4298 10.369 11.1369 10.0761L10.0763 11.1368ZM3.00519 4.06573L10.0763 11.1368L11.1369 10.0761L4.06585 3.00507L3.00519 4.06573Z"
					fill="#989fac" />
				<path
					d="M11.1369 4.06573C11.4298 3.77284 11.4298 3.29796 11.1369 3.00507C10.844 2.71218 10.3691 2.71218 10.0762 3.00507L11.1369 4.06573ZM3.00517 10.0761C2.71228 10.369 2.71228 10.8439 3.00517 11.1368C3.29806 11.4297 3.77294 11.4297 4.06583 11.1368L3.00517 10.0761ZM10.0762 3.00507L3.00517 10.0761L4.06583 11.1368L11.1369 4.06573L10.0762 3.00507Z"
					fill="#989fac" />
			</svg>
		</section>
	</div>
</div>

How to make a Notification with Tailwind CSS?

Install tailwind css of verion 3.0.18

Use the script html tag to import the script of Tailwind CSS of the version 3.0.18

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to make a Notification component

  • bg-white
  • border-slate-300
  • w-max
  • h-20
  • gap-4
  • p-4
  • flex
  • flex-row
  • w-6
  • h-full
  • flex-col
  • justify-start
  • gap-1
  • text-base
  • text-zinc-800
  • text-sm
  • text-zinc-400
  • w-5

18 steps to make a Notification component with Tailwind CSS

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

  2. Control the border color of an element to slate-300 using the border-slate-300 utilities.

  3. Use w-max to set an element to a fixed width(max).

  4. Use h-20 to set an element to a fixed height(5rem).

  5. To specify the width between columns, you can use the gap-4 utilities.

  6. Control the padding on all sides of an element to 1rem using the p-4 utilities.

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

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

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

  10. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

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

  12. Use justify-start to justify items against the start of the container’s main axis.

  13. To specify the width between columns, you can use the gap-1 utilities.

  14. Control the text color of an element to base using the text-base utilities.

  15. Control the text color of an element to zinc-800 using the text-zinc-800 utilities.

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

  17. Control the text color of an element to zinc-400 using the text-zinc-400 utilities.

  18. Use w-5 to set an element to a fixed width(1.25rem).

Conclusion

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