JSFiddle - React, Tailwind, and code Playground

by slash197

HTML

<div class="hot-zone">
    <div class="scroller">
        <div class="row">
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/439212e4-5ef7-41cd-8878-af96d485a512_hm0Z5tpRlSzPO97U5e2Q32Y0Xrb.jpg" style="height: 150px;"></div>
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/e68ce54f-79d8-4d43-b98f-73b7d5271745_5z4Bj0zUupF7z4VW0REAdso1uxz.jpg" style="height: 150px;"></div>
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/66df333e-d08f-48a1-b8c1-0ebce14ccc7e_5gJkVIVU7FDp7AfRAbPSvvdbre2.jpg" style="height: 150px;"></div>
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/322ec0fa-3687-4a49-b070-c3b9188d916b_i0t7F6b4R1wURRESAiw9VJNuVoV.jpg" style="height: 150px;"></div>
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/7e7a82e6-0f11-48bb-bed3-48bfaf3b374c_iMkl2Akc1f4CSJCieVwczM4KjZR.jpg" style="height: 150px;"></div>
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/bedbd348-53c3-4765-9c8d-dc462ed7ecf9_gri0DDxsERr6B2sOR1fGLxLpSLx.jpg" style="height: 150px;"></div>
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/c876d47d-f511-4402-9980-5bfc122965c5_tIKFBxBZhSXpIITiiB5Ws8VGXjt.jpg" style="height: 150px;"></div>
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/439212e4-5ef7-41cd-8878-af96d485a512_hm0Z5tpRlSzPO97U5e2Q32Y0Xrb.jpg" style="height: 150px;"></div>
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/e68ce54f-79d8-4d43-b98f-73b7d5271745_5z4Bj0zUupF7z4VW0REAdso1uxz.jpg" style="height: 150px;"></div>
            <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/66df333e-d08f-48a1-b8c1-0ebce14ccc7e_5gJkVIVU7FDp7AfRAbPSvvdbre2.jpg" style="height: 150px;"></div>
            <div...

CSS

.hot-zone {
	width: 500px;
	height: 150px;
	position: relative;
  white-space: nowrap;
  overflow: hidden;
}
	.hot-zone .scroller {
		position: absolute;
		top: 0px;
		left: 0px;
	}
		.hot-zone .scroller .row {
			height: 100%;
		}
			.hot-zone .scroller .row .item {
				display: inline-block;
				vertical-align: top;
				height: 100%;
			}
				.hot-zone .scroller .row .item img {
					max-height: 100%;
					max-width: 100%;
				}