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">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    width: 25%;
    margin: 0 5px;
}

JavaScript

* {margin: 0; padding: 0;}
.slider {
  font-size: 0;
}
.slider img {
  margin-right: 10px;
  width: calc(100% /4  - 7.5px);
}

.slider img:last-of-type {
  margin-right: 0;
}