Home
Nick Girga
CSS-Boy

CSS-Boy

Inspired by the Pip-Boy Model 3000 from Fallout: New Vegas. Comes with multiple pages and some animations. All decorative background elements disappear when the screen is <sm (it's responsive).

This tailwind example is contributed by Nick Girga, on 08-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Mockup

Author Nick Girga

654

Fork Fullscreen

<div class="flex flex-col py-16 gap-8 items-center h-screen bg-[url(https://images.unsplash.com/photo-1617609026795-91a36f12cb53)] bg-cover">

<div class="css-boy">

<div class="panel-tl"></div>
    <div class="panel-bl"></div>
    <div class="brand-strip">
      <span class="brand-text">CSS-Boy</span>
      <div class="brand-strip-line top-[6mm]"></div>
      <div class="brand-strip-line top-[12mm]"></div>
      <div class="brand-strip-line top-[18mm]"></div>
      <div class="brand-strip-line top-[24mm]"></div>
      <div class="model-badge">
        <span class="model-text">Model 3<span class="text-[6px] align-top">000</span></span>
      </div>
    </div>

<div class="screw left-[35mm] top-8 rotate-[34deg]"></div>
    <div class="screw left-[35mm] bottom-2 rotate-[73deg]"></div>
    <div class="screw left-[10mm] -bottom-7 rotate-[29deg]"></div>
    <div class="screw right-[1mm] top-8 rotate-[152deg]"></div>
    <div class="screw right-[1mm] bottom-2 rotate-[98deg]"></div>

<div class="rad-meter">

<span class="absolute text-[6px] right-[2.5mm] top-4">x100</span>

<svg class="absolute px-[0.25mm] left-1/2 w-1/2 h-full"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMidYMid"
        version="1.0"
        viewBox="0 0 657.3 1280">
        <path
          d="m11.212 75.797a574.62 574.62 0 0 0-1.1367 0.080566v98.899a475.73 475.73 0 0 1 1.1367-0.08936 475.73 475.73 0 0 1 405.61 228.41l86.347-48.497a574.62 574.62 0 0 0-491.95-278.81z"
          fill="#ff0000"/>
        <path d="m0.69999 20.7c0.3 11.5 0.9 51.7 1.2 89.5l0.7 68.8h16.9l-0.6-8.8c-0.3-4.8-0.8-37.7-1.1-73.2s-0.8-71.8-1.1-80.8l-0.7-16.2h-16z"/>
        <path d="m283 149.8c-21.8 39.4-41.3 74.5-43.2 77.9l-3.4 6.2 13.8 8 1.9-3.2c1.8-2.9 84.4-151.4 85-152.7 0.2-0.5-12.9-8-13.9-8-0.2 0-18.3 32.3-40.2 71.8z"/>
        <path d="m487.3 351.6c-41.5 24.4-75.8 44.8-76.3 45.3-0.7 0.7 3.8 9.9 6.9 13.9 0.3 0.5 150.4-87.6 152.3-89.4 1.1-1 0.7-2.3-2.5-7.8-2.2-3.6-4.1-6.6-4.4-6.5-0.3 0-34.5 20-76 44.5z"/>
        <path d="m549.8 625.1c-29.7 0.3-57.7 0.7-62.2 0.8l-8.3 0.1v16.1l51.8-0.6c28.4-0.3 68.5-0.8 89-1.1l37.2-0.6v-15.8l-26.7 0.2c-14.8 0.1-51.1 0.5-80.8 0.9z"/>
        <path d="m420.1 865.9-3.8 7 8.8 4.9c34.8 19.8 146.5 82.2 146.7 82 2.4-3.1 7.4-13.3 6.8-13.9-1-0.9-151.2-85.6-153.3-86.3-1.1-0.4-2.6 1.5-5.2 6.3z"/>
        <path d="m252.6 1036.9c-3.9 2.2-6.1 4.1-5.8 4.9 0.7 1.9 88.6 149.4 89.9 150.9 0.9 1 2.6 0.3 7.9-2.8 6.5-3.9 6.7-4.2 5.4-6.2-0.7-1.2-21.3-35.6-45.7-76.5-24.3-40.8-44.5-74.2-44.9-74.1-0.3 0.1-3.4 1.7-6.8 3.8z"/>
        <path d="m15.3 1124.8c0 12.6 0.3 52.6 0.7 89l0.6 66.2h15.7v-25.8c0-14.2-0.3-54.3-0.7-89l-0.6-63.2h-15.7z"/>
      </svg>

<svg class="absolute w-2 h-2 right-[3.5mm] bottom-[3.5mm]"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="#000000"
        version="1.1"
        viewBox="0 0 296.662 296.662"
        xml:space="preserve">
        <g>
          <path d="M148.33,0.001C66.411,0.001,0,66.409,0,148.331c0,81.921,66.411,148.33,148.33,148.33   c81.921,0,148.332-66.409,148.332-148.33C296.662,66.409,230.251,0.001,148.33,0.001z M87.661,265.997l41.168-79.269   c-13.979-7.13-23.581-21.659-23.581-38.397c0-0.585,0.021-1.166,0.044-1.745l-89.163-3.979c1.403-33.198,14.99-64.208,38.63-87.849   c6.913-6.912,14.458-12.961,22.501-18.103l48.06,75.28c6.663-4.229,14.553-6.689,23.012-6.689c8.56,0,16.536,2.52,23.249,6.84   l48.059-75.277c7.953,5.108,15.419,11.104,22.264,17.948c23.581,23.58,37.16,54.494,38.622,87.598l-89.161,3.978   c0.03,0.662,0.051,1.327,0.051,1.997c0,16.428-9.245,30.732-22.802,37.998l41.165,79.264   c-18.729,9.844-39.686,15.068-61.447,15.068C126.869,280.661,106.192,275.578,87.661,265.997z"/>
          <path d="M148.331,175.414c14.934,0,27.083-12.149,27.083-27.083c0-14.934-12.149-27.083-27.083-27.083   c-14.934,0-27.083,12.149-27.083,27.083C121.248,163.265,133.397,175.414,148.331,175.414z"/>
        </g>
      </svg>

<div class="rad-meter-needle"></div>
      
    </div>

<div class="dial-bg">
      <div id="dial-0" class="dial-handle"></div>
      <div class="dial-marking"></div>
      <div class="dial-marking dial-marking-1"></div>
      <div class="dial-marking dial-marking-2"></div>
      <div class="dial-marking dial-marking-3"></div>
      <div class="dial-marking dial-marking-4"></div>
    </div>

<div class="scrollwheel-bg">
      <div class="scrollwheel"></div>
    </div>

<div class="screen-frame">

<div class="screen screen-glare">

<div class="flex flex-col m-4">
          
          
          <div id="stats-page-0" class="flex flex-col items-center gap-1">
            <span>STATS Page Content</span>
            <span>// TODO!: add content</span>
          </div>
          
          
          <div id="items-page-0" class="flex flex-col items-center gap-1 hidden">
            <span>ITEMS Page</span>
            <span>// TODO!: add more content</span>
          </div>

<div id="data-page-0" class="flex flex-col items-center gap-1 hidden">
            <span>DATA Page</span>
            <span>// TODO!: add even more content</span>
          </div>

</div>

<div class="screen-selector">

<label class="screen-selector-button-label">
          STATS
          <input class="screen-selector-button"
            type="radio"
            name="screen-selector-0"
            checked
            onclick="{
              // hide diabled pages; show selected page
              window.hidePage('items-page-0');
              window.hidePage('data-page-0');
              window.showPage('stats-page-0');

// TODO!: remove this after creating sub-page content
              // the dial positions [0,4] should correspond to the sub-pages
              window.setDialRot('dial-0', Math.round(Math.random() * 4));
            }">
          </input>
        </label>

