JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div style="float: left">
 <button class="btn" data-cls="o1">1</button>
 <button class="btn" data-cls="o2">2</button>
 <button class="btn" data-cls="o3">3</button>
 <button class="btn" data-cls="o4">4</button>
 <button class="btn" data-cls="o5">5</button>
</div>

<div style="float: right">
 <button class="btn" data-cls="o6">6</button>
 <button class="btn" data-cls="o7">7</button>
 <button class="btn" data-cls="o8">8</button>
 <button class="btn" data-cls="o9">9</button>
 <button class="btn" data-cls="o0">0</button>
</div>

<div class="container">
  <div class="bSm"></div>
</div>

<div class="result">
<h2>Результат</h2>
  <div class="bSres"></div>
</div>

CSS

body {
  background-color: #f4f4f4;
  padding: 30px;
}

.bSm {
  display: block;
  background: #fff;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  margin: 0 auto 1em;
}

.result {
  width: 92%;
  background-color: #fff;
  min-height: 150px;
  border-radius: 6px;
  text-align: left;
  padding: 20px;
  margin: 0 auto;
  font-size: 1.125rem;
  color: #ddd;
}

button {
  width: 50px;
  height: 50px;
  background: #fff;
  color: #1F2667;
  text-align: center;
  font-size: 1rem;
  padding: 0.75em 1em;
  border: 0;
  cursor: pointer;
  margin: 5px 0;
}

.o1 {
  width: 450px;
  height: 675px;
}
.o2 {
  width: 250px;
  height: 340px;
}
.o3 {
  width: 150px;
  height: 165px;
}
.o4 {
  width: 150px;
  height: 300px;
}
.o5 {
  width: 450px;
  height: 270px;
}

.o6 {
  background-color:green;
}
.o7 {
  background-color:#555;
}
.o8 {
  background-color:red;
}
.o9 {
  background-color:#eee;
}
.o0 {
  background-color:yellow;
}

JavaScript

$(function() {
  var b = $('.btn');
  b.click(function() {
    var cls = $(this).data("cls");
    $('.bSm').toggleClass(cls);
  });
});