Back to Discover
Tailwind CSS Alert Notification Examples

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="text-center mb-12">
      <h1 class="text-3xl font-bold text-gray-900 mb-2">Alert Notification Examples</h1>
      <p class="text-gray-600">Diverse designs with Tailwind CSS, Alpine.js & Ionicons</p>
    </div>

    <!-- Style 1: Solid Background with Icon -->
    <div x-data="{ show: true }" x-show="show" x-transition class="bg-green-500 rounded-lg p-4 flex items-center gap-3 shadow-md">
      <div class="bg-white rounded-full p-2">
        <ion-icon name="checkmark-circle" class="text-green-500 text-2xl"></ion-icon>
      </div>
      <div class="flex-1">
        <p class="text-white font-medium">Your profile has been updated successfully!</p>
      </div>
      <button @click="show = false" class="text-white hover:text-green-100 transition">
        <ion-icon name="close" class="text-2xl"></ion-icon>
      </button>
    </div>

    <!-- Style 2: Left Border Accent -->
    <div x-data="{ show: true }" x-show="show" x-transition class="bg-white border-l-4 border-red-500 rounded-r-lg shadow-lg p-5">
      <div class="flex items-start gap-4">
        <div class="bg-red-100 rounded-lg p-3">
          <ion-icon name="alert-circle" class="text-red-600 text-3xl"></ion-icon>
        </div>
        <div class="flex-1">
          <h3 class="text-gray-900 font-bold text-lg mb-1">Authentication Error</h3>
          <p class="text-gray-600">Invalid credentials. Please check your username and password.</p>
        </div>
        <button @click="show = false" class="text-gray-400 hover:text-gray-600 transition">
          <ion-icon name="close-circle" class="text-2xl"></ion-icon>
        </button>
      </div>
    </div>

    <!-- Style 3: Gradient with Shadow -->
    <div x-data="{ show: true }" x-show="show" x-transition class="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-xl p-1 shadow-xl">
      <div class="bg-white rounded-lg p-4 flex items-center gap-3">
        <ion-icon name="warning" class="text-orange-500 text-3xl"></ion-icon>
        <div class="flex-1">
          <h4 class="font-semibold text-gray-900">Storage Almost Full</h4>
          <p class="text-gray-600 text-sm">You've used 95% of your storage space.</p>
        </div>
        <button @click="show = false" class="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm font-medium hover:bg-orange-600 transition">
          Upgrade
        </button>
      </div>
    </div>

    <!-- Style 4: Minimal with Top Border -->
    <div x-data="{ show: true }" x-show="show" x-transition class="border-t-4 border-blue-500 bg-white rounded-b-lg shadow-md p-4">
      <div class="flex gap-3">
        <ion-icon name="information-circle-outline" class="text-blue-500 text-4xl flex-shrink-0"></ion-icon>
        <div class="flex-1">
          <p class="text-gray-800 font-medium mb-2">New Feature Available</p>
          <p class="text-gray-600 text-sm mb-3">We've added dark mode to improve your experience. Try it now in settings.</p>
          <button class="text-blue-600 font-medium text-sm hover:text-blue-700 transition">
            Learn More →
          </button>
        </div>
        <button @click="show = false" class="text-gray-400 hover:text-gray-600 h-fit">
          <ion-icon name="close" class="text-xl"></ion-icon>
        </button>
      </div>
    </div>

    <!-- Style 5: Outlined with Badge -->
    <div x-data="{ show: true }" x-show="show" x-transition class="border-2 border-purple-300 bg-purple-50 rounded-2xl p-5">
      <div class="flex items-start gap-4">
        <div class="relative">
          <ion-icon name="notifications" class="text-purple-600 text-4xl"></ion-icon>
          <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-bold">3</span>
        </div>
        <div class="flex-1">
          <h3 class="text-purple-900 font-bold mb-1">You have new notifications</h3>
          <p class="text-purple-700 text-sm">3 team members mentioned you in recent comments.</p>
        </div>
        <button @click="show = false" class="text-purple-400 hover:text-purple-600">
          <ion-icon name="close-outline" class="text-2xl"></ion-icon>
        </button>
      </div>
    </div>

    <!-- Style 6: Card with Icon Badge -->
    <div x-data="{ show: true }" x-show="show" x-transition class="bg-white rounded-xl shadow-lg overflow-hidden">
      <div class="flex">
        <div class="bg-indigo-600 w-2"></div>
        <div class="flex-1 p-5">
          <div class="flex items-start gap-4">
            <div class="bg-indigo-100 rounded-full p-3">
              <ion-icon name="cloud-upload" class="text-indigo-600 text-2xl"></ion-icon>
            </div>
            <div class="flex-1">
              <div class="flex items-center gap-2 mb-1">
                <h3 class="text-gray-900 font-semibold">Upload Complete</h3>
                <span class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full font-medium">Success</span>
              </div>
              <p class="text-gray-600 text-sm">Your files have been uploaded to the cloud storage.</p>
            </div>
            <button @click="show = false" class="text-gray-400 hover:text-gray-600">
              <ion-icon name="close" class="text-xl"></ion-icon>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Style 7: Compact Inline -->
    <div x-data="{ show: true }" x-show="show" x-transition class="bg-gray-900 text-white rounded-full px-5 py-3 shadow-lg flex items-center gap-3 max-w-md">
      <ion-icon name="checkmark-done" class="text-green-400 text-xl"></ion-icon>
      <p class="text-sm flex-1">Changes saved automatically</p>
      <button @click="show = false" class="text-gray-400 hover:text-white transition">
        <ion-icon name="close" class="text-lg"></ion-icon>
      </button>
    </div>

    <!-- Style 8: Split Design with Action -->
    <div x-data="{ show: true }" x-show="show" x-transition class="bg-white rounded-lg shadow-xl overflow-hidden flex">
      <div class="bg-teal-500 flex items-center justify-center p-6">
        <ion-icon name="gift" class="text-white text-5xl"></ion-icon>
      </div>
      <div class="flex-1 p-5">
        <h3 class="text-gray-900 font-bold text-lg mb-1">Exclusive Offer!</h3>
        <p class="text-gray-600 text-sm mb-4">Get 30% off on your next purchase. Use code: SAVE30</p>
        <div class="flex gap-2">
          <button class="px-4 py-2 bg-teal-500 text-white rounded-md text-sm font-medium hover:bg-teal-600 transition">
            Copy Code
          </button>
          <button @click="show = false" class="px-4 py-2 text-gray-600 text-sm hover:bg-gray-100 rounded-md transition">
            Maybe Later
          </button>
        </div>
      </div>
      <button @click="show = false" class="p-3 text-gray-400 hover:text-gray-600 h-fit">
        <ion-icon name="close" class="text-xl"></ion-icon>
      </button>
    </div>

    <!-- Toast Notification Demo -->
    <div class="fixed bottom-6 right-6 space-y-3 z-50" x-data="{ toasts: [] }">
      <button @click="toasts.push({ id: Date.now(), type: 'success', message: 'Toast notification appeared!' }); setTimeout(() => toasts.shift(), 4000)" 
              class="px-6 py-3 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition shadow-lg">
        Show Toast
      </button>

      <template x-for="toast in toasts" :key="toast.id">
        <div x-show="true" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform translate-x-8"
             x-transition:enter-end="opacity-100 transform translate-x-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="bg-gray-800 text-white rounded-lg shadow-2xl p-4 flex items-center gap-3 min-w-[320px]">
          <div class="bg-green-500 rounded-full p-2">
            <ion-icon name="checkmark" class="text-white text-lg"></ion-icon>
          </div>
          <p class="text-sm flex-1 font-medium" x-text="toast.message"></p>
          <button @click="toasts = toasts.filter(t => t.id !== toast.id)" class="text-gray-400 hover:text-white transition">
            <ion-icon name="close" class="text-xl"></ion-icon>
          </button>
        </div>
      </template>
    </div>
  </div>
Comments (0)

No comments yet. Be the first!