JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="slideshowWrapper">
        <ul id="slideshow">
            <li><img src="http://placehold.it/150x450" alt="Dummy 1" /></li>
            <li><img src="http://placehold.it/100x450" alt="Dummy 2" /></li>
        </ul>
    </div>
</body>

CSS

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
  position: relative;
    margin: 0 auto;
}

ul#slideshow li {
    position: relative;
    /* left: 50%; */
    display: block;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}