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

556

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

Tablet device mockup

Author:
Prajwal Hallale

3 years ago

8.9k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 months ago

1.1k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

9 months ago

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

Author:
Prajwal Hallale

3 years ago

10.1k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

9 months ago

964
itskoti.com
ssdas

Author:
Tendy Rivaldo

1 year ago

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

Author:
Prajwal Hallale

2 years ago

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

1 year ago

2.4k
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.

Author:
Hamza Atig

9 months ago

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

Author:
Ameth Galarcio

1 year ago

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

9 months ago

1.4k
Mac terminal mockup

Author:
Sean Gantly

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components