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"></button>
        <div class="button-alpha-text">A</div>
      </div>
      <div class="button-cell">
        <button class="button"></button>
        <div class="button-alpha-text">A</div>
      </div>
      <div class="button-cell">
        <button class="button"></button>
        <div class="button-alpha-text">A</div>
      </div>
      <div class="button-cell">
        <button class="button"></button>
        <div class="button-alpha-text">A</div>
      </div>
      <div class="button-cell">
        <button class="button"></button>
        <div class="button-alpha-text">A</div>
      </div>
            <div class="button-cell">
        <button class="button"></button>
        <div class="button-alpha-text">A</div>
      </div>

      <div class="button-cell">
        <button class="button"></button>
        <div class="button-alpha-text">A</div>
      </div>
    </div>
  </div>
</main>

CSS

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

  .calculator {
    background-color: rgb(28, 28, 28);
    
    /* width: 240px; */
    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 {
    width: 28px;
    height: 13px;
    border-radius: 5px;
    background-color: rgb(114, 113, 113);
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin: 4px;
    border: none;
  }

  .button-alpha-text {
    right: 0;
    top: 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: smaller;
    position: relative;

  }

  .btn-letter {
    color: white;
    font: sans-serif;
    flex-wrap: nowrap;
    position: relative;
    top: -8px;
    left: 34px;
    font-size: 10px;
  }

  .menu-button {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .menu-button-container {
    flex-direction: row;
    flex-wrap: nowrap;
  }