JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="screen-cover"></div>

<div ontouchstart="" class="phone">
  <input class="phone__ph-screen" readonly="readonly" />

  <div class="phone__ph-pad">
    <div class="ph-pad__numbers-section">
        <button>1</button>
        <button>2<span>ABC</span></button>
        <button>3<span>DEF</span></button>
        <button>4<span>GHI</span></button>
        <button>5<span>JKL</span></button>
        <button>6<span>MNO</span></button>
        <button>7<span>PQRS</span></button>
        <button>8<span>TUV</span></button>
        <button>9<span>WXYZ</span></button>
        <button>*</button>
        <button>0<span>+</span></button>
        <button>#</button>
    </div>
    <div class="ph-pad__controls-section">
        <button></button>
        <button class="call-button"></button>
        <button></button>
    </div>
  </div><!-- end of phone__ph-pad -->
</div><!-- end of phone -->

CSS

.screen-cover{
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0,0,0,0.5);
}

.phone{
    position:fixed;
    right: 1px; left: 1px;
    margin: auto;
    width: 315px;
}

  .phone__ph-screen{
    display: table-cell;
    width:315px; height: 75px;
    border: none;
    background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0.5, rgb(26,25,66)),
          color-stop(0.5, rgb(40,73,112)),
          color-stop(0.01, rgb(39,62,107)),
          color-stop(0, rgb(20,20,20)));
    text-align: center;
    vertical-align: middle;
    font:34px helvetica;
    color: #eee;
  }
  
  .phone__ph-pad div{  
    overflow: hidden;
    font: 32px/1 helvetica;
  }
  
    .phone__ph-pad button{
      font: inherit;
      color: #eee;
      float: left;
      box-sizing: border-box;
      width: 105px; min-height:69px;
      margin: 0;
      padding: 11px 0 10px;
      border:1px solid rgba(0, 0, 0, 1);
      border-top-color: rgba(255,255,255,0.3);
      border-left-color:rgba(255,255,255,0.3);
      background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.40, rgba(15,16,26,0.95)),
            color-stop(1.0, rgba(30,34,48,1))
    );
      -webkit-box-align: start;
    }
    
    .phone__ph-pad button:active{
      background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.09, rgba(15,16,26,0.85)),
            color-stop(0.78, rgba(30,34,48,0.85)));
    }
    
        .phone__ph-pad button span{
          display:block;
          font-size: 13px; font-weight: 700;
          color: rgba(255,255,255,0.6);
        }
    
    .phone__ph-pad .call-button{
        background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.5, rgb(83,222,76)),
        color-stop(0.51, rgb(125,255,125)),
       ...