JSFiddle - React, Tailwind, and code Playground

by jasonblewis

HTML

<!-- goal is to make a row of buttons like the top row of this calculator with the letter to the right lower side of it - see https://www.hpmuseum.org/img/48s/48sxs.jpg
-->
<main>
  <div class="calculator">
    <div class="button-row">
      <div class="button-cell">
        <button class="button menu-button"></button>
        <div class="button-alpha-text">A</div>
      </div>
      <div class="button-cell">
        <button class="button menu-button"></button>
        <div class="button-alpha-text">B</div>
      </div>
      <div class="button-cell">
        <button class="button  menu-button"></button>
        <div class="button-alpha-text">C</div>
      </div>
      <div class="button-cell">
        <button class="button menu-button"></button>
        <div class="button-alpha-text">D</div>
      </div>
      <div class="button-cell">
        <button class="button menu-button"></button>
        <div class="button-alpha-text">E</div>
      </div>
      <div class="button-cell">
        <button class="button menu-button"></button>
        <div class="button-alpha-text">F</div>
      </div>
    </div>




    <div class="button-row">
      <div class="button-cell">
        <div class="button-lshift-text">PRINT</div>
        <button class="button">MTH</button>
        <div class="button-alpha-text">G</div>
      </div>
      <div class="button-cell">
        <button class="button">PRG</button>
        <div class="button-alpha-text">H</div>
      </div>
      <div class="button-cell">
        <button class="button">CST</button>
        <div class="button-alpha-text">I</div>
      </div>
      <div class="button-cell">
        <button class="button">VAR</button>
        <div class="button-alpha-text">J</div>
      </div>
      <div class="button-cell">
        <button class="button">&#9650;</button>
        <div class="button-alpha-text">K</div>
      </div>
      <div class="button-cell">
        <button class="button">NXT</button>
        <div...

CSS

main {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .calculator {
    background-color: #462C2F;
    padding: 15px;
    border-radius: 7px;
    display: inline-block;
  }

  .button-row {
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: nowrap;
    color: white;
    border: 1px solid white;
    display: flex;

  }

  .button-cell {
/*    border: 1px solid white; */
    display: flex;
    padding-right: 10px;
 }

  .button {
    display: inline-flex;
    width: 28px;
    height: 18px;
    border-radius: 3px;
    font-size: 9px;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
         --padding-x: 1.2em;
    font-weight: bold;
    color: white;
    margin: 4px;
    border: black 1px solid;
    background-color: green;
  }
  
  .menu-button {
    background-color: #EEEEEE;
    border: none;
    
  }

  .button-alpha-text {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: smaller;
    right: 0;
    top: 10px;
  }
.button-lr-shift-text {
  display: flex;
  flex-direction: row;
}
.button-vert {
  flex-flow: column;
  display: flex;
}
.button-lshift-text {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    right: 0;
    top: 0px;
    color: orange;
}

.button-rshift-text {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    right: 0;
    top: 0px;
    color: cyan;
}