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>
        <span class="button-alpha-text">A</span>
      </div>
      
      <div class="button-cell">
        <button class="button menu-button"></button>
        <span class="button-alpha-text">B</span>
      </div>
      
      <div class="button-cell">
        <button class="button  menu-button"></button>
        <span class="button-alpha-text">C</span>
      </div>
      
      <div class="button-cell">
        <button class="button menu-button"></button>
        <span class="button-alpha-text">D</span>
      </div>
      
      <div class="button-cell">
        <button class="button menu-button"></button>
        <span class="button-alpha-text">E</span>
      </div>
      
      <div class="button-cell">
        <button class="button menu-button"></button>
        <span class="button-alpha-text">F</span>
      </div>
      
    </div>
    
    
    
    
    <div class="button-row">
      <div class="button-cell">
        <div class="button-top-text">
          <span class="item">PRINT</span>
        </div>
        <button class="button">MTH</button>
        <span class="button-alpha-text">G</span>
      </div>
      
      <div class="button-cell">
        <div class="button-top-text">
          <span class="item">I/O</span>
        </div>
        <button class="button">PRG</button>
        <span class="button-alpha-text">H</span>
      </div>
      
      <div class="button-cell">
        <div class="button-top-text">
          <span class="item">MODES</span>
        </div>
        <button class="button">CST</button>
        <span class="button-alpha-text">I</span>
      </div>
      
      <div class="button-cell">
        <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;
    
    flex-direction: column;
    position: relative;
    justify-content: flex-end;
    
    min-width: 48px;
    align-items: center;
 }
  .button-cell-wide {
  }

  .button {
    position: relative;
    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;
  }
  .button-wide {
    width: 66px;
  }
  
  .menu-button {
    background-color: #EEEEEE;
    border: none;
    
  }

  .button-alpha-text {
    /*position: relative;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    /*right: 0;
    top: 10px;*/
    
    
    position: absolute;
    top: auto;
    bottom: 3px;
    right: 8px;
  }

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

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

.button-top-text {
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.item {
  font-size: 8.5px;
  padding-bottom: -12px;
  font-family: "Helvetica...