JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<ul>
<li class="navy"></li>
<li class="cyan"></li>
<li class="purple"></li>
<li class="orange"></li>
<li class="blue"></li>
</ul>

CSS

ul li {
  list-style: none;
  width: 20px;
  height: 20px;
  margin: 3px;
  display: inline-block;
  border: 8px solid transparent;
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: all .2s ease-out;
  cursor: pointer;
}

ul li:hover {
  border: 8px solid white;
}

.navy {
  background: #13324B;
}
.navy:hover {
  outline: 3px solid #13324B;
}
.cyan {
  background: #08DACC;
}
.cyan:hover,
.cyan:focus {
  outline: 3px solid #08DACC;
}
.purple {
  background: #7140D1;
}
.purple:hover {
  outline: 3px solid #7140D1;
}
.orange {
  background: #FF9E3F;
}
.orange:hover {
  outline: 3px solid #FF9E3F;
}
.blue {
  background: #4A62EF;
}
.blue:hover {
  outline: 3px solid #4A62EF;
}