JSFiddle - React, Tailwind, and code Playground

by sandesh b

HTML

<div class="ILS_lock">
        <div class="ILS_label-row">
          Passcode
        </div>
        <div class="ILS_numbers-row">
          <div class="ILS_digit">1</div>
          <div class="ILS_digit">2</div>
          <div class="ILS_digit">3</div>
        </div>
        <div class="ILS_numbers-row">
          <div class="ILS_digit">4</div>
          <div class="ILS_digit">5</div>
          <div class="ILS_digit">6</div>
        </div>
        <div class="ILS_numbers-row">
          <div class="ILS_digit">7</div>
          <div class="ILS_digit">8</div>
          <div class="ILS_digit">9</div>
        </div>
        <div class="ILS_numbers-row">
          <div class="ILS_digit ILS_ac">AC</div>
          <div class="ILS_digit">0</div>
          <div class="ILS_digit ILS_del">DEL</div>
        </div>
      </div>

CSS

/* Lock Screen Layout*/
          .ILS_lock {
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 999;
            background-color: {{backgroundColor}};
          }
          .ILS_lock-hidden {
            display: none;
          }
          .ILS_label-row {
            height: 50px;
            width: 100%;
            text-align: center;
            font-size: 23px;
            padding-top: 10px;
            color: {{textColor}};
          }
          .ILS_circles-row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
            height: 60px;
          }
          .ILS_circle {
            background-color: {{backgroundColor}}!important;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            border:solid 1px {{textColor}};
            margin: 0 15px;
          }
          .ILS_numbers-row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
            height: 100px;
          }
          .ILS_digit {
            margin: 0 14px;
            width: 80px;
            border-radius: 10%;
            height: 80px;
            text-align: center;
            padding-top: 29px;
            font-size: 21px;
            color: {{buttonTextColor}};
            background-color: {{buttonColor}};
          }
          .ILS_ac {
            color: {{buttonACTextColor}};
            background-color: {{buttonACColor}};
            }
          .ILS_del {
            color: {{buttonDelTextColor}};
            background-color: {{buttonDelColor}};
            }
          .ILS_full {
            background-color:{{textColor}}!important;
          }