JSFiddle - React, Tailwind, and code Playground

by Sparrow Squire

HTML

<div id="wrapper">
     <h3>Heading</h3>

    <div id="panel-wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
    </div>
    <div id="button-panel">
        <div id="blue">Button Text</div>
        <div id="green">Button Text</div>
    </div>
    <div id="panel"></div>
</div>

CSS

/*
Filling styles
*/
 #wrapper {
    width:100%;
    border: 1px solid red;
    padding:4px;
    box-sizing: border-box;
    position:relative;
}
.box {
    height:113px;
    width:79px;
    background: purple;
    margin: 10px;
    display:inline-block
}
/*
Trial styles
*/
 #panel {
    width: 100%;
    height: 80px;
    background:grey;
    position:absolute;
    top:90px;
    z-index: -1
}
#panel-wrapper {
    width:79.5%;
    border: 1px solid blue;
    overflow:hidden;
    display:inline-block
}
#button-panel {
    width:15%;
    min-width:142px;
    height:130px;
    border: 1px solid green;
    overflow:hidden;
    display:inline-block
}


/*
Media Queries
*/
@media all and (max-width: 768px) {
     #wrapper {
        background:teal
    }
}