JSFiddle - React, Tailwind, and code Playground

by JulesMu

HTML

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="is-app">

    <header class="is-header"></header>

    <main class="is-main">
        <aside class="is-sidebar"></aside>
        <div class="is-content">
            <div class="is-content-inner">
                <div class="table-responsive">
                    <table class="table table-borderless table-dark">
                        <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>Mark</td>
                      ...

CSS

body, html {
    margin: 0;
}

.is-app {
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    background: #ccc;
}

.is-header {
    background: #000;
    height: 45px;
}

.is-main {
    display: flex;
}

.is-sidebar {
    width: 300px;
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 0;
    height: 400px;
    background: red;

}

.is-content {
    padding: 20px;
    flex: 1;
}

.is-content-inner {
    background: #ccc;
    width: 100%;
    height: 100%;
}

.is-footer {
    background: #000;
    height: 45px;
}

.is-table-wrap {
    overflow-y: auto;
}