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

110

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

Mac terminal mockup

Author:
Manon Daniel

2 years ago

10k
Mac terminal mockup

Author:
Sean Gantly

10 months ago

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

2 months ago

273
Credit card mockup - 2

Author:
Fabio Daneluzzi

2 weeks ago

23
Mobile device mockup
Smartphone (with punch hole notch) mockup in tailwind

Author:
Prajwal Hallale

2 years ago

9.1k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

5 months ago

1.1k
Safari browser mockup (dark)

Author:
Leon Bachmann

2 years ago

10k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

2 months ago

331
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

2 months ago

315
A clock with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.2k
Safari browser mockup

Author:
Leon Bachmann

2 years ago

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

Author:
Ameth Galarcio

11 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components