Home
Maxim
Status bar

Status bar

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

Notification Progress Bar

Author Maxim

985

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

Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

3 years ago

10.6k
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

11.3k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1k
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

11 months ago

971
Promotional notification
sticky bottom promotional banner

Author:
Laurits

3 years ago

10.1k
Icon Notification Badge with Count

Author:
Arya

3 years ago

14.4k
Simple progress bar component

Author:
Prajwal Hallale

2 years ago

7.6k
Animated Notification

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.7k
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.9k
Toast
mensajes de alerta a los visitantes de su sitio web.

Author:
Code huit

2 years ago

15.9k
Snackbar with button
Show and close snackbar on button click with default timeout

Author:
Amit Pachange

2 years ago

10.7k
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.

Author:
Ayyamperumal S

11 months ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components