JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<p id="k">KURB</p>
</div>
<div id="about">
<p class="label">Blah blah blah</p>
</div>
<div id="work">
<p class="label">Blah blah blah blah blah</p>
</div>
<div id="contact">
<p class="label">Blah blah blah blah</p>
</div>
CSS
#main {
float: left;
width: 20%;
height: 10vh;
margin-top: 10vh;
margin-left: 40%;
text-align: center;
}
#k {
font-family: Questrial;
font-size: 70px;
margin-top: -7px;
margin-left: -2px;
color: #404040;
border-bottom: 2px solid #404040;
line-height: 0.85;
}
#about {
float: left;
clear: both;
width: 38%;
height: 30vh;
margin-top: 7vh;
margin-left: 31%;
text-align: center;
background-color: #33CC33;
border-radius: 100%;
opacity: 0.6;
transition: all .5s;
-wenkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
#about:hover {
opacity: 0.8;
margin-top: 5vh;
margin-bottom: 2vh;
transition: all .5s;
-wenkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
#work {
float: left;
width: 38%;
height: 30vh;
margin-top: 0vh;
margin-left: 10%;
text-align: center;
background-color: #323280;
border-radius: 100%;
opacity: 0.6;
transition: all .5s;
-wenkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
#work:hover {
opacity: 0.8;
}
#contact {
float: right;
width: 38%;
height: 30vh;
margin-top: 0vh;
margin-right: 10%;
text-align: center;
background-color: #FF6600;
border-radius: 100%;
opacity: 0.6;
transition: all .5s;
-wenkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
#contact:hover {
opacity: 0.8;
}
.label {
font-family: Questrial;
color: white;
font-size: 35px;
margin-top: 80px;
}