JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<div class="d">
    <div class="e"></div>
    <div class="f"></div>
    <div class="j"></div>
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
    </div>
    <div class="g">
        <div class="h"></div>
        <div class="i"></div>
    </div>
</div>

CSS

.a{width: 250px; height: 185px; border: 0px solid green; margin: 30px 0px 0px 50px;}
.b{width: 250px; height:  35px; border: 1px solid orange;}
.c{width: 250px; height: 150px; border: 1px solid orange;}
.d{width: 700px; height: 500px; border: 0px solid red;}
.e{width: 700px; height:  50px; border: 1px solid orange;}
.f{width:  30px; height:  45px; border-left: 1px solid; border-bottom: 1px solid;
        border-color:orange; position: fixed; margin: 0px 0px 0px 20px;}
.g{width: 250px; height: 185px; border: 0px solid green; margin: 30px 0px 0px 50px;}
.h{width: 250px; height:  35px; border: 1px solid orange;}
.i{width: 250px; height: 150px; border: 1px solid orange;}
.j{width:  30px; height:  260px; border-left: 1px solid; border-bottom: 1px solid;
        border-color:orange; position: fixed; margin: 0px 0px 0px 20px;}