Home
Bruz
COMPLETE SYSTEM FAILURE

COMPLETE SYSTEM FAILURE

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

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

Quiting

Author:
Bruz

1 day ago

10
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

4 months ago

611
Dynamic Google Card

Author:
Cristian

6 months ago

859
Safari browser mockup (dark)

Author:
Leon Bachmann

2 years ago

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

4 months ago

828
Credit card mockup

Author:
Manuela Bianka

2 years ago

9.9k
Mac terminal mockup

Author:
Sean Gantly

1 year ago

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

Author:
Coastal UI

10 months ago

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

10 months ago

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

11 months ago

1.6k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

1.8k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

4 months ago

627

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components