JSFiddle - React, Tailwind, and code Playground

by Vikas

HTML

<div class="avatron">
  <div class="top-stripes-container">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
  </div>
  <div class="result">

  </div>
  <div class="button-container">
    <div class="logo-container">
      <div class="logo">
        <span class="name">Avatron</span> <strong>903M</strong>
      </div>
    </div>
    <div class="button-container-top">
      <div class="button-top-row">
        <div class="button button--orange button-first">
          <div class="shading"></div>
          <div class="button-inner">
            <div class="button-text">C</div>
          </div>
        </div>
      </div>
    </div>
    <div class="button-container-bottom">
      <div class="button-row top-row">
        <div class="button button--orange button-first">
          <div class="shading"></div>
          <div class="button-inner">
            <div class="button-text">MC</div>
          </div>
        </div>
        <div class="button button--orange button-second">
          <div class="shading"></div>
          <div class="button-inner">
            <div class="button-text">M+</div>
          </div>
        </div>
        <div class="button button--orange button-third">
          <div class="shading"></div>
          <div class="button-inner">
            <div class="button-text">M-</div>
          </div>
        </div>
        <div class="button button--orange button-fourth">
          <div class="shading"></div>
          <div class="button-inner">
            <div class="button-text">MR</div>
          </div>
        </div>
      </div>
      <div class="button-row second-row">
        <div class="button button--gray button-first">
          <div class="shading"></div>
          <div class="button-inner">
            <div class="button-text button-text--number">7</div>
          </div>
        </div>
        <div class="button button--gray button-second">
          <div class="shading"></div>
          <div...

CSS

@mixin abs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat&family=Raleway&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300&display=swap");
$t: transparent;

* {
  box-sizing: border-box;
}

body {
  font-size: 10px;
  .avatron {
    font-size: 1.5vmin;
    width: 36.5em;
    height: 60.5em;
    position: absolute;
    top: 51.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: rgba(14, 30, 37, 0.15) -2em -1em 2.5em 1em;
    background: linear-gradient(to bottom,
        rgba(#b6b8ad, 0.1),
        rgba(#b6b8ad, 0.5) 85%,
        rgba(#fff, 0.02) 87%,
        rgba(#fff, 0.01) 97%,
        rgba(#000, 0.05) 99%) 100% 0% / 100% 21.8%,
      #c6c6bc;
    background-repeat: no-repeat;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      background: linear-gradient(to bottom, #bfc0b6 49%, rgba(#c4c4bb, 1) 51%) 100% 24% / 40% 3em;
      background-repeat: no-repeat;
    }

    .top-stripes-container {
      width: 100%;
      height: 2.4em;
      position: absolute;
      top: 1.5%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .stripe {
        width: 100%;
        height: 0.35em;
        background: #827f66;
        background: linear-gradient(30deg,
            rgba(#fff, 0.01),
            rgba(#fff, 0.1) 15%,
            rgba(#fff, 0.4) 51%) 100% 100% / 0.4em 100%,
          linear-gradient(to bottom, rgba(#fff, 0.2) 5%, #827f66 51%);
        background-repeat: no-repeat;
      }
    }

    .result {
      width: 80.5%;
      height: 8em;
      position: absolute;
      top: 8.5%;
      left: 49.8%;
      transform: translateX(-50%);
     ...