<label class="screen-selector-button-label">
          ITEMS
          <input class="screen-selector-button"
            type="radio"
            name="screen-selector-0"
            onclick="{
              // hide diabled pages; show selected page
              window.hidePage('stats-page-0');
              window.hidePage('data-page-0');
              window.showPage('items-page-0');

<label class="screen-selector-button-label">
          DATA
          <input class="screen-selector-button"
            type="radio"
            name="screen-selector-0"
            onclick="{
              // hide diabled pages; show selected page
              window.hidePage('items-page-0');
              window.hidePage('stats-page-0');
              window.showPage('data-page-0');

</div>

</div>
</div>

// Shows the specified page
  window.showPage = function(pageId) {
    const pageObj = document.getElementById(pageId);
    if (pageObj.classList.contains('hidden'))
      pageObj.classList.remove('hidden');
  }

// Rotates the specified dial to the marking at the specified index [0,4]
  window.setDialRot = function(dialId, index) {
    if (index < 0) index = 0;
    if (index > 4) index = 4;
    const dial = document.getElementById(dialId);
    dial.className = 'dial-handle rotate-[' + (index * 45) + 'deg]';
  }
</script>

Related Examples

Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

8 months ago

1k
Dynamic Google Card

Author:
Cristian

10 months ago

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

Author:
Prajwal Hallale

3 years ago

10k
Mac terminal mockup

Author:
Quinn

1 month ago

102
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 months ago

708
Mac terminal mockup

Author:
Sean Gantly

1 year ago

1.3k
Tablet device mockup

Author:
Prajwal Hallale

3 years ago

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

Author:
Mahmoud Abdelaziz Salama

1 year ago

1.1k
Show credit card details

Author:
Manuela Bianka

2 years ago

12.1k
Credit card mockup

Author:
Manuela Bianka

2 years ago

10.4k
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

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components