JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<div class="a1">
    <!-- Main Header -->
    <div class="a2"></div>
    
    <!-- Tree Lines -->
    <div class="t1"></div>
    <div class="t2"></div>

    
    <!-- Box Thumbnails-->
    <div class="b1s"></div> <!-- Dummy -->
    
    <div class="t21"></div>
    <div class="t22"></div>
    <div class="b2"></div>
    
    <div class="t31"></div>
    <div class="t32"></div>
    <div class="b3"></div>
    
    <div class="t41"></div>
    <div class="t42"></div>
    <div class="b4"></div>
    
    <!-- Full Box [1]-->
    <div class="t11"></div>
    <div class="t12"></div>
    <div class="b1"> 
        <div class="b11"></div>
        <div class="b12"></div>
    </div>
    
    <div class="d1"></div>
</div>

CSS

.a1{width: 700px; height: 500px; border: 0px solid red;}    /*main div*/
.a2{width: 700px; height:  50px; border: 2px solid orange;} /*top header*/

.t1{width: 250px; height:  20px; border-left: 2px solid; border-bottom: 2px solid;
        border-color:orange; position: fixed; margin: 0px 0px 0px 20px;} /*1st tree line*/

.t2{width: 250px; height: 300px; border-left: 2px solid; border-bottom: 2px solid;
        border-color:orange; position: fixed; margin: 0px 0px 0px 20px;} /*2nd tree line*/

.b1{width: 256px; height: 160px; border: 0px solid green; margin: 92px 0px 0px 50px;} /*box-1-main*/
.b11{width: 256px; height:  32px; border: 2px solid orange;} /*box-1-header*/
.b12{width: 256px; height: 128px; border: 2px solid orange; border-top: 0px;} /*box-1-body*/

.b1s{width: 24px; height: 24px; border: 0px solid orange; margin: 32px 0px 0px 64px; 
        position:fixed;} /* Dummy */
.t11{width: 100px; height:  50px; border-left: 2px solid; border-bottom: 2px solid;
        border-color:orange; position: fixed; margin: 20px 0px 0px 76px;} /*1st tree 1st sub*/
.t12{width: 100px; height:  24px; border-right: 2px solid; border-bottom: 0px solid;
        border-color:orange; position: fixed; margin: 70px 0px 0px 76px;} /*2nd tree 2nd sub*/


.b2{width: 24px; height: 24px; border: 2px solid orange; margin: 32px 0px 0px 128px; 
        position:fixed;} /** Thumbnail 2*/
.t21{width: 1px; height: 12px; border-bottom: 2px solid orange; border-left: 2px solid orange;
        position: fixed; margin: 20px 0px 0px 140px;}

.b3{width: 24px; height: 24px; border: 2px solid orange; margin: 32px 0px 0px 192px;
        position:fixed;}
.t31{width: 1px; height: 12px; border-bottom: 2px solid orange; border-left: 2px solid orange;
        position: fixed; margin: 20px 0px 0px 205px;}

.b4{width: 24px; height: 24px; border: 2px solid orange; margin: 32px 0px 0px 256px; 
    position:fixed;}
.t41{width: 1px; height: 12px; border-bottom: 2px solid orange; border-left: 2px solid orange;
...