JSFiddle - React, Tailwind, and code Playground

HTML

<!--
    notice the images are 300px tall.
    Even though the width of the images are affected by the flex layout, the height stays at 300px.
-->
<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
    flex: 1;
}
.slider img {
    width: 100%;
    
    align-self: flex-start; 
}