JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<div class="navigation">
	<div class="container-fluid ceo-nav">
		<div class="row">
			<div class="logo">
				<img src="img/logo.png" alt="Logo">
			</div>
			<div class="offset-xl-4 nav-text">
				<a href=""><span class="home">HOME</span></a>
			</div>
			<div class="nav-text">
				<a href=""><span class="work">WORK</span></a>
			</div>
			<div class="nav-text">
				<a href=""><span class="about">ABOUT</span></a>
			</div>
			<div class="nav-text">
				<a href=""><span class="blog">BLOG</span></a>
			</div>
			<div class="nav-text">
				<a href=""><span class="contact">CONTACT</span></a>
			</div>
			<div class="nav-text">
				<a href=""><span class="purchase-now">PURCHASE NOW</span></a>
			</div>
		</div>
	</div>
</div>

CSS

/* Navigation Bar */
.navigation{
    background-color: white;
    padding: 33px 0;
    text-align: center;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
}

.navigation .row > div > a{
    text-decoration: none;
}

.navigation span:hover{
    color: black;
}

.navigation .logo img{
    position: relative;
}

.navigation span{
    font-size: 14px;
    color: grey;
}

.navigation .logo img{
    width: 44px;
}

.navigation .nav-text {
    padding: 10px 15px;
}
.navigation .ceo-nav{
    padding-left: 300px;
}

.navigation .purchase-now{
    position: relative;
}