JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="block">
  <div class="block">
    <input value="e">
    ^
    <div class="block">
      <input value="π" />
      ×
      <div class="var">x</div>
    </div>
  </div>
  -
  <div class="block">
    <input value="e">
    ^
    <div class="block">
      <input value="π" />
      ×
      <div class="block">
        -
        <div class="var">x</div>
      </div>
    </div>
  </div>
</div>

CSS

.block {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 2px;
  border-radius: 999px;
  background: #ddd;
}

.block > .block {
  background: #eee;
}

.block > .block > .block {
  background: #ddd;
}

.block > .block > .block > .block {
  background: #eee;
}

.var {
  display: inline-block;
  background: red;
  color: white;
  border: 1px solid darkred;
  font-family: sans-serif;
  width: 28px;
  text-align: center;
  border-radius: 999px;
}

input {
  border: 1px solid #ddd;
  width: 28px;
  text-align: center;
  border-radius: 999px;
}