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

890

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

Tablet device mockup

Author:
Prajwal Hallale

3 years ago

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

10 months ago

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

10 months ago

1.4k
Active Beauty Main Page

Author:
Maxim

11 months ago

1.2k
Quiting

Author:
Bruz

6 months ago

507
itskoti.com
ssdas

Author:
Tendy Rivaldo

1 year ago

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

10 months ago

1.5k
Credit card mockup

Author:
Manuela Bianka

3 years ago

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

Author:
Hamza Atig

10 months ago

872
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

9 months ago

907
Mac terminal mockup

Author:
Anonymous

3 months ago

293
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

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components