JSFiddle - React, Tailwind, and code Playground

HTML

<title>Mihtore</title>
<div class="header">
		<div class="top">
			<p>The quick, brown fox jumps over a lazy dog. Djs flock by when MTV az quiz prog.</p>
			<a href="#">CONTACT</a>
			<a href="#">WISHLIST</a>
			<a href="#A">MY ACCOUNT</a>
	    </div>
	       <div class="logo">
                <div class="logoimg">
				    <img src="images/header.png" alt="" />
				    <p>Free psd template by ICEwave Design</p>
                </div>
				<div class="soc-icons">
					<img src="images/rss.png" alt="" />
					<img src="images/twitter.png" alt="" />
					<img src="images/facebook.png" alt="" />
					<img src="images/stumbleupon.png" alt="" />
					<img src="images/myspace.png" alt="" />
				</div>
			</div>
			<div class="menu">
				<ul class="main-menu">
					<li><a href="#">PRODUCTS</a></li>
					<li><a href="#">IDEAS</a></li>
					<li><a href="#">BRANDS</a></li>
					<li><a href="#">GIFTS</a></li>
					<li><a href="#">STORES</a></li>
					<div class="cart">
					<img src="images/dropdown.png" alt="" />
					<span>70$</span>
					<a href="#">3 ITEMS</a>
					<span>SHOPING CART: </span>
					</div>
				</ul>
				
			</div>
			<div class="menu-text">
				<span>PAGE TITLE</span>
				<span class="|">|</span>
				<span>PAGE DESCRIPTION THE QUICK, BROWN FOX JUMPS OVAER A LAZY DOG. DGJS FLOCK BY WHEN TV AX QUIZ PROG.</span>
			</div>
			<div class="vline">
		<img src="images/vline.png" alt="" />
		</div>
	</div>
	<div class="center">
	<div class="content">
        <div class="slider">
            <img src="images/slider.png" alt="" />
        </div>
        <div class="products-text">
            <h3>FEATURED PRODUCTS</h3>
        </div>
        <div class="products">
        	<div class="block1">
                <div class="procent-50">
        	 <img src="images/50.png" alt="" />
                </div>
        		<img src="images/products1.png" alt="" />
        		<div class="bottom-block1">
        			<a href="#">Pure Slim Xe</a>
        			<span>$60.00</span>
       ...

CSS

a{
	text-decoration: none;
	font-family: 'MS Sans Serif', Geneva, sans-serif;
}
a:hover{
	color: red;
}
p{
	font-family: Tahoma, Geneva, sans-serif;
}
h3{
	color: #7db122;
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 0.80em;
    letter-spacing: 0.1em;
}
body{
	position: relative;
    margin: 0 auto;
	width: 100%;
	height: 100%;
	background: url(images/bg.png) #e3ebed;
}
.header{
	margin: 0 auto;
	width: 1006px;
	height: 243px;
}
.top{
	width: 1006px;
	height: 46px;
	background: #ffffff;

}
.top p{
	display: inline-block;
	margin-top: 16px;
	margin-left: 32px;
	font-size: 13px;
	color: #b8b8b8;
}
.top a{
	margin-top: 3px;
	margin-right: 15px;
	padding: 14px;
	float: right;
	font-size: 13px;
	color: #b8b8b8;
}
a[href^="#A"] {
	color: #4cb1ca;
}
.logo{
	width: 1006px;
	height: 215px;
}
.logo img:first-child{
	margin-left: 34px;
	margin-top: 66px;
}
.logo p{
	display: block;
	margin-left: 35px;
	margin-top: 1px;
	color: #f02b63;
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    font-size: 0.73em;
    font-weight: bold;

}
.logoimg {
    float: left;
}
.soc-icons{
	padding: 15px;
	display: block;
	float: right;
}
.soc-icons img+img{
    margin-left: 6px;
}
.soc-icons img{
	opacity: 0.3;
}
.soc-icons img:hover{
	cursor: pointer;
	opacity: 1.0;
}
ul.main-menu{
	list-style: none;
	padding: 11px;
	border-bottom: 5px solid #f02b63;
}
ul.main-menu li{
	float: left;
	display: inline;
}
ul.main-menu li a{
    text-decoration: none;
    position: relative;
	color: #1d1d1d;
    margin-left: 10px;
	padding: 10px 46px 10px 14px;
	font-family: 'Arial Black', Gadget, sans-serif;
	font-size: 0.75em;
}
ul.main-menu li a:hover{
    color: #f02b63;
}
ul.main-menu li a:hover:after{
    display: block;
    position: absolute;
    bottom: -1px;
    left: 30%;
    width: 0px;
    height: 0px;
    content: "";
    border: 8px solid transparent;	
    border-bottom: 6px solid #f02b63;
}
ul.main-menu{
	background: #ffffff;
	color: #1d1d1d;
	width:...