JSFiddle - React, Tailwind, and code Playground

by Romanouski_Tucke_9

HTML

<!Doctypehtml>
<html>

  <body>
    <div id="calculator">
      <div id="answer">Answer</div>
      <div id="b-1" class="button" onclick="pressOne()">1</div>
      <div id="b-1" class="button">2</div>
      <div id="b-1" class="button">3</div>
      <div id="b-1" class="button">4</div>
      <div id="b-1" class="button">5</div>
      <div id="b-1" class="button">6</div>
      <div id="b-1" class="button">7</div>
      <div id="b-1" class="button">8</div>
      <div id="b-1" class="button">9</div>
      <div id="b-1" class="button">0</div>
      <div id="b-1" class="button">-</div>
      <div id="b-1" class="button">+</div>
      <div id="b-1" class="button">*</div>
      <div id="b-1" class="button">/</div>
      <div id="b-1" class="button">A/C</div>
    </div>
  </body>

</html>

CSS

#calculator {
  background-color: Gray;
  height: 100%;
  width: 200px;
  border: solid white thin;
  padding: 5px 5px 5px 5px;
  text-align: center;
}

.button {
  width: 30%;
  height: 50px;
  border: inset black thin;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

#answer {
  height: 50px;
  border: solid black thin;
  width: 96%;
  display: inline-block;
}

JavaScript

function pressOne() {
alert("I pressed One");
}