JSFiddle - React, Tailwind, and code Playground

by _kdts

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body class="grid">

<header>
    <span>header</span>
</header>

<div class="hero">

  <img src="//picsum.photos/seed/picsum/1200/400" alt="">
</div>

<div class="container">
    <main><span>main</span></main>
    <aside><span>aside</span></aside>
</div>

<footer>
  <span>footer</span>
</footer>
  
</body>
</html>

CSS

*, *::before, *::after{
  box-sizing: border-box;
}

:root{
 --clr-100: red; 
 --clr-200: yellow; 
 --clr-300: green;
}

img{
  max-width: 100%;
}

body{
  margin: 0;
  height: 100vh;
}

.grid{
  display: grid;
  grid-template-areas: 
    "header"
    "hero"
    "container"
    "footer";
  grid-template-rows: auto 1fr 1fr auto;
  /*grid-template-columns: auto;*/
}

.flex{
  display: flex;
}


.grid header{
  grid-area: header;
  background-color: var(--clr-100);
}

.grid .hero{
  grid-area: hero;
   background-color: var(--clr-300);
}

.grid .hero img{
   /*object-fit: fill;*/
}

.grid .container{
  grid-area: container;
   background-color: var(--clr-200);
}

.grid footer{
  grid-area: footer;
  background-color: var(--clr-100);
}

header, footer{
  padding: 20px 0;
}