Tailwind CSS + Alpine.js Close Notifications Box

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>
success notification close

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>
information and error close button

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>
saim ansari
saim ansari

I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack