JSFiddle - React, Tailwind, and code Playground

by garalimedkarim

HTML

<div class="container">
  <div class="header">
     Header
  </div>

  <div class="body">
    <div class="left-sidebar"></div>
    <div class="main">
      <div class="content">
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
      </div>
    </div>
    <div class="right-sidebar"></div>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  background-color: red;
}

.container {
  background-color: cyan;
  height: 20rem;
  
  display: flex;
	flex-flow: column nowrap;
}

.header {
	flex: 0 0 2rem;
	background-color: bisque;
}

.body {
	background-color: green;
	flex: 1;
	overflow: auto;

	display: flex;
	flex-flow: row nowrap;
}

.left-sidebar {
  background-color: blueviolet;
  flex: 0 0 25%;
}

.main {
  background-color: blue;
  flex: 0 0 50%;
}

.right-sidebar {
  background-color: black;
  flex: 0 0 25%;
}