In this tutorial, we’ll look at how to use the card Notifications Box. When you click on it, it will close using Tailwind CSS along with Alpine.js.
Build a Tailwind CSS notification with Alpine.js that displays success messages, along with a close arrow SVG icon button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS + Alpine.js Close Notifications Box</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="{ open: true }" x-show="open"
class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-md mb-4">
<div class="flex justify-between">
<div class="flex items-center">
<div class="ml-3">
<p class="text-sm leading-5 font-medium">Success!</p>
<p class="mt-1 text-sm leading-5 text-green-500">Your changes have been saved.</p>
</div>
</div>
<button @click="open = false" class="text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</body>
</html>
Make error message and information notification boxes using Alpine.js and Tailwind CSS.
<div x-data="{ open: true }" x-show="open"
class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md mb-4">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0-9a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-sm leading-5 font-medium">Error!</p>
<p class="mt-1 text-sm leading-5 text-red-500">An error occurred. Please try again later.</p>
</div>
</div>
<button @click="open = false" class="text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div x-data="{ open: true }" x-show="open"
class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded-md mb-4">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm1-9a1 1 0 0 1 0 2H9a1 1 0 1 1 0-2h2zm0 4a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h2z"
clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-sm leading-5 font-medium">Information</p>
<p class="mt-1 text-sm leading-5 text-blue-500">Please remember to save your changes.</p>
</div>
</div>
<button @click="open = false" class="text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
Utilize setTimeout to automatically close the notification in Tailwind CSS and Alpine.js after 3 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS + Alpine.js Close Notifications Box</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="{ open: true }" x-init="setTimeout(() => { open = false; }, 3000)" x-show="open"
class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-md mb-4">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 text-green-500">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm leading-5 font-medium">Success!</p>
<p class="mt-1 text-sm leading-5 text-green-500">Your changes have been saved.</p>
</div>
</div>
<button @click="open = false" class="text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</body>
</html>