JSFiddle - React, Tailwind, and code Playground

HTML

<section id="slide">
		<div class="ban">
	<div class="flexslider">
		<ul class="slides">

			<li>
				<img src="img/1.jpg" alt="123">
			
			</li>

			<li>
				<img src="img/2.jpg" alt="123">
			</li>

			<li>
				<img src="img/3.jpg" alt="123">
	
			</li>
		
		</ul>
	</div>

	</div>
		
    </section>
	<div class="flexslider">
		<ul class="slides">

			<li>
				<img src="img/1.jpg" alt="">
			
			</li>

			<li>
				<img src="img/2.jpg" alt="">
			</li>

			<li>
				<img src="img/3.jpg" alt="">
	
			</li>
		
		</ul>
	</div>

	</div>
		
    </section>

CSS

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


html,body {
    height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
    padding: 0;
    margin: 0;
    background-color: #FF0004;;
}

body {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   width: 100%;
   height: 100%;
}

body > main {
    flex: 1; /*ocupa todo espaço menos a altura do footer */
}

body > footer {
    min-height: 160	px;
    background: #0c0c0c;
    color: #fff;
}

.ban  {
    overflow: hidden;
    min-height: 330px;
    background-image: url(../../image/BannerWithText.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-size: cover;

}


/* SLIDER ==============================*/



.flexslider{
	height: 100%;
	max-width: 800px;
	margin-bottom: 30px;
	margin: 50px auto;
	display: flex;
	flex-direction: column;

	position: relative;
}

.flexslider ul li {
list-style: none;
}

.slides,
.slides li,
.slides li img{
	width: 100%;
}

.slides li{
	margin-bottom: -5px;
}



/* RESPONSIVE ========== */


@media screen and (max-width: 600px){

	.flexslider{
		width: 100%;
		border-radius: 0px;
		border: none;
	}

	.slides li{
		overflow: hidden;
	}

	.slides li img{
		width: 600px;
	}


}

@media screen and (max-width: 450px){
	.slides li img{
		transform: translateX(-90px);
	}


}