JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<ul class="no-careers" style="display: block;"><li class="flipi"><a href="https://good-morning.no/about/"><span data-hover="About">About</span></a></li>
<li class="flipi"><a href="https://good-morning.no/work/"><span data-hover="Work">Work</span></a></li>
<li class="flipi"><a href="https://good-morning.no/services/"><span data-hover="Services">Services</span></a></li>
<li class="flipi"><a href="https://good-morning.no/news/"><span data-hover="Articles">Articles</span></a></li>
<li class="flipi"><a href="https://good-morning.no/contact/"><span data-hover="Contact">Contact</span></a></li>
</ul>

CSS

.no-careers li {
			  float: left;
			  height: 71px;
			  width: 20%;
        list-style:none;
			}
			.no-careers a span {
			  position: relative;
			  display: inline-block;
			  border-left: 1px solid #c4c4c4;
			  transition: transform 0.2s ease;
			  transform-origin: 50% 0;
			  transform-style: preserve-3d;
			  width: 100%;
			  background: white;
			}
       a span:before {
			  position: absolute;
			  top: 100%;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  background: #000;
			  content: attr(data-hover);
			  transition: background 0.2s ease;
			  transform: rotatex(-90deg);
			  transform-origin: 50% 0;
			}
      a:hover span {
			  transform: rotatex(-90deg) translatey(0px);
			  z-index: 99;
			}