Home
Bruz
Quiting

Quiting

This tailwind example is contributed by Bruz, on 15-Sep-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Mockup

Author Bruz

392

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Terminal - Never Again</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes blink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        .animate-blink {
            animation: blink 1s infinite;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .fade-in {
            animation: fadeIn 0.3s forwards;
        }
        @keyframes fadeToBlack {
            0% { 
                background-color: rgb(17, 24, 39);
                opacity: 1;
            }
            70% {
                background-color: rgb(17, 24, 39);
                opacity: 1;
            }
            100% { 
                background-color: rgb(0, 0, 0);
                opacity: 1;
            }
        }
        .fade-to-black {
            animation: fadeToBlack 2s forwards;
        }
        @keyframes shutDown {
            0% { opacity: 1; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
        .shut-down {
            animation: shutDown 2s forwards;
        }
        @keyframes letterPop {
            0% {
                opacity: 0;
                transform: scale(0.3) translateY(50px);
            }
            50% {
                transform: scale(1.2) translateY(-10px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        .letter-pop {
            display: inline-block;
            animation: letterPop 0.6s forwards;
        }
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
        }
        #terminal-body {
            scrollbar-width: thin;
            scrollbar-color: #4a5568 #1a202c;
        }
    </style>
</head>
<body>
    <div class="flex flex-col h-screen bg-gray-900 text-gray-200 font-mono" id="main-terminal">
        
        <div class="flex items-center h-10 px-4 bg-gray-800 border-b border-gray-700" id="top-bar">
            <div class="flex items-center space-x-2">
                <div class="h-3 w-3 rounded-full bg-red-500 hover:bg-red-600 transition-colors cursor-pointer"></div>
                <div class="h-3 w-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors cursor-pointer"></div>
                <div class="h-3 w-3 rounded-full bg-green-500 hover:bg-green-600 transition-colors cursor-pointer"></div>
            </div>
            <div class="flex-1 text-center text-sm text-gray-400">
                Terminal - goose@never-again
            </div>
        </div>
        
        
        <div class="flex-1 p-4 overflow-auto" id="terminal-body">
            
        </div>
        
        
        <div class="h-6 px-4 bg-gray-800 border-t border-gray-700 flex items-center justify-between text-xs text-gray-500" id="status-bar">
            <span>bash 5.2.15</span>
            <span>UTF-8</span>
            <span>80x24</span>
        </div>
    </div>

Related Examples

Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

9 months ago

607
iPhone 15 Mockup
The "Screen Content" div can be manipulated to have anything inside the screen.

Author:
Coastal UI

1 year ago

1.6k
Mac terminal mockup

Author:
Sean Gantly

1 year ago

1.4k
Credit card mockup

Author:
Kofi Osei

2 years ago

12.9k
COMPLETE SYSTEM FAILURE

Author:
Bruz

4 months ago

556
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

9 months ago

1.1k
Safari mockup Browser page
This component is a mockup of a Safari browser window, featuring a realistic and responsive design created with Tailwind CSS. It includes the following elements: Tab Bar: Positioned at the top of the window, the tab bar showcases an active tab with a favicon and a title. The active tab is highlighted with a background color and border for clarity. Toolbar: Below the tab bar, the toolbar mimics the Safari browser's functionality with close, minimize, and maximize buttons. It also features an address bar pre-filled with a URL, styled for a polished look. Navigation Buttons: The toolbar contains navigation buttons designed with SVG icons to represent back, forward, and other standard browser actions. Content Area: The main section of the browser window, styled to display content within the mockup. It includes a heading and a description to illustrate the use of the component.

Author:
Mahmoud Abdelaziz Salama

1 year ago

1.3k
Tablet device mockup

Author:
Prajwal Hallale

3 years ago

8.9k
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

1 year ago

2.4k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

1 year ago

1.9k
Mac terminal mockup

Author:
Manon Daniel

2 years ago

10.9k
Mobile device mockup
Smartphone (with punch hole notch) mockup in tailwind

Author:
Prajwal Hallale

2 years ago

9.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components