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

792

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

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

Author:
Ameth Galarcio

1 year ago

1.8k
Mac terminal mockup

Author:
Anonymous

2 months ago

291
Mobile device mockup
Smartphone (with notch) mockup in tailwind

Author:
Prajwal Hallale

3 years ago

10.8k
Safari browser mockup

Author:
Leon Bachmann

3 years ago

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

965
Hero donate
the donation hero

Author:
Uwera Dorcas

8 months ago

753
Mac terminal mockup

Author:
Manon Daniel

2 years ago

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

10 months ago

1.3k
Dynamic Google Card

Author:
Cristian

1 year ago

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

10 months ago

608
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.4k
itskoti.com
ssdas

Author:
Tendy Rivaldo

1 year ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components