JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div ontouchstart="" class="phone">
  <div class="ph-screen"></div>

  <div class="ph-pad">
    <div class="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="controls-section">
        <button></button>
        <button class="call-button"></button>
        <button></button>
    </div>
  </div>
</div>

CSS

body, button{margin:0; padding: 0;}

.phone{width: 315px; margin: 0 auto;}

  .ph-screen{
    display: table-cell;
    width:315px; height: 75px;
    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;
  }
  
  .ph-pad div{  
    overflow: hidden;
    font: 32px/1 helvetica;
  }
  
    .ph-pad button{
      font: inherit;
      color: #eee;
      float: left;
      box-sizing: border-box;
      width: 105px; min-height:69px;
      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;
    }
    
    .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)));
    }
    
        .ph-pad button span{
          display:block;
          font-size: 13px; font-weight: 700;
          color: rgba(255,255,255,0.6);
        }
    
    .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)),
        color-stop(1, rgb(229,255,229)));
        border: none;
    }   

    .ph-pad .call-button:active{
        background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
       ...

JavaScript

(function() {
    var numbers_section_button_lst = document.getElementsByClassName('numbers-section')[0].getElementsByTagName('button');
    var ph_screen = document.getElementsByClassName('ph-screen')[0];
    var num_count = 0;

    function update_screen() {
        // add space after group of numbers
        if (num_count === 2) {
            ph_screen.innerHTML += " ";
        } else if (num_count % 3 === 2) {
            ph_screen.innerHTML += " ";
        }

        // shrink font-size
        if (num_count > 11) {
            if (num_count === 12) {
                ph_screen.style.fontSize = "24px";
            } else if (num_count === 17) {
                ph_screen.style.fontSize = "18px";
            } else if (num_count === 23) {
                ph_screen.style.fontSize = "15px";
            } else if (num_count === 28) {
                return false;
            }
        }

        num_count += 1;
        ph_screen.innerHTML += this.childNodes[0].nodeValue;
    }

    for (var i = 0, max = numbers_section_button_lst.length; i < max; i += 1) {
        var button = numbers_section_button_lst[i];
        button.addEventListener("touchstart", update_screen, false);
        button.onclick = update_screen;
    }
})();