JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
	<figure class="gallery__figure">
		<img class="gallery__img" src="https://c.pxhere.com/photos/e8/85/sky_abstract_texture_night_stars_outdoor_galaxy_astronomy-108738.jpg!d">
	</figure>
	<figure class="gallery__figure">
		<img class="gallery__img" src="https://avatars.mds.yandex.net/get-pdb/2838325/aef72c41-18ae-4432-a51f-fa9065b0419c/s1200">
	</figure>
	<figure class="gallery__figure">
		<img class="gallery__img" src="https://avatars.mds.yandex.net/get-pdb/2838325/aef72c41-18ae-4432-a51f-fa9065b0419c/s1200">
	</figure>
	<figure class="gallery__figure">
		<img class="gallery__img" src="https://avatars.mds.yandex.net/get-pdb/2838325/aef72c41-18ae-4432-a51f-fa9065b0419c/s1200">
	</figure>
	<figure class="gallery__figure">
		<img class="gallery__img" src="https://c.pxhere.com/photos/e8/85/sky_abstract_texture_night_stars_outdoor_galaxy_astronomy-108738.jpg!d">
	</figure>
	<figure class="gallery__figure">
		<img class="gallery__img" src="https://avatars.mds.yandex.net/get-pdb/2838325/aef72c41-18ae-4432-a51f-fa9065b0419c/s1200">
	</figure>
	<figure class="gallery__figure">
		<img class="gallery__img" src="https://avatars.mds.yandex.net/get-pdb/2838325/aef72c41-18ae-4432-a51f-fa9065b0419c/s1200">
	</figure>
</div>
<figure class="gallery__figure">
		<img class="gallery__img" src="https://avatars.mds.yandex.net/get-pdb/2838325/aef72c41-18ae-4432-a51f-fa9065b0419c/s1200">
	</figure>

CSS

* {margin:0;padding:0;}
.gallery {
	width:88%;
	margin:30px;
}
.gallery__figure {
	width:33%;
	overflow:hidden;
	max-height:500px;
	float:left;
}
.gallery__img { 
	width:100%;
}