JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Recommend_wrap">
		<div class="Img"></div><!-- Img -->
        <div class="Img2"></div><!-- Img2 -->
		<div class="Img3"></div><!-- Img3 -->
        <div class="Img4"></div><!-- Img4 -->
        <div class="arrowPrev"></div><!-- arrow -->
        <div class="arrowNext"></div><!-- arrow -->
   </div><!-- Recommend_wrap -->
    <div style=" clear:both; position:relative;"></div>
    <div class="footer_bg"></div><!-- footer_bg -->

CSS

.Recommend_wrap {
	width:1140px;
	position:relative;
	margin:0 auto;
}
.Img {
	width:250px;
	height:320px;
	background:#ccc;
	position:absolute;
}
.Img2 {
	width:250px;
	height:320px;
	background:#ccc;
	position:absolute;
	left:297px;
}
.Img3 {
	width:250px;
	height:320px;
	background:#ccc;
	position:absolute;
	left:593px;
}
.Img4 {
	width:250px;
	height:320px;
	background:#ccc;
	position:absolute;
	left:890px;
}
.arrowPrev {
	width:50px;
	height:100px;
	background:#f00;
	position:absolute;
	top:100px;
}
.arrowNext {
	width:50px;
	height:100px;
	background:#f00;
	position:absolute;
	top:100px;
	right:0;
}
.footer_bg {
	background:#000;
	height:220px;  
}