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

595

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

Subcribe Card - Alert - Notification

Author:
ABDO-SY

5 months ago

415
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

2 years ago

12.6k
Notification - Htmlwind
Simple notification

Author:
Htmlwind

2 months ago

170
progress-bar with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.7k
Progress Bar
Simple Progress bar

Author:
anjali pandith

1 year ago

5.4k
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

6 months ago

1.1k
Progress bars

Author:
Sophia Baker

2 years ago

10.3k
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

9 months ago

1.3k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

2 months ago

478
Closable toast message
show notification toast message at the bottom right corner

Author:
Prajwal Hallale

2 years ago

7.9k
progress bar

Author:
Md. Tofayel islam

7 months ago

766
Cookie consent dialog box

Author:
Leif99

2 years ago

14k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components