JSFiddle - React, Tailwind, and code Playground

by Yonas Hailu

HTML

<div class="menu-link-txt">
  <div class="menu-link-default">
    <div class="menu-link-default-txt">Derash</div>
  </div>
  <div class="menu-link-hover">Derash</div>
</div>

CSS

.menu-link-txt {
	position: relative;
	float: left;
	text-transform: uppercase;
	font-size: 2rem;
	font-weight: 900;
	font-family: "Roboto", sans-serif;
}
.menu-link-default {
    float: left;
    width: 100%;
    padding: 5px 0;
    white-space: nowrap;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden;
}
.menu-link-default-txt {
    float: left;
}
.menu-link-hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    padding: 5px 0;
    color: #FF0229;
    white-space: nowrap;
    overflow: hidden;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.menu-link-txt:hover .menu-link-hover  {
	  width: 100%;
}