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

144

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

Notification alert section
Show info, success, or error messages

Author:
Arya

2 years ago

9.7k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

10.1k
Product hunt showcase

Author:
Lukas Müller

2 years ago

11.6k
Toast Notification

Author:
Anonymous

3 weeks ago

78
Simple progress bar component

Author:
Prajwal Hallale

1 year ago

7k
Responsive Progress Bar
This progress bar visually represents proficiency in Web Design, showing an 85% skill level. The text labels above indicate the skill area on the left and the percentage on the right for easy interpretation.

Author:
Anum Shahana

3 months ago

614
Progress bars

Author:
Sophia Baker

2 years ago

9.7k
Animated Notification

Author:
Samuel Abera

1 month ago

423
progress bar

Author:
Md. Tofayel islam

1 month ago

274
Toast
Fully Responsive Toast

Author:
AKASH GANDHAR

6 months ago

1.4k
Progress Bar
A progress bar is a UI element that visually represents the completion status of a task or process. It helps users understand how much of a task has been completed and how much remains. Commonly used in forms, file uploads, loading screens, or multi-step processes, it enhances the user experience by providing clear feedback.

Author:
Abhiraj

1 month ago

307
Toast
mensajes de alerta a los visitantes de su sitio web.

Author:
Code huit

1 year ago

13.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components