JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
	<div class="card">
		<div>1</div>
	</div>
	<div class="card">
		<div>2</div>
	</div>
	<div class="card">
		<div>3</div>
	</div>
	<div class="card">
		<div>4</div>
	</div>
</div>

<div class="cards">
	<div class="card">
		<div>1</div>
	</div>
	<div class="card">
		<div>2</div>
	</div>
	<div class="card">
		<div>3</div>
	</div>
	<div class="card">
		<div>4</div>
	</div>
</div>

CSS

.block {
	display: flex;
	background-color: coral;
}

.card {
	flex: 1;
}

.block > div {
	height: 10rem;
	background-color: gray;
}

.cards {
	display: flex;
	background-color: coral;
}

.cards div {
	margin: .5rem;
	background-color: deepskyblue;
	height: 10rem;
}

.cards div div {
	background-color: deeppink;
}