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

209

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

Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.4k
Heading Style

Author:
KULDEEP

4 months ago

354
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

6 months ago

837
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.1k
Glassmorphism form

Author:
Sophia Baker

2 years ago

17.8k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

16.7k
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

5 months ago

303
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

1 year ago

1.3k
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:
M Junaid

4 months ago

414
Plant Game
Checking to see if it works

Author:
Becky Keyworth

5 months ago

630
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

3 months ago

262
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

6 months ago

367

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components