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

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

Safari browser mockup (dark)

Author:
Leon Bachmann

2 years ago

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

1 month ago

68
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

1 month ago

68
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

1 month ago

96
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

1 month ago

70
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

6 months ago

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

Author:
Hamza Atig

1 month ago

99
iPhone 15 Mockup

Author:
cameron202518

2 months ago

259
Show credit card details

Author:
Manuela Bianka

2 years ago

11.5k
Mac terminal mockup

Author:
Manon Daniel

2 years ago

8.8k
A clock with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2k
Mac terminal mockup

Author:
Anonymous

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components