JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<div class="tags-wrapper">
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
  <a href="#">
    TAG
  </a>
</div>

SCSS

.tags-wrapper {
  padding: .3em 0;
  overflow: hidden;
  max-height: 2em;
  transition: max-height .3s ease;
  background: #999;
  &:hover {
    max-height: 4.3em;
  }
  a {
    text-decoration: none;
    text-align: center;
    font-size: .9em;
    color: #333;
    background: #fff;
    margin: 0 1% .4em 1%;
    display: inline-block;
    float: left;
    width: 6.47%;
    padding: .5em;
    transition: all .3s ease;
    &:hover {
      color: #ddd;
      background: #333;
    }
  }
}