JSFiddle - React, Tailwind, and code Playground

by Davide De Santis

HTML

<main>
        <div style="background: red;">
            A
        </div>

        <header class="filter-compact">
            <div id="headerWrapper">
                <nav>B</nav>
                <span id="toggleFilter"></span>
                <div id="filterContainer">
                    C
                </div>
            </div>
            <div id="clipboardContainer">D</div>
        </header>

        <div id="contentWrapper">
            <div id="contentLeftWrapper">
                <div id="headerLeftContainer">E</div>
                <div id="contentLeftContainer" style="background-color: yellow;">
                    F START<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    F END
                </div>
                <div id="footerLeftContainer">G</div>
            </div>
            <div id="contentRightWrapper">
                <div id="headerRightContainer">H</div>
                <div id="contentRightContainer" style="background-color: yellow;">
                    H START<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
         ...

CSS

html, body {
            height: 100%;
            width: 100%;
        }

        body {
            padding: 0;
            margin: 0;
        }

        main {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: stretch;
            align-items: stretch;
            width: 1200px;
            height: 100%;
            margin: 0 auto;
        }

        header {
            display: flex;
            flex-wrap: nowrap;
            min-height: 84px;
            height: 175px;
            max-height: 175px;
            flex: 1 0 auto;
            position: relative;
        }

            header #headerWrapper {
                display: flex;
                flex-direction: column;
                flex: 1 0 auto;
                background-color: magenta;
                overflow: hidden;
            }

                header #headerWrapper nav {
                    min-height: 40px;
                    height: 40px;
                    max-height: 40px;
                    background-color: green;
                    overflow: hidden;
                }

                header #headerWrapper #toggleFilter {
                    display: none;
                    position: absolute;
                    right: 195px;
                    bottom: 0px;
                    width: 16px;
                    height: 38px;
                    background-color: red;
                }

                header #headerWrapper #filterContainer {
                    min-height: 44px;
                    height: 135px;
                    max-height: 135px;
                    background-color: gray;
                    flex: 1 0 auto;
                    overflow: hidden;
                }

            header #clipboardContainer {
                width: 175px;
                height: 175px;
                background-color: blue;
                overflow: hidden;
                -webkit-transition: height 0.2s;
 ...