JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" class="container-fluid">
		<div class="row">
			<div class="col-xs-offset-2 top_menu_row1">
				<div class="col-xs-4 col-sm-4 top_menu_icon1"></div>
				<div class="col-xs-4 col-sm-4 top_menu_icon2"></div>
				<div class="col-xs-4 col-sm-4 top_menu_icon3"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-offset-2 top_menu_row2">
				<div class="col-xs-4 col-sm-4 top_menu_icon4"></div>
				<div class="col-xs-4 col-sm-4 top_menu_icon5"></div>
				<div class="col-xs-4 col-sm-4 top_menu_icon6"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 col-sm-12 search">
				<input type="text" class="form-control" id="inputSearch" placeholder="enter name or number">
				<div onclick="javasript:;" class="col-xs-1 col-sm-1 voice_search"></div>
				<div onclick="javasript:;" class="col-xs-1 col-sm-1 camera_search"></div>
			</div>
		</div>
	</div>
	<div id="books" class="container-fluid">
		<div class="row">
			<div class="col-xs-12 col-sm-12 name_section">
				<a class="text_name_section">Books</a>
				<a class="text_explore">explore</a>
			</div>
		</div>
		<div class="row">
			<div class="owl-carousel owl-theme">
				<div class="col-xs-3 col-sm-3 book1"></div>
				<div class="col-xs-3 col-sm-3 book2"></div>
				<div class="col-xs-3 col-sm-3 book3"></div>
				<div class="col-xs-3 col-sm-3 book4"></div>
			</div>
		</div>
		<div class="row">
			<div class="owl-carousel owl-theme">
				<div class="col-xs-3 col-sm-3 book_name1">
					<p>Disney books</p>
				</div>
				<div class="col-xs-3 col-sm-3 book_name2">
					<p>Disney books</p>
				</div>
				<div class="col-xs-3 col-sm-3 book_name3">
					<p>Disney books</p>
				</div>
				<div class="col-xs-3 col-sm-3 book_name4">
					<p>Disney books</p>
				</div>
			</div>
		</div>
	</div>
	<div id="e-books" class="container-fluid">
		<div class="row">
			<div class="col-xs-12 col-sm-12 name_section">
				<a class="text_name_section">E-Books</a>
				<a...

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #f2f2f2;
}

#header {
  max-width: 1920px;
  background: url(../img/drawable-ldpi/featured2.png) no-repeat;
  background-size: cover;
  padding-top: 15px;
  border-top: 2px solid #697582;
  border-bottom: 2px solid #697582;
}

#books {
  max-width: 1280px;
  background-color: #ffffff;
  margin-top: 7px;
}

#e-books {
  max-width: 1280px;
  background-color: #ffffff;
  margin-top: 7px;
}
#footer {
  max-width: 1920px;
}

.top_menu_icon1, .top_menu_icon2, .top_menu_icon3, .top_menu_icon4, .top_menu_icon5, .top_menu_icon6{
	background: url(../img/drawable-ldpi/sprites.png) no-repeat;
}

.top_menu {
	display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.top_menu_icon1{
	background-position: -208px -56px ;
	width: 36px;
	height: 36px;
	padding-bottom: 50px;
	padding-right: 65px;
	cursor: pointer;
}

.top_menu_icon2{
	background-position: -307px -56px ;
	width: 36px;
	height: 36px;
	padding-right: 65px;
	cursor: pointer;
}

.top_menu_icon3{
	background-position: -407px -57px ;
	width: 36px;
	height: 36px;
	cursor: pointer;
}

.top_menu_icon4{
	background-position: -209px -107px ;
	width: 36px;
	height: 36px;
	padding-bottom: 50px;
	padding-right: 65px;
	cursor: pointer;
}

.top_menu_icon5{
	background-position: -308px -108px ;
	width: 36px;
	height: 36px;
	padding-right: 65px;
	cursor: pointer;
}

.top_menu_icon6{
	background-position: -407px -108px ;
	width: 36px;
	height: 36px;
	cursor: pointer;
}

.camera_search{
	display: inline-block;
	background: url(../img/drawable-ldpi/camera.png) no-repeat;
	cursor: pointer;
	width: 24px;
	height: 24px;
	z-index: 10;
	top: -29px;
	float: right;
}

.voice_search{
	display: inline-block;
	background: url(../img/drawable-ldpi/mic.png) no-repeat;
	cursor: pointer;
	width: 24px;
	height: 24px;
	z-index: 10;
	top: -29px;
	float: right;
}

.text_name_section{
	float: left;
	color: #212121;
	font-size: 16px;
	padding-top: 10px;
	cursor:...