JSFiddle - React, Tailwind, and code Playground
HTML
<section class="nav-btn">
<div class="container">
<div class="nav">
<ul>
<li><a class="h" href="#"><span>01</span>intro</a></li>
<li><a class="h" href="#"><span>02</span>work</a></li>
</ul>
</div>
</div>
</section>
CSS
/*
nav button
*/
.nav-btn {
position: relative;
background-color: #000;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
overflow: hidden;
text-align: center;
z-index: 0;
padding: 90px 0 0;
}
.nav-btn .nav li:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 300ms;
background: linear-gradient(to top, rgba(252,227,138,.9), rgba(243,129,129,.9));
z-index: -1;
opacity: 0;
}
.nav-btn .nav li:hover:before {
opacity: 0.9;
}
.nav-btn .nav {
list-style-type: none;
margin: 0 -15px;
padding: 0;
font-size: 0;
line-height: 0;
width: 100%;
padding: 0 0 18px;
}
/*.nav-btn {
padding-top: 140px;
}*/
.nav-btn .nav li{
display: inline-block;
width: 25%;
font-size: 18px;
line-height: 22px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-transform: uppercase;
color: #fff;
padding: 0 15px;
text-align: left;
}
.nav-btn .nav li a{
position: relative;
display: block;
padding: 22px 0;
text-shadow: 1px 1px 3px rgba(0,0,0,.4);
text-decoration: none;
color: white;
padding-left: 150px;
text-align: left;
}
.nav-btn .nav li a:before{
content: "";
position: absolute;
top: 0;
left: 0;
background: #fff;
height: 3px;
width: 100%;
opacity: 0.5;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.nav-btn .nav li a:after{
content: "";
position: absolute;
top: 0;
left: 0;
background: #f38181;
height: 3px;
width: 25%;
opacity: 0;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.nav-btn .nav li a:hover:before{
opacity: 1;
}
.nav-btn .nav li a:hover:after{
opacity: 1;
}
.nav-btn .nav li span{
font-size: 24px;
line-height: 28px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}