JSFiddle - React, Tailwind, and code Playground

by delux

HTML

<div class="grid-row">

	<div class="item">
		<div class="icon">
			icon
		</div>
		<div class="title">
			<h4>Title</h4>
		</div>
		<span>subtext</span>
	</div>

	<div class="item">
		<div class="icon">
			icon
		</div>
		<div class="title">
			<h4>Title</h4>
		</div>
		<span>subtext</span>
	</div>

	<div class="item">
		<div class="icon">
			icon
		</div>
		<div class="title">
			<h4>Title</h4>
		</div>
		<span>subtext</span>
	</div>

	<div class="item">
		<div class="icon">
			icon
		</div>
		<div class="title">
			<h4>Title</h4>
		</div>
		<span>subtext</span>
	</div>

	<div class="item">
		<div class="icon">
			icon
		</div>
		<div class="title">
			<h4>Title</h4>
		</div>
		<span>subtext</span>
	</div>
	
</div>

CSS

.grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 15px;
}

.item {
    border: 1px solid;
}