JSFiddle - React, Tailwind, and code Playground

by Oussama ELGOUMRI

HTML

<link rel="stylesheet" href="style.css">
<header></header>
<div class="left-bar"></div>
<div class="container">
    <div class="slider"></div>
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</div>
<div class="right-bar"></div>

CSS

{
    position: relative;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 100px;
    background: lightgreen;
}

.left-bar {
    position: absolute;
    top: 100px;
    bottom: 0;
    width: 200px;
    background: blue;
}

.right-bar {
    position: absolute;
    right: 0;
    width: 200px;
    background-color: blue;
    bottom: 0;
    top: 100px;
}

.container {
    position: absolute;
    top: 100px;
    left: 200px;
    right: 200px;
    bottom: 0;
}

.container .slider {
    width: 100%;
    height: 50%;
    background: red;
}

.container .box-1 {
    width: 33.3%;
    background-color: black;
    position: absolute;
    top: 50%;
    bottom: 0;
}

.container .box-2 {
    width: 33.3%;
    background-color: green;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 33.3%;
}

.container .box-3 {
    width: 33.4%;
    background-color: yellow;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 66.6%;
}