JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root"></div>

CSS

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: sans-serif;
}

.wrap {
  display: flex;
  align-items: center;
}

.readout {
  text-align: left;
}

.readout h1, .readout h2 {
  margin: 0;
}

.readout h1 {
  font-size: 2.75em;
  font-weight: 900;
}

.readout h1 sup {
  font-weight: 300;
}

.thermometer {
  width: 110px;
}

React

class Weather extends React.Component {
  convertTempToHeight() {
    return this.props.weatherData.currentTemp * 0.1;
  }
  percentageToColor() {
    const hue = 200 + (160 * ( this.props.weatherData.currentTemp / 100 ));
    return `hsl(${hue}, 100%, 50%)`;
  }
  render() {
    return (
      <div className="wrap">
        <div className="thermometer">
          <svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 256 512">
            <g>
              <g>
                <g fill="none" stroke="#000" strokeWidth="4">
                  <path d="M80 64h48"></path>
                  <path d="M80 384h48"></path>
                  <path d="M80 224h48"></path>
                  <path d="M80 192h16"></path>
                  <path d="M80 160h16"></path>
                  <path d="M80 128h16"></path>
                  <path d="M80 96h16"></path>
                  <path d="M80 256h16"></path>
                  <path d="M80 288h16"></path>
                  <path d="M80 320h16"></path>
                  <path d="M80 352h16"></path>
                </g>
                <g>
                  <rect
                    width="32"
                    height="416"
                    x="48"
                    y="32"
                    fill="#eeeeec"
                    rx="16"
                    ry="16"
                  ></rect>
                  <rect
                    width="32"
                    height="64"
                    x="48"
                    y="384"
                    fill={this.percentageToColor()}
                    rx="0"
                    ry="0"
                  ></rect>
                  <path
                    fill={this.percentageToColor()}
                    d="M96 448a32 32 0 11-64 0 32 32 0 1164 0z"
                  ></path>
                  <rect
                    width="32"
                    height={this.convertTempToHeight()}
                    x="-80"
                    y="-12"
                   ...