JSFiddle - React, Tailwind, and code Playground

by Kriem

HTML

<article class="header"><h1>header</h1></article>
<article class="intro"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></article>
<article class="item">test</article>
<article class="item">test</article>
<article class="item">test</article>
<article class="item"></article>

CSS

body
{
    display: grid;
    grid-template-columns: 1fr minmax(max-content, 150px);
    grid-template-rows: 1fr 2fr 3fr 4fr;
    grid-gap: 5px 20px;
    grid-template-areas:
        "header header"
        "header header"
        "intro intro"
        "content content"
        "footer footer";
}

.item
{
    border: 2px dashed #0ae;
}

.header
{
/*     grid-column: 1/3;
    grid-row: 1/2; */
    grid-area: header;
    background: red;
}

.intro
{
    grid-column: 1/3;
    background: blue;
}