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

387

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

Mac terminal mockup

Author:
Anonymous

1 year ago

1.4k
Mobile device mockup (iPhone 14 pro)
Smartphone (with dynamic island notch) mockup in tailwind

Author:
Prajwal Hallale

2 years ago

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

7 months ago

515
Hero donate
the donation hero

Author:
Uwera Dorcas

6 months ago

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

Author:
Coastal UI

1 year ago

1.4k
Mac terminal mockup

Author:
Sean Gantly

1 year ago

1.3k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

7 months ago

530
itskoti.com
ssdas

Author:
Tendy Rivaldo

10 months ago

1.1k
Safari browser mockup (dark)

Author:
Leon Bachmann

3 years ago

10.4k
Tablet device mockup

Author:
Prajwal Hallale

3 years ago

8.8k
iPhone 15 Mockup

Author:
cameron202518

9 months ago

641
Mac terminal mockup

Author:
Manon Daniel

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components