TASK FAILED SUCCESSFULLY

TradingGoose Ep2 MockUp

This tailwind example is contributed by Bruz, on 15-Sep-2025. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 783

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Terminal Mockup</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .animate-pulse {
            animation: pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes blink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        .animate-blink {
            animation: blink 1s infinite;
        }
        @keyframes spin {
            0% { content: '|'; }
            25% { content: '/'; }
            50% { content: '-'; }
            75% { content: '\\'; }
            100% { content: '|'; }
        }
        .spinner::after {
            content: '|';
            animation: spin 0.5s linear infinite;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .fade-in {
            animation: fadeIn 0.3s forwards;
        }
    </style>
</head>
<body>
    <div class="flex flex-col h-screen bg-gray-900 text-gray-200 font-mono">
        
        <div class="flex items-center h-10 px-4 bg-gray-800 border-b border-gray-700">
            <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@computer
            </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">
            <span>bash 5.2.15</span>
            <span>UTF-8</span>
            <span id="status-info">80x24</span>
        </div>
    </div>

Related Examples

Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

ishimwe shadad

1 year ago

1.5k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

4 weeks ago

65
blog component
good blog

Uwera Dorcas

1 year ago

1.4k
walletp2p

Anonymous

1 year ago

2k
Payment success page example

Anonymous

1 year ago

2.3k
Made a sinup form
Made a sinnup form #sufyandev

Sufyan jutt

7 months ago

448
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Muzammil Riaz

1 year ago

1.6k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

SANJAY SINGH GARIYA

1 year ago

2.3k
Apple Dock Navigation Bar

Cristian

1 year ago

3k
Customer support chatbox
Floating chatbox

gmer33

3 years ago

12.2k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

603
Serious Input Html
Input text serious like apple or smth

Cristian

2 years ago

2.8k