JSFiddle - React, Tailwind, and code Playground

by Vladimir Rybalsky

HTML

<div class="grid">
  <div class="element grid-element-1"></div>
  <div class="element grid-element-2"></div>
  <div class="element grid-element-3"></div>
</div>

CSS

.grid {
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px 100px;
	grid-template-areas:
  "red yellow green"
  "red yellow green"
  "red yellow green";
}

.element {
	
}

.grid-element-1 {
	background: red;
	grid-area: red;
}

.grid-element-2 {
	background: yellow;
	grid-area: yellow;
}

.grid-element-3 {
	background: green;
	grid-area: green;
}