divtoastintermediate

Info Toast

A floating toast notification with an info icon, positioned at the bottom of the screen.

Preview

Your profile has been updated.

<div class="fixed bottom-6 right-6 z-50 flex items-center gap-3 px-5 py-3 bg-gray-900 text-white rounded-xl shadow-2xl max-w-sm">
  <svg class="w-5 h-5 text-blue-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><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="text-sm">Your profile has been updated.</p>
  <button class="text-gray-400 hover:text-white ml-auto flex-shrink-0">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
  </button>
</div>

Color Breakdown

Background

bg-gray-900

#111827

Text

text-white

#ffffff

Info Icon

text-blue-400

#60a5fa

Dismiss Icon

text-gray-400

#9ca3af

Use Cases

Action confirmationsSystem updatesNon-blocking notifications

Browser Support

All modern browsers.

Related Recipes

Floating Action Button

button - beginner

Notification Card

card - beginner

Notification Dot

span - beginner

Success Alert

div - beginner

Error Alert

div - beginner

Warning Alert

div - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I make the toast slide in?▼
Add translate-y-full opacity-0 by default, then animate to translate-y-0 opacity-100 when shown, using transition-all duration-300.
How do I stack multiple toasts?▼
Use a container with flex-col-reverse gap-3 and append new toasts to it.