JSFiddle - React, Tailwind, and code Playground

by bestmomo

HTML

<ul>
  <li><a href="#" title="zone 1">item1</a></li>
  <li><a href="#" title="zone 2">item2</a></li>
  <li><a href="#" title="zone 3">item3</a></li>
  <li><a href="#" title="zone 4">item4</a></li>
</ul>

CSS

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
}

ul li {
  float: left;
  margin-right: 4px;
  width: 140px;
  background: #c44;
  border-radius: 10px 30px;
  box-shadow: 5px 5px 10px #656565;
  transform: skewX(8deg);
  transition: background 1s, border-radius 1s, transform 1s;
}

ul li:hover {
  background: #a44;
  transform: scale(0.9, 1.3) translateY(12px) rotate(4deg);
  border-radius: 40px 100px;
}

ul li a {
  line-height: 2em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 2em;
  padding: 1em;
  color: rgba(10, 60, 150, 0.8);
  text-shadow: 1px 1px 1px #def, 0 0 0 #000, 1px 1px 1px #def;
  text-decoration: none;
}

ul li a:focus,
ul li a:active {
  font-size: 2.2em;
  padding-left: 0.7em;
  color: rgba(0, 30, 100, 0.8);
  text-shadow: -1px -1px 1px #def, -1px -1px 1px #def;
}