JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<div class="top-line">
			<div class="container">
				<div class="header-logo">
					<img src="images/logo.png" alt="Waxom Hemepage" />
					<span>Waxom</span>
				</div>
				<nav class="header-menu clearfix">
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">About Us</a></li>
						<li><a href="#">Portfolio</a></li>
						<li><a href="#">Features</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">Pricing</a></li>
						<li><a href="#">Shortcodes</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
					<div class="menu-icon">
						<img src="images/by-icon.png" alt="" />
						<img src="images/search-icon.png" alt="" />
					</div>
				</nav>
			</div>
		</div>
		<div class="slider-fon"></div>
	</header>
	<div class="main">
		<div class="slider">
			<div class="slide">
				<img src="images/slider-1/photo_1.jpg" alt="">
			</div>
			<div class="slide">
				<img src="images/slider-1/photo_2.jpg" alt="">
			</div>
			<div class="slide">
				<img src="images/slider-1/photo_3.jpg" alt="">
			</div>
			<div class="slide">
				<img src="images/slider-1/photo_4.jpg" alt="">
			</div>
		</div>
	</div>

CSS

.top-line {
	width: 100%;
	position: fixed;
	z-index: 2;
}

.header-logo {
	float: left;
}

.header-menu {
	float: right;
}

.header-menu li {
	float: left;
}

.header-menu ul {
	float: left;
}

.menu-icon {
	float: right;
}