Status bar

This tailwind example is contributed by Maxim, on 04-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Toast, Snackbar

Notification Progress Bar

Author Maxim

Tailwind v3.4 1.5k 3

Fork Fullscreen

<div
    class="fixed bottom-0 left-0 w-full md:max-w-[50%] z-[9999] bg-gray-900/85 text-white py-2 px-3 backdrop-blur-sm border-t md:border-r border-gray-700 md:rounded-tr-lg text-xs font-golostext">
    <div class="flex flex-col gap-2">
        
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
            <span class="font-medium truncate max-w-full sm:max-w-[200px] group relative" title="LQRS - Your Global Alcohol Guide — Spirits, Wine, Beer">
                LQRS - Your Global Alcohol Guide — Spirits, Wine, Beer                <div class="hidden group-hover:block absolute bottom-full left-0 mb-1 p-1.5 bg-gray-800 rounded whitespace-nowrap z-10">
                    /                </div>
            </span>

<div class="flex flex-wrap gap-1">
                <a href=""
                    class="flex-1 sm:flex-none inline-flex items-center justify-center px-2 py-1 bg-blue-600 hover:bg-blue-700 rounded transition-colors duration-200">
                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    Edit
                </a>

<button onclick="confirmDelete()"
                        class="flex-1 sm:flex-none inline-flex items-center justify-center px-2 py-1 bg-red-600 hover:bg-red-700 rounded transition-colors duration-200">
                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                    Delete
                </button>
            </div>
        </div>

<div class="flex flex-wrap items-center gap-2 sm:gap-3 text-gray-300">
            <span class="inline-flex items-center">
                ID: <span class="ml-1 text-white">1</span>
            </span>
            <span class="inline-flex items-center">
                Template: <span class="ml-1 text-white">home</span>
            </span>
            <span class="inline-flex items-center">
                <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
            Published </span>
            <span class="inline-flex items-center">
                Parent: <span class="ml-1 text-white truncate max-w-[100px] sm:max-w-none"></span>
            </span>
        </div>

<div class="flex flex-wrap items-center gap-2 sm:gap-3 text-gray-400">
            <span class="inline-flex items-center group relative" title="Children">
                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
                37            </span>
            <span class="inline-flex items-center group relative" title="Modified/Created">
                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span>2025-01-02 11:47</span>
            <div
                class="hidden group-hover:block absolute bottom-full left-0 mb-1 p-1.5 bg-gray-800 rounded whitespace-nowrap z-10">
                Created: 2024-01-16 </div>
            </span>
        </div>
    </div>
</div>

Related Examples

Responsive Progress bars

Anum Shahana

1 year ago

1.9k
Icon Notification Badge with Count

Anonymous

3 months ago

229
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Ayyamperumal S

1 year ago

2.6k
Progress bars

Sophia Baker

3 years ago

11.4k
Personal Portfolio Website
Nziza HAMZY 😎! Reka dukore full TailwindCSS Portfolio yuzuye na: Hero Section About Section Projects Section (cards) Contact Form Animations & hover effects Fully responsive for mobile

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Bonimater

1 year ago

1.3k
chat bar
live chat

gidy

1 year ago

2.2k
progress-bar with Tailwind CSS and Alpinejs

Quêmia

2 years ago

2.4k
Animated Notification

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2k
Notification Badge

Mr Robot

4 years ago

10.9k
progress-bar with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.7k
Simple progress bar component

Prajwal Hallale

3 years ago

7.8k