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

1.1k

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 Badge

Author:
Mr Robot

3 years ago

10.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

1 year ago

1.6k
Progress bars

Author:
Sophia Baker

3 years ago

10.7k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

1 year ago

1.4k
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

1 year ago

1.7k
Progress spinner

Author:
Md. Tofayel islam

2 years ago

3k
Progress bar

Author:
Rajesh Maheshwari

1 year ago

1.3k
Notification
Dev Community Notification Clone

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

1 year ago

3.3k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

3 years ago

10.9k
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 year ago

1k
Cookie consent dialog box

Author:
Leif99

3 years ago

14.7k
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components