JSFiddle - React, Tailwind, and code Playground

by Rashedul Hasan

HTML

<div id="image_slider_right">
			
				<div id="sliderup">
				   <figure>
						<div class="img_up"> 
							<div class="divimgslideup">
								<img src="imgSlider_left/1.jpg" alt="" height="100px" width="100px" > 
							</div>
							
							<div class="divimgslideup_txt" >
								<strong>Make the Best Choice</strong>
								<p>With 17 unique 1, 2 & 3 bedroom floor plans available, tap to find the </p>
							</div>
						</div>
						
						<div class="img_up"> 
							<div class="divimgslideup">
								<img src="imgSlider_left/2.jpg" alt="" height="100px" width="100px"> 
							</div>
								
							<div class="divimgslideup_txt">
								<strong>Get Comfortable</strong>
								<p>Quality and exceptional value are foundations of our philosophy. Satisfaction with your home is our </p>
							</div>
						</div>
						
				   	<figure>
				</div>
			</div>
			
		</div>

CSS

#image_slider_right
{
	background-color:#CCFF00;
	width:50%;
	float:left;
	height:250px;
	margin:50px 0 0 50px;;
	
}


/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
  	0% { top: 0%; }
	20% { top: -0%; }
	25% { top: -20%; }
	45% { top: -25%; }
	50% { top: -45%; }
	70% { top: -50%; }
	75% { top: -70%; }
	95% { top: -75%; }
	100% { top: -100%; }
}

/* Standard syntax */
@keyframes mymove {
 	0% { top: 0%; }
	20% { top: -0%; }
	25% { top: -20%; }
	45% { top: -25%; }
	50% { top: -45%; }
	70% { top: -50%; }
	75% { top: -70%; }
	95% { top: -75%; }
	100% { top: -100%; }
}


div#sliderup { overflow: hidden; position:relative;height:100%; margin-left:10px;  width:98%;}
div#sliderup figure .img_up {width: 98%;height:100%; float: left; margin-bottom:10px; position:relative; }
div#sliderup figure { 
  position: relative;
  width: 98%;
  margin: 0;
  text-align: left;
  font-size: 0;
  animation: 20s mymove infinite; 
}


.divimgslideup
{
	float:left;
	width:38%;
}

.divimgslideup_txt{
float:left;
width:58%;
}