<div id="app"></div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#28a9dd, #0d4e77);
}

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  position: relative;
  border-radius: 50%;
  border: none 0;
  font-size: 0;
  background: none;
  
  
  &::before {
    font: normal normal normal 50px/1 FontAwesome;
  }
  
  &:first-of-type::before {
    content: "\f055";
  }
  
  &:last-of-type::before {
    content: "\f056";
  }
  
  &:active,
  &:focus {
    outline: none;
  }
}

span {
  font-family: "Share Tech Mono", monospace;
  font-size: 60px;
  font-weight: 900;
  display: inline-block;
  margin: 0 10px;
  text-shadow: .02em .02em .005em rgba(255, 255, 255, .45);
}

class Counter extends React.Component {
  state = {
    counter: 0,
  };

  onIncrement = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  }

  onDecrement = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  }

  render() {
    return (
      <div>
        <button onClick={this.onIncrement} type="button">+</button>
        <span>{this.state.counter}</span>
        <button onClick={this.onDecrement} type="button">-</button>
       </div>
     );
  }
}

ReactDOM.render(<Counter />, document.getElementById('app'))