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

Dynamic Google Card

Cristian

1 year ago

1.8k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Safari browser mockup (dark)

Leon Bachmann

3 years ago

11.2k
Mac terminal mockup

Manon Daniel

3 years ago

12k
Hero donate
the donation hero

Uwera Dorcas

1 year ago

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

Hamza Atig

1 year ago

1.5k
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.7k
Mobile device mockup
Smartphone (with punch hole notch) mockup in tailwind

Prajwal Hallale

3 years ago

9.4k
iPhone 15 Mockup
The "Screen Content" div can be manipulated to have anything inside the screen.

Coastal UI

1 year ago

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

Ameth Galarcio

2 years ago

2.6k
Mac terminal mockup

Sean Gantly

2 years ago

2.1k
A clock with Tailwind CSS

Michael Andreuzza

2 years ago

3k