JSFiddle - React, Tailwind, and code Playground

by ansarmon

HTML

<div class="div_top"><h1>Scroll Thumbnails</h1></div>
<div class=" div_scroll clearfix">
	<img src="http://image.shutterstock.com/display_pic_with_logo/2856265/259729697/stock-photo-blue-eyed-cat-259729697.jpg">
    <img src="http://image.shutterstock.com/display_pic_with_logo/2856265/259729697/stock-photo-blue-eyed-cat-259729697.jpg">
    <img src="http://image.shutterstock.com/display_pic_with_logo/2856265/259729697/stock-photo-blue-eyed-cat-259729697.jpg">
    <img src="http://image.shutterstock.com/display_pic_with_logo/2856265/259729697/stock-photo-blue-eyed-cat-259729697.jpg">
    <img src="http://image.shutterstock.com/display_pic_with_logo/2856265/259729697/stock-photo-blue-eyed-cat-259729697.jpg">
    <img src="http://image.shutterstock.com/display_pic_with_logo/2856265/259729697/stock-photo-blue-eyed-cat-259729697.jpg">
</div>
<div class="div_bottom"></div>

CSS

body{
	margin:0;}
	
.div_top{
	width:100%;
	height:auto;
	padding:120px 0;
	background:#d1e78d;}
	
.div_top h1{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	text-align:center;}
	
.div_scroll{
	width:100%;
	height:180px;
	padding:20px 0;
	background:#993;
	overflow:hidden;}
	
.clearfix:before,.clearfix:after{
	content:"";
	display:table;}
	
.clearfix:after{
	clear:both;}
	
.div_scroll img{
	width:260px;
	height:auto;
	float:left;
	}
	
.div_bottom{
	width:100%;
	height:auto;
	padding:120px 0;
	background:#333;}