JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="wrapper">
		<header>
			<div class="header_title">
				<div class="logo">
					<a href="#">
						<img src="img/logo.png" alt="">
					</a>
				</div>
				<div class="search">
					<form action="" method="post" id="search">
						<input type="search">
						<input type="submit" value="">
					</form>
				</div>
				<div class="card">
					<a href="#">
						<img src="img/basket.png" alt=""><span class="card_price">$300</span>
					</a>
				</div>
			</div>
			<div class="top_menu">
				<ul>
					<li><a href="#">Home</a>
					<li><a href="#">sale</a>
					<li><a href="#">HaNdBagS</a>
					<li><a href="#">wallets</a>
					<li><a href="#">accessories</a>
					<li><a href="#">mens store</a>
					<li><a href="#">shoes</a>
					<li><a href="#">vintage</a>
					<li><a href="#">services</a>
					<li><a href="#">contact us</a>
				</ul>
			</div>
		</header>
		<main>
			<div id="slider-wrap">
				<div id="slider">
					<div class="slide">
						<div class='slider1_goods'><img src="https://api.fnkr.net/testimg/278x325/00CED1/FFF/?text=1"></div>
						<div class='slider1_goods_info'>
							<div class='slider1_label'><p>Cowhide Standard Crew</p></div>
							<div class='slider1_descrip'><p>White coloured, short-sleeved, printed T-shirt for men by Levi's. This crew-neck T-shirt is made of organic cotton and comes in a regular fit. </p></div>
							<a class='slider1_shop' href='#'>Shop now</a>
						</div>
					</div>
					<div class="slide">
						<div class='slider1_goods'><img src="https://api.fnkr.net/testimg/278x325/00CED1/FFF/?text=2"></div>
						<div class='slider1_goods_info'>
							<div class='slider1_label'><p>Cowhide Standard Crew</p></div>
							<div class='slider1_descrip'><p>White coloured, short-sleeved, printed T-shirt for men by Levi's. This crew-neck T-shirt is made of organic cotton and comes in a regular fit. </p></div>
							<a class='slider1_shop' href='#'>Shop now</a>
						</div>
					</div>
					<div class="slide">
						<div...

CSS

@font-face {
    font-family: Bebas Neue; 
    src: local("Bebas Neue"),
         url(Bebas Neue.ttf);
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font: bold 21px "Bebas Neue";
	color: #a1a1a1;
}
body{
	background: url("img/bg.png");
	width: 100%;
}
/*===========================================================   ↓↓↓ HEADER ↓↓↓   =================================================*/
.wrapper{
	max-width: 1280px;
	margin: 0 auto;
}
header{
	background-color: #fff;
	width: 100%;
}
.header_title{
	padding: 17px 0 10px 0;
}
	.logo{
		display: inline-block;
		height: 43px;
		background-color: #fff;
		width: 25%;
		text-align: center;
	}
	form{
		position: relative;
	}
	.search{
		display: inline-block;
		height: 46px;
		vertical-align: bottom;
		width: 33%;
	}
	.search form{
		width: 80%;
		margin-left: 30%;
	}
	.search input[type="search"]{
		width: 100%;
		height: 33px;
		border: 1px solid #e1e1e1;
		padding-right: 30px;
	}
		input[type="search"]::-webkit-search-cancel-button {
		    -webkit-appearance: none;
		}

	.search input[type="submit"]{
		position: absolute;
		top:5px;
		right: 10px;
		background: url("img/search_icon.png");
		width: 22px;
		height: 22px;
		border:none;
		cursor: pointer;
	}
	.card{
		display: inline-block;
		height: 46px;
		width: 33%;
	}
		.card a{
			display: block;
			text-decoration: none;
			text-align: center;
		}
		.card_price{
			font-size: 31px;
			vertical-align: top;
			color: #a1a1a1;
			margin-left: 10px;
		}

	.top_menu{
		overflow: hidden;
		background-color: #4ccfc1;
		box-shadow: 0 1px 1px rgba(158,158,158,0.3);

	}
	.top_menu ul{
		display: inline-block;
		position: relative;
		left: 50%;
		list-style: none;
		padding: 10px 0;
	}
		.top_menu ul li{
			display: inline-block;
			position: relative;
			left: -50%;
			border-right: 1px solid #fff;
			padding: 0 15px;
		}
		.top_menu ul li:last-child{
			border:none;
		}
			.top_menu a{
				display: inline-block;
				font-size: 21px;
				font-weight:...

JavaScript

var hwSlideSpeed = 700,
		hwTimeOut = 3000,
		hwNeedLinks = false;
$(document).ready(function(){


	var slider_outer = $("<div class='slider_outer'></div>");
	var slider_inner = $("<div class='slider_inner'></div>");

	var img = $("#slider2 img");
	for(var i=0, img_size=$(img).size(); i<img_size; i++){
		var $item = $("<div class='item'></div>");
		if(i==1) $item.addClass("current");
		$(img[i]).appendTo($item);
		var slider_goods_info = $("<div class='slider_goods_info'></div>");
		var title = $("<span class='title'>"+$(img[i]).attr("data-title")+"</span>");
		var a = $("<a href='#' class='toShop'>shop</a>");
		$item.append(slider_goods_info);
		$(slider_goods_info).append(title);
		$(slider_goods_info).append(a);
		$item.appendTo(slider_inner);
	}
	$(slider_inner).appendTo(slider_outer);
	$(slider_outer).appendTo("#slider2");



	var arrow = $("<img class='arrow_left' src='img/arrow.png'>");
	$(arrow).prependTo("#slider2");
	arrow = $("<img class='arrow_right' src='img/arrow.png'>");
	$(arrow).appendTo("#slider2");

	$("#slider2 .arrow_right").on('click', function(){
		var carusel = $("#slider2 .slider_inner");
		right_carusel(carusel);
		return false;
	});

	function right_carusel(carusel){
	   $(carusel).find(".item[class='item current']").removeClass("current");

	   $(carusel).animate({left: "-339px"}, 200, function(){
		  $(carusel).find(".item").eq(0).clone().appendTo($(carusel)); 
	      $(carusel).find(".item").eq(0).remove(); 
	      $(carusel).css({"left":"0px"});
	      $(carusel).find(".item[class='item current']").removeClass("current"); 
	      $(carusel).find(".item").eq(1).addClass("current");
	   }); 
	}

	$(document).on('click',"#slider2 .arrow_left",function(){ 
		var carusel = $("#slider2 .slider_inner");
		left_carusel(carusel);
		return false;
	});
	function left_carusel(carusel){
	   $(carusel).find(".item[class='item current']").removeClass("current");

	   $(carusel).find(".item").eq(-1).clone().prependTo($(carusel)); 
	  ...