Home
Bruz
TASK FAILED SUCCESSFULLY

TASK FAILED SUCCESSFULLY

TradingGoose Ep2 MockUp

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

Author Bruz

242

<!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

background animation
background animation

Author:
Anonymous

1 month ago

113
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
Anonymous

7 months ago

660
Privacy policy page template

Author:
Sameer Sultana

2 years ago

18.9k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

10 months ago

1.8k
Moving Background Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

3k
background animation
background animation

Author:
Anonymous

2 years ago

49.9k
htmlcss1

Author:
Anonymous

6 months ago

296
App Hero Section With header

Author:
Abdul Baset Bappy

6 months ago

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

Author:
SANJAY SINGH GARIYA

9 months ago

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

Author:
Hamza Atig

8 months ago

1.1k
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

1k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

1 month ago

359

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components