JSFiddle - React, Tailwind, and code Playground

by vrmtm

HTML

<div class="calc_body_container">
        <div class="calc_body">
            <div class="output_div"><output name="x">0</output></div><br>
            <div class="left_side_container">
                <div class="container_left">
                    <div class="button_div"><button type="button">8</button></div>
                    <div class="button_div"><button type="button">5</button></div>
                    <div class="button_div"><button type="button">2</button></div>
                    <div class="button_div"><button type="button">0</button></div>
                </div>
                <div class="container_left">
                    <div class="button_div"><button type="button">7</button></div>
                    <div class="button_div"><button type="button">4</button></div>
                    <div class="button_div"><button type="button">1</button></div>
                    <div class="button_div"><button type="button">=</button></div>
                </div>
            </div>
            <div class="right_side_container">
                <div class="container_right">
                    <div class="button_div"><button type="button">9</button></div>
                    <div class="button_div"><button type="button">6</button></div>
                    <div class="button_div"><button type="button">3</button></div>
                    <div class="button_div"><button type="button">.</button></div>
                </div>
                <div class="container_right">
                    <div class="button_div"><button type="button">/</button></div>
                    <div class="button_div"><button type="button">*</button></div>
                    <div class="button_div"><button type="button">-</button></div>
                    <div class="button_div"><button type="button">+</button></div>
                </div>
            </div>
        </div>
    </div>

CSS

body, html{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.my-border-rad (@rad){
  border-radius: @rad;
  -webkit-border-radius: @rad;
  -moz-border-radius: @rad;
}

.calc_body_container {
  display: table;
  width: 100%;
  height: 100%;

}

.calc_body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.output_div {
  width: 79vmin; max-width: 394px; min-width: 160px;
  height: 15vmin; max-height: 75px; min-height: 40px;
  display: inline-block;

}

output {
  //width: 79vmin; max-width: 394px; min-width: 160px;
  //height: 15vmin; max-height: 75px; min-height: 40px;
  background: yellow;
  display: table-cell;
  //box-sizing: border-box;
  border: 3px solid #e67e22;
  .my-border-rad(5px);
  color: #e67e22;
  font-family: Comfortaa;
  font-weight: 400;
  text-align: right;
  font-size: 65px;
  //border: solid #e67e22 2px;
  //display: inline-block;
}

.left_side_container, .right_side_container{
  width: 50vw;
  float: left;
}

.container_left {
  float: right;
}

.container_right {
  float: left;
}

.button_div {
  width: 20vmin; max-width: 100px; min-width: 40px;
  height: 20vmin; max-height: 100px; min-height: 40px;
  display: block;
}

button {
  width: 100% - 6px;
  height: 100% - 6px;
  .my-border-rad(10px);
  color: white;
  background: #e67e22;
  font-size: 65px;
  border: none;
  outline: none;
  padding: 0px;
  float: left;
  margin: 3px 0 0 3px;
  font-family: Comfortaa;
  font-weight: 400;
}

button::-moz-focus-inner {
  border: none;
}

br {
  clear: both;
}

@media screen and (max-width: 499px) , screen and (max-height: 499px) {

  button, output {
    font-size: 13vmin;
  }

}

@media screen and (max-width: 200px) , screen and (max-height: 200px) {

  button, output {
    font-size: 26px;
  }

}