JSFiddle - React, Tailwind, and code Playground

by mtrantalainen

HTML

<!doctype html>
<body>
<nav class="global">
<div class="menu"><a>A</a></div>
<div class="logo"><a><img><span>B</span></a></div>
<div><a><img>C</a></div>
<div><a><img>D</a></div>
<div><a><img><span>E</span></a></div>
<div><a><img><span>F</span></a></div>
</nav>
<header>page header</header>
<main>main content</main>
<nav>content navigation</nav>
<footer>page footer</footer>
</body>

CSS

html, body
{
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

*
{
  background: rgba(0,0,0,0.1);
}


body
{
	display: grid;
	grid:
		"globalnav	globalnav		globalnav		globalnav"	auto
		"lmargin	header			header			rmargin"	auto
		"lmargin 	nav 			main			rmargin"	minmax(0, 1fr)
		"lmargin 	footer			footer			rmargin"	auto
	/	auto		minmax(10rem,50rem)	minmax(20rem,100rem)	auto;
}

nav.global
{
	grid-area: globalnav;
  display: flex;
}

nav.global a
{
  padding: 1rem;
  margin: 3rem;
}

header
{
	grid-area: header;
}

main
{
  grid-area: main;
}

nav
{
  grid-area: nav;
  background: rgba(0,0,0,0.15);
}

footer
{
  grid-area: footer;
}