JSFiddle - React, Tailwind, and code Playground

by pandigity

HTML

<body>
	<div class="sidebar">
		<p>Darkside</p>
	</div>
<div class="main">
  <header>
    <a href="#" id="logo">Dev-day!!</a>
    <ul>
      <li>Denne</li>
      <li>kvelden</li>
      <li>blir</li>
      <li>bra!</li>
    </ul>
  </header>
  <section id="info">
    <div id="contentInfo">
      <h1>Nyttig info for kvelden</h1>
      <p>Vi skal ha det gøy! Det blir burger, espresso martini, øl og shufflesboard!</p>
    </div>
  </section>
	  <section id="info2">
    <div id="contentInfo2">
      <h1>Nyttig info for kvelden</h1>
      <p>Vi skal ha det gøy! Det blir burger, espresso martini, øl og shufflesboard!</p>
    </div>
  </section>
	</div>
	<footer>
		<p>This is a foot!</p>
	</footer>
</body>

CSS

body, html { height: 100%; }
body {
  margin: 0;
	display:grid;
	grid-template-columns: 12% auto;
	grid-template-rows: auto 50px;
	grid-template-areas:
		"sidebar right"
		"footer footer";
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
  float: right;
}

ul li {
  color: black;
  display: inline;
  padding: 15px;
}

#logo {
  padding: 15px;
  margin-left: 15px;
  background-color: #f3f1c7;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  color: black;
}

header {
  background-color: lightblue;
	display: grid;
	grid-template-columns: repeat(2, auto);
}


section#info {
  background-color: fuchsia;
  border-top: 5px solid black;
	grid-row: 3;
}
section#info2 {
	background-color: green;
	border-top: 5px solid black;
	grid-row: 2;
}

#rest {
	background-color:
	grid-row: 4;
}
.sidebar {
	background-color: yellow;
	grid-area: sidebar;
}
footer {
	grid-area: footer;
	background-color: lightgray;
}
.main {
	display: grid;
	grid-area: right;
	grid-template-rows: 51px 40% 40%;
}