JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="cl-effect-5">
								<ul class="main-nav">
									<li><a><span class="fulljustify" data-hover="C&nbsp;O&nbsp;L&nbsp;L&nbsp;E&nbsp;C&nbsp;T&nbsp;I&nbsp;O&nbsp;N">C O L L E C T I O N</span></a></li>
									<li><a><span class="fulljustify" data-hover="A&nbsp;R&nbsp;T&nbsp;&nbsp;&nbsp;I&nbsp;S">A R T   I S</span></a></li>
									<li><a><span class="fulljustify" data-hover="S&nbsp;H&nbsp;O&nbsp;P">S H O P</span></a></li>
									<li><a><span class="fulljustify" data-hover="A&nbsp;B&nbsp;O&nbsp;U&nbsp;T">A B O U T</span></a></li>
								</ul>
</nav>

CSS

.fulljustify { text-align: justify; text-transform: uppercase; }
.fulljustify:after { content: ""; display: inline-block; width: 100%; }

ul li{
	list-style: none;
}
nav a {
	position: relative;
	display: inline-block;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.35em;
	width: 100%;
}
span{
	width: 100%;
}

nav a:hover,
nav a:focus {
	outline: none;
}

.cl-effect-5 a {
	overflow: hidden;
	height: 1.35em;
}

.cl-effect-5 a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl-effect-5 a span::before {
	position: absolute;
	top: 100%;
	width: inherit;
	color: yellow;
	text-align: justify;
	display: inline-block;
	content: attr(data-hover);
	font-weight: 700;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.cl-effect-5 a span::after {
}
.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}