JSFiddle - React, Tailwind, and code Playground

by poztin

HTML

<html>
    <body> 
        <div class="fill flex-container-row">
            <div class="content flex-item">
                <div>
                    <div class="item">Item1</div>
                    <div class="item">Item2</div>
                    <div class="item">Item3</div>
                </div>
            </div>
            <div class="sidebar">
                Sidebar
            </div>
        </div>        
    </body>
</html>

CSS

html, body {
    height:100%;
}

.fill { 
    min-height: 100%;
	height:100%;
}

.flex-container-column 
{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.flex-container-row 
{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.flex-item
{
    -webkit-flex: 1;
    flex: 1;
}

.content
{
     background-color:lightblue; 
    overflow:auto;
}

.sidebar
{
    background-color:salmon;
    width:200px;
}

.item
{
    background-color:lightgreen;
    margin:10px;
    height:100px;
}