Mac terminal mockup

Forked from @manon-daniel/mac-terminal-mockup-2

This tailwind example is contributed by Anonymous, on 20-Sep-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are simulation,copy,dummy,miniature,like

Mockup

Author Anonymous

Tailwind v3.4 2k 3

Fork Fullscreen

<div class="bg-black rounded-md p-4 max-w-md mx-auto mt-20">
    <div class="flex items-center mb-2">
        <div class="h-3 w-3 rounded-full mr-2 bg-red-500"></div>
        <div class="h-3 w-3 rounded-full mr-2 bg-yellow-500"></div>
        <div class="h-3 w-3 rounded-full bg-green-500"></div>
    </div>
    <div class="text-white">
        <span class="font-bold"></span><span class="ml-1">~$</span>
        <span class="ml-2">name:</span>
    </div>
    <div class="text-gray-300 pl-5">
    <pre>        binnichtaktiv</pre>

</div>
    <div class="text-white">
        <span class="font-bold"></span><span class="ml-1">~$</span>
        <span class="font-bold">age:</span><span class="ml-1"></span>
            <pre>          18</pre>
    </div>
    <div class="text-white">
        <span class="font-bold"></span><span class="ml-1">~$</span>
        <span class="font-bold">location:</span><span class="ml-1"></span>
            <pre>           🇩🇪</pre>
    </div>
        <div class="text-white">
        <span class="font-bold"></span><span class="ml-1">~$</span>
        <span class="font-bold">what i do:</span><span class="ml-1"></span>
            <pre>           student specializing in IT</pre>
    </div>
    
</div>

Related Examples

COMPLETE SYSTEM FAILURE

Bruz

1 year ago

1.1k
A clock with Tailwind CSS

Michael Andreuzza

2 years ago

3k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Safari mockup Browser page
This component is a mockup of a Safari browser window, featuring a realistic and responsive design created with Tailwind CSS. It includes the following elements: Tab Bar: Positioned at the top of the window, the tab bar showcases an active tab with a favicon and a title. The active tab is highlighted with a background color and border for clarity. Toolbar: Below the tab bar, the toolbar mimics the Safari browser's functionality with close, minimize, and maximize buttons. It also features an address bar pre-filled with a URL, styled for a polished look. Navigation Buttons: The toolbar contains navigation buttons designed with SVG icons to represent back, forward, and other standard browser actions. Content Area: The main section of the browser window, styled to display content within the mockup. It includes a heading and a description to illustrate the use of the component.

Mahmoud Abdelaziz Salama

1 year ago

2.2k
Atlas AI Analyst Workspace
A premium, document-centric AI chat interface that moves beyond standard bubbles into a professional "editor" layout. Designed for power users, it features a floating glassmorphic command bar, a dedicated "Memory & Context" sidebar with interactive widgets, and rich data visualization blocks. The aesthetic combines a deep charcoal base with luxury bronze/orange accents, making it ideal for high-end SaaS tools, financial analysis dashboards, or enterprise AI assistants.

Hamza Atig

8 months ago

538
Mac terminal mockup

Sean Gantly

2 years ago

1.8k
Tablet device mockup

Prajwal Hallale

3 years ago

8.9k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.6k
Hero donate
the donation hero

Uwera Dorcas

1 year ago

888
Safari browser mockup (dark)

Leon Bachmann

3 years ago

11.2k
Credit card mockup

Kofi Osei

3 years ago

13.3k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k