JSFiddle - React, Tailwind, and code Playground

by Calvin Tomkins

HTML

<div class="circle-container">
  <ul>
    <li>
      <div class="circle blue">
        <span id="t-inside">17.5</span>&nbsp;C
      </div>
      Inside
    </li>
    <li>
      <div class="circle red">
        <span id="t-set">18.0</span>&nbsp;C
      </div>
      Set Point
    </li>
    <li>
      <div class="circle green">
        <span id="t-outside">-4.5</span>&nbsp;C
      </div>
      Outside
    </li>
  </ul>
</div>

CSS

* {
  font-family: Arial;
}

.circle-container {
  float: right;
  position: relative;
  left: -50%;
}

.circle-container ul {
  list-style: none;
  position: relative;
  left: 50%;
}

.circle-container li {
  float: left;
  position: relative;
  text-align: center;
}

.circle {
  border-radius: 50%;
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  color: #ffffff;
  font-size: 20px
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}