Home
Anonymous
Mac terminal mockup

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are simulation,copy,dummy,miniature,like

Mockup

Author Anonymous

1.7k

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

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.

Author:
Hamza Atig

1 month ago

91
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

10 months ago

760
Help command

Author:
Bruz

5 months ago

370
Safari browser mockup (dark)

Author:
Leon Bachmann

3 years ago

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

Author:
Prajwal Hallale

3 years ago

10.1k
Safari browser mockup

Author:
Leon Bachmann

3 years ago

8.7k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

10 months ago

1.4k
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
Credit card mockup

Author:
Manuela Bianka

3 years ago

10.5k
Credit card mockup - 2

Author:
Fabio Daneluzzi

7 months ago

861
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

10 months ago

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

Author:
Ameth Galarcio

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components