JSFiddle - React, Tailwind, and code Playground

by jasonblewis

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
</head>
<body>
    <div class="container">
        <div class="top-box">
          <div class="top-rows">
  <div class="function-buttons"></div>
  <div class="Row1"></div>
  <div class="Row2"></div>
  <div class="Row3"></div>
  <div class="Row4"></div>
  
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
  
  <div class="mth">mth</div>
  <div class="prg">prg</div>
  <div class="cst">cst</div>
  <div class="var">var</div>
  <div class="up_arrow">🠉</div>
  <div class="nxt">nxt</div>
  
  <div class="apostrophe">'</div>
  <div class="sto">sto</div>
  <div class="eval">eval</div>
  <div class="left_arrow">🠈</div>
  <div class="down_arrow">🠋</div>
  <div class="right_arrow">🠊</div>

  <div class="sin">sin</div>
  <div class="cos">cos</div>
  <div class="tan">tan</div>
  <div class="sq_root"><math>
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math></div>
  <div class="ytox"><math><msup><mi>x</mi><mn>y</mn></msup></math></div>
  <div class="inverse"><math xmlns = "http://www.w3.org/1998/Math/MathML">
   <mfrac>
      <mn>1</mn>
      <mi>x</mi>
   </mfrac>
</math></div>


  <div class="EnterKey">Enter</div>
  <div class="plus-minus">+/-</div>
  <div class="eex">eex</div>
  <div class="del">del</div>
  <div class="backarrow">&#11013;</div>

</div>
        </div>
        <div class="bottom-boxes">
            <div class="bottom-box left-box">Left Box</div>
            <div class="bottom-box right-box">Right Box</div>
        </div>
    </div>
</body>
</html>

CSS

.top-rows {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
}

.function-buttons { grid-area: 1 / 1 / 2 / 7; }

.Row1 { grid-area: 2 / 1 / 3 / 7; }

.Row2 { grid-area: 3 / 1 / 4 / 7; }

.Row3 { grid-area: 4 / 1 / 5 / 7; }

.Row4 { grid-area: 5 / 1 / 6 / 7; }

.Row5 { grid-area: 6 / 1 / span 6 / span 1;}

.EnterKey { grid-area: 5 / 1 / span 1 / span 2; }

.plus-minus { grid-area: 5 / 3 / span 1 / span 1; }

.eex { grid-area: 5 / 4 / span 1 / span 1;}

.del {grid-area: 5 / 5 / span 1 / span 1;}

.backarrow {grid-area: 5 / 6 / span 1 / span 1;}

.A { grid-area: 1 / 1 / 2 / 2; }

.B { grid-area: 1 / 2 / 2 / 3; }

.C { grid-area: 1 / 3 / 2 / 4; }

.D { grid-area: 1 / 4 / 2 / 5; }

.E { grid-area: 1 / 5 / 2 / 6; }

.F { grid-area: 1 / 6 / 2 / 7; }

.mth { grid-area: 2 / 1 / span 1 / span 1; }
.prg { grid-area: 2 / 2 / span 1 / span 1; }
.cst { grid-area: 2 / 3 / span 1 / span 1; }
.var { grid-area: 2 / 4 / span 1 / span 1; }
.up_arrow { grid-area: 2 / 5 / span 1 / span 1; }
.nxt { grid-area: 2 / 6 / span 1 / span 1; }


.apostrophe { grid-area: 3 / 1 / span 1 / span 1; }
.sto { grid-area: 3 / 2 / span 1 / span 1; }
.eval { grid-area: 3 / 3 / span 1 / span 1; }
.left_arrow { grid-area: 3 / 4 / span 1 / span 1; }
.down_arrow { grid-area: 3 / 5 / span 1 / span 1; }
.right_arrow { grid-area: 3 / 6 / span 1 / span 1; }

.sin { grid-area: 4 / 1 / span 1 / span 1; }
.cos { grid-area: 4 / 2 / span 1 / span 1; }
.tan { grid-area: 4 / 3 / span 1 / span 1; }
.sq_root { grid-area: 4 / 4 / span 1 / span 1; }
.ytox { grid-area: 4 / 5 / span 1 / span 1; }
.inverse { grid-area: 4 / 6 / span 1 / span 1; }

math, msqrt, mi { border: none !important; }



html, body , .top-rows {
  height: 100%;
  margin: 0;
}

/* For presentation only, no need to copy the code below */

.top-rows * {
  border: 1px solid red;
  position: relative;
}

.top-rows *:after {
/*  content:attr(class); */
 ...