COMPLETE SYSTEM FAILURE

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

Mockup

Author Bruz

Tailwind v3.4 1.1k 2

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Failure Terminal</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 flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                opacity: 1;
            }
            20%, 24%, 55% {
                opacity: 0.3;
            }
            22% {
                opacity: 0.1;
            }
        }
        .flicker {
            animation: flicker 1.5s infinite;
        }
        @keyframes glitch {
            0%, 100% {
                transform: translate(0);
                filter: hue-rotate(0deg);
            }
            20% {
                transform: translate(-1px, 1px);
                filter: hue-rotate(90deg);
            }
            40% {
                transform: translate(-1px, -1px);
                filter: hue-rotate(180deg);
            }
            60% {
                transform: translate(1px, 1px);
                filter: hue-rotate(270deg);
            }
            80% {
                transform: translate(1px, -1px);
                filter: hue-rotate(360deg);
            }
        }
        .glitch {
            animation: glitch 0.3s infinite;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
            20%, 40%, 60%, 80% { transform: translateX(2px); }
        }
        .shake {
            animation: shake 0.5s;
        }
        @keyframes corrupt {
            0% { content: 'Memory allocation failed'; }
            25% { content: 'M3m0ry @ll0c@t10n f@1l3d'; }
            50% { content: '███ory ████cation ███led'; }
            75% { content: '▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓'; }
            100% { content: '××××××××××××××××××××××××'; }
        }
        .corrupted::after {
            animation: corrupt 2s forwards;
            content: 'Memory allocation failed';
        }
        @keyframes fadeToRed {
            from { background-color: rgb(17, 24, 39); }
            to { background-color: rgb(20, 0, 0); }
        }
        .fade-to-red {
            animation: fadeToRed 3s forwards;
        }
        @keyframes staticNoise {
            0% { background-position: 0 0; }
            100% { background-position: 100% 100%; }
        }
        .static-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                repeating-linear-gradient(
                    0deg,
                    rgba(255, 255, 255, 0.03) 0px,
                    transparent 1px,
                    transparent 2px,
                    rgba(255, 255, 255, 0.03) 3px
                );
            pointer-events: none;
            opacity: 0;
            z-index: 1000;
        }
        .show-static {
            animation: staticNoise 0.1s infinite linear;
            opacity: 1;
        }
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #terminal-body {
            scrollbar-width: thin;
            scrollbar-color: #4a5568 #1a202c;
        }
        .text-glitch {
            position: relative;
            color: #ff0000;
            font-weight: bold;
        }
        .text-glitch::before,
        .text-glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .text-glitch::before {
            animation: glitch-1 0.2s infinite;
            color: #00ffff;
            z-index: -1;
        }
        .text-glitch::after {
            animation: glitch-2 0.2s infinite;
            color: #ff00ff;
            z-index: -2;
        }
        @keyframes glitch-1 {
            0%, 100% {
                clip: rect(42px, 9999px, 44px, 0);
                transform: skew(0.5deg);
            }
            50% {
                clip: rect(20px, 9999px, 30px, 0);
                transform: skew(0.8deg);
            }
        }
        @keyframes glitch-2 {
            0%, 100% {
                clip: rect(25px, 9999px, 35px, 0);
                transform: skew(0.8deg);
            }
            50% {
                clip: rect(65px, 9999px, 99px, 0);
                transform: skew(0.2deg);
            }
        }
    </style>
</head>
<body>
    <div class="static-overlay" id="static"></div>
    <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" id="red-btn"></div>
                <div class="h-3 w-3 rounded-full bg-yellow-500" id="yellow-btn"></div>
                <div class="h-3 w-3 rounded-full bg-green-500" id="green-btn"></div>
            </div>
            <div class="flex-1 text-center text-sm text-gray-400" id="title-bar">
                Terminal - goose@freaking-out
            </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 id="status-middle">SYSTEM STABLE</span>
            <span id="status-right">CPU: 12% MEM: 2.1GB</span>
        </div>
    </div>

Related Examples

LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

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

Prajwal Hallale

3 years ago

9.4k
Hero donate
the donation hero

Uwera Dorcas

1 year ago

888
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.7k
Active Beauty Main Page

Maxim

1 year ago

1.8k
Credit card mockup

Kofi Osei

3 years ago

13.3k
Mac terminal mockup

Anonymous

9 months ago

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

Mahmoud Abdelaziz Salama

1 year ago

2.2k
Tablet device mockup

Prajwal Hallale

3 years ago

8.9k
Safari browser mockup (dark)

Leon Bachmann

3 years ago

11.2k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.3k
Help command

Bruz

1 year ago

589