JSFiddle - React, Tailwind, and code Playground

HTML

<div class="allImagesSlide">
    <div class='slideToPrev'></div>
    <div class="middleSlideContents">
        <div class='image'>
            <img src='http://wscont1.apps.microsoft.com/winstore/1x/b76278a5-f670-4a4e-84fb-db74f2a1af38/Icon.214232.png'/>
        </div>
        <div class='image'>
            <img src='http://wscont1.apps.microsoft.com/winstore/1x/b76278a5-f670-4a4e-84fb-db74f2a1af38/Icon.214232.png'/>
        </div>
        <div class='image'>
            <img src='http://wscont1.apps.microsoft.com/winstore/1x/b76278a5-f670-4a4e-84fb-db74f2a1af38/Icon.214232.png'/>
        </div>
    </div>
    <div class='slideToNext'></div>
</div>

CSS

.allImagesSlide
{
	margin-top: 8px;
	width: 600px;
	height: 200px;
	margin-left: 2px;
	border-radius: 5px;
	box-shadow: rgb(113, 113, 207) 0px 0px 5px;
	background: white;
	padding: 5px;
	clear: both;
}

.slideToPrev
{
	background: rgba(223, 228, 228, 0.49);
	height: 100%;
	width: 6%;
	float: left;
	border-radius: 5px;
}

.middleSlideContents
{
	width: 86%;
	height: 100%;
	border-radius: 5px;
	float: left;
	margin-left: 7px;
    text-align:center;
    display:table;
    table-layout:fixed;
}

.slideToNext
{
	background: rgba(223, 228, 228, 0.49);
	height: 100%;
	width: 6%;
	float: right;
	border-radius: 5px;
}

.image
{
	border-radius: 5px;
	display:inline-block;
	margin-right:5px;
    display:table-cell;
    vertical-align:middle;
}

.image img
{
	cursor:pointer;
	width:150px;
	height:150px;
}