JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="slides">
        <div class="slides_container">
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/400x100/">
            </div>
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/400x100/">
            </div>
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/400x100/">
            </div>
        </div>
    </div>
</div>

CSS

#wrapper {
    max-width: 600px;
    margin: 0 auto;
    overflow:hidden;
    border:solid 1px #000;
}

#wrapper .slides_container{
    width:600px;
    position:relative;
    left:50%;
    margin-left:-300px;
}
#wrapper img{
    display:block;
    margin: 2px auto;
}