JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title></title>
</head>
<body>
<div id="grey">
</div>
<div id="blue">
</div>
<div id="red">
</div>
</div>
</body>
</html>

CSS

body{
	display: grid;
	grid-template-areas:
	"grey blue red";
}
#grey{
	grid-area: grey;
	height: 120px;
	width: 120px;
	background-color: grey;

}
#blue{
	grid-area: blue;
	height: 120px;
	width: 120px;
	background-color: blue;

}
#red{
	grid-area: red;
	height: 120px;
	width: 120px;
	background-color: red;

}
@media only screen and (max-width: 768px) {
    body{
	display: grid;
	grid-template-areas:
	"grey"
	"blue"
	"red"
}
}