JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<div class="viewport">

<div style="height: 50px">navbar</div>
<div class="flex-column flex-1">
    <div class="search">search bar</div>
    <div class="flex-row flex-1">
        <div class="flex-2 left">left</div>
        <div class="flex-1 right">
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test test</div>
            <div>test...

CSS

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.viewport {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}

.search {
    flex: 0 0 40px;
    background: #ccc;
}
.left {
    background: #f1f1f1;
}
.right {
    background: #ff0000;
    overflow-y: scroll;
}