JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>

<body>
	<div class="container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
		<div>11</div>
		<div>12</div>
		<div>13</div>
		<div>14</div>
		<div>15</div>

	</div>
</body>
</html>

CSS

body {
  background: #000;
}

.container {
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(4, 1fr);
  gap: 10px;
  }	 
.container div {
		border: 1px solid #fff;
		border-radius: 7px;
		padding: 1em;
		text-align: center;
		color: #fff;
   }

.container div:first-of-type {
  grid-row-start: 1;
  grid-row-end: 3;
}