JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Recommend">
    <div class="nav">
    	<ul>
            <li><div class=hvr>推薦商品</div></li>
            <li><div class=hvr>猜你喜歡</div></li>
            <li><div class=hvr>瀏覽過的商品</div></li>
        </ul>
    </div>
    <div class="line"></div>
    <div class="Grid_ProductImg">
    	<div class="Product1">
        <a href="#"><img src="images/Recommended_ProductImg.jpg" width="250" height="320" /></a>
        <div class="txt link01"><a href="#">字母數字牛仔無袖襯衫字母數字牛襯衫</a></div><!-- txt -->
        <div class="price">NT$5,603</div><!-- txt -->
        </div><!-- Product1 -->	
        <div class="Product1">
        <a href="#"><img src="images/Recommended_ProductImg.jpg" width="250" height="320" /></a>
        <div class="txt link01"><a href="#">字母數字牛仔無袖襯衫字母數字牛襯衫</a></div><!-- txt -->
        <div class="price">NT$5,603</div><!-- txt -->
        </div><!-- Product1 -->	
        <div class="Product1">
        <a href="#"><img src="images/Recommended_ProductImg.jpg" width="250" height="320" /></a>
        <div class="txt link01"><a href="#">字母數字牛仔無袖襯衫字母數字牛襯衫</a></div><!-- txt -->
        <div class="price">NT$5,603</div><!-- txt -->
        </div><!-- Product1 -->	
        <div class="Product2">
        <a href="#"><img src="images/Recommended_ProductImg.jpg" width="250" height="320" /></a>
        <div class="txt link01"><a href="#">字母數字牛仔無袖襯衫字母數字牛襯衫</a></div><!-- txt -->
        <div class="price">NT$5,603</div><!-- txt -->
        </div><!-- Product2 -->	
        <div style="clear:both"></div>
    </div><!-- Grid_ProductImg -->
    <div class="wrap">
    <div class="prevBtn"></div><!-- prevBtn -->
    <div class="nextBtn"></div><!-- nextBtn --> 
    </div>
    <div style="clear:both"></div>
    </div><!-- Recommend -->
    <div class="footer_bg">
    	<div class="wrap">
        	<div class="icons">
                <div class="logo"></div><!-- wrap -->
                <div class="btn">
                <ul>
                    <li><a href="#"><img...

CSS

/*-----------------------Recommend------------------- */
.Recommend {
	width:1140px;
	margin:100px auto;
	font-size:13px;
}
.Recommend ul {
	margin:0 auto;
	list-style:none;
	padding:0;
	margin-left:-40px;
	height:20px;
}
.Recommend li {
	display:inline-block;
	padding:0;
	text-transform:uppercase;
	text-align:center;
	width: 100px;
	color:#999;
	padding:0 20px;
}
.hvr:hover {
	color: #000;
	width: 100px;
	height:20px;
	border-bottom:4px solid #000;
	cursor: pointer;
           }
.Recommend .line {
	border-bottom:1px solid #999;
}
.Recommend .Grid_ProductImg {
	margin-top:40px;
	position:absolute;
}
.Product1 {
	float:left;
	margin-right:46px;
}
.Product2 {
	float:right;
}
.txt {
	width:230px;
	text-align:center;
	margin-top:20px;
	line-height:120%;
	font-size:13px;
	padding:0 10px;
}
.price {
	width:230px;
	text-align:center;
	margin-top:10px;
	font-size:13px;
}
.Recommend .wrap {
	width:1140px;
	position:absolute;
}
.Recommend .prevBtn {
	background:url(../images/btn_LittlePrev.png);
	width:26px;
	height:53px;
	position:absolute;
	margin-top:170px;
	cursor: pointer;
	opacity:0.5;/*其他浏览器,透明度50%*/
}
.Recommend .prevBtn:hover {
	width:26px;
	height:53px;
	position:absolute;
	margin-top:170px;
	cursor: pointer;
	opacity:1;/*其他浏览器,透明度50%*/
}
.Recommend .nextBtn {
	background:url(../images/btn_LittleNext.png);
	width:26px;
	height:53px;
	position:absolute;
	margin-top:170px;
	cursor: pointer;
	opacity:0.5;/*其他浏览器,透明度50%*/
	right:0;
}
.Recommend .nextBtn:hover {
	width:26px;
	height:53px;
	position:absolute;
	margin-top:170px;
	cursor: pointer;
	opacity:1;/*其他浏览器,透明度50%*/
	right:0;
}
/*-----------------------footer------------------- */
.footer_bg {
	background:#000;
	height:220px;
	margin-top:100px;
  
}
.footer_bg .wrap {
	width:1140px;
	padding:40px 0 0 0;
	margin:0 auto;
	font-size:13px;
}
.footer_bg .wrap .icons {
	width:230px;
	float:left;
}
.footer_bg .wrap .icons .logo {
	background:url(../images/logo.png);
	width:151px;
	height:30px;
}
.footer_bg .wrap .icons...