JSFiddle - React, Tailwind, and code Playground

HTML

<container>
  <slide style="background-image: url(https://cdn.dribbble.com/users/729829/screenshots/4185141/galshir-cactus-coffee.png)">1</slide>
	<slide style="background-image: url(https://cdn.dribbble.com/users/729829/screenshots/6146136/galshir-tea-biscuit_2x.png)">2</slide>
  <slide style="background: url(https://cdn.dribbble.com/users/729829/screenshots/4185141/galshir-cactus-coffee.png)">3</slide>
	<slide style="background: url(https://cdn.dribbble.com/users/729829/screenshots/6146136/galshir-tea-biscuit_2x.png)">4</slide>
</container>

CSS

container {
	display: flex;
	flex-direction: row;
	margin: auto;
	width: 612px;
	outline: 1px solid black;
	height: 306px;
}

slide{
	flex: 1;
/*	height: 100%;*/
	background-position: center;
	background-size: cover;
	background-origin: content-box;
	background-clip: border-box;

	text-align: left;/* Text */
	padding: 2px 0 0 2px;
	color:rgba(0, 0, 0, 0.5);
	
	transition: all .67s ease;
}

container slide:hover{flex: 15}