JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div>
<span>navigation</span>
<span>test</span>
<h1>
This is the page title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra ut elit vitae sollicitudin. Vivamus in diam egestas augue congue laoreet vel nec augue. Nam rhoncus diam non imperdiet congue. Quisque nec feugiat lacus. Pellentesque lorem felis, dapibus at libero ac, cursus aliquet orci. Quisque eget nisl maximus, faucibus magna non, dictum sapien. In imperdiet est sed sem fringilla, quis vestibulum ex egestas. Fusce faucibus porta odio at gravida. Maecenas tincidunt posuere ipsum, nec faucibus dui. Mauris suscipit et ex sit amet dignissim. Mauris vehicula in sapien sed rhoncus. Vivamus tempus sapien placerat sem sollicitudin, et sagittis lacus ultrices.
</p>
<em>test</em>
</div>

SCSS

div {
	display: grid;
	grid-template-columns: 5fr 1fr 4fr 3fr 3fr 4fr 1fr 5fr;
	grid-column-gap: 2vw;
}

h1 {
	background: blue;
	grid-column: 3 / 6;
}
p {
	grid-column: 3 / 6;
}
span {
	background-color: red;
	display: block;
	grid-column: 1 / 3;
	grid-row: 2;
	&:first-child {
		grid-row: 1;
	}
}
em {
	background: green;
	grid-column: 7 / 8;
	grid-row: 1 / -1;
}