JSFiddle - React, Tailwind, and code Playground

by Alexander Tewpin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li class='fa fa-apple fa-2x'></li>
  <li class='fa fa-android fa-2x'></li>
  <li class='fa fa-windows fa-2x'></li>
</ul>

CSS

* {
  margin: 0px;
  padding: 0px;
}

ul {
  background-color: #ccc;
  padding: 25px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

li {
  cursor: pointer;
  width: 60px;
  line-height: 60px !important;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.75);
}

li:not(:last-child) {
  margin-right: 10px;
}

li:hover {
  background-color: tomato;
  color: #fff;
}