JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<div id="demo">
		<section id="examples" class="max-width-example">
			
			<!-- content -->
			<div id="content-1" class="content horizontal-images">
				<ul>
					<li><a href="#" rel="add-content">Add image</a></li>
					<li><a href="#" rel="remove-content">Remove image</a></li>
					<li><img src="http://placehold.it/500x300" /></li>
				</ul>
			</div>
			
		</section>
	</div>

CSS

/* stylesheet for demo and examples */

@import url(http://fonts.googleapis.com/css?family=Lobster+Two:700italic,700);
@import url(http://fonts.googleapis.com/css?family=Oswald:300);

body{
	background-color: #222;
	color: #eee;
	font-size: 14px;
	font-family: "Verdana",Geneva,sans-serif;
	margin: 0;
	padding: 0;
	min-width: 480px;
}

a{
	color: inherit;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

a:hover{
	text-decoration: none;
	color: #fff;
}

h1, h2, h3{
	font-family: "Lobster Two", "Georgia", serif;
	font-weight: 700;
	font-style: italic;
	color: #6bdaea;
}

hr{
	background-color: transparent;
	height: 0;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	border-top: 1px solid rgba(0,0,0,0.9);
	margin: 0;
	clear: both;
}

header, #demo, footer{
	position: relative;
	margin: 0 auto;
	width: 90%;
	padding: 0 30px;
}

header{
	margin-top: 30px;
	margin-bottom: 40px;
}

#demo{ line-height: 20px; }

.logo{
	display: inline-block;
	margin-right: 20px;
}

.logo img{ 
	vertical-align: bottom; 
	border: 0;
}

header hr{ margin-top: 20px; }

.title{
	display: inline-block;
	font-size: 32px;
	vertical-align: middle;
	margin-right: 40px;
	line-height: 24px;
}

.title{ margin-top: 5px; }

nav ul, .callbacks ul, .disable-destroy ul, .show-hide ul, #sortable ul, .dialog ul, .all-themes-switch ul, .scrollTo ul{
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

h1{
	margin: 20px 0;
	color: inherit;
}

img{
	max-width: 100%;
	height: auto;
}

#info p{
	font-size: 12px;
	color: #bbb;
	padding: 6px 15px;
}

.callbacks, .callbacks + p, #examples, .content, .disable-destroy, .show-hide, .dialog, .all-themes-switch, .scrollTo{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

nav, .callbacks, .disable-destroy, .show-hide, .dialog, .all-themes-switch, .scrollTo{ background: #111; }

nav ul li, .callbacks ul li,...

JavaScript

(function($){
			$(window).load(function(){
				
				$("#content-1").mCustomScrollbar({
					axis:"x",
					advanced:{
						autoExpandHorizontalScroll:true
					}
				});
				
				var i=1,
					imgs=["http://placehold.it/500x300.jpg","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300","http://placehold.it/500x300"];
				
				$("a[rel='add-content']").click(function(e){
					e.preventDefault();
					var markup="<li id='img-"+i+"-container'><img src='"+imgs[i]+"' /></li>";
					$(".content .mCSB_container ul").append(markup);
					if(i<imgs.length-1){
						i++
					}else{
						i=0;
					}
				});
				
				$("a[rel='remove-content']").click(function(e){
					e.preventDefault();
					if($(".content .mCSB_container ul li").length<4){return;}
					i--
					if(i<0){i=imgs.length-1;}
					$("#img-"+i+"-container").remove();
				});
				
			});
		})(jQuery);