JSFiddle - React, Tailwind, and code Playground
by elcoyote67
HTML
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div style="clear:both;"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div style="clear:both;"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
<div style="clear:both;"></div>
<div class="box box10"></div>
<div class="box box11"></div>
<div class="box box12"></div>
<div style="clear:both;"></div>
<div class="box box13"></div>
<div class="box box14"></div>
<div class="box box15"></div>
<div style="clear:both;"></div>CSS
/*red box*/
.box1 {float: left; border-radius: 4px 0 0 4px; width: 20px;height: 44px;background-color: #EDB4AD; border-top: #FDC6B6 1px solid; border-left: #ED908A 1px solid;border-bottom: #E28072 1px solid; border-right: #EE9C8F 1px solid; }
.box2 { float: left; width: 550px;height: 45px; border-bottom: 1px solid #CCCCD2; background-color: #fff;}
.box3 {float: left; border-radius: 0 4px 4px 0; width: 20px;height: 44px;background-color: #EDB4AD; border-top: #FDC6B6 1px solid; border-right: #ED908A 1px solid;border-bottom: #E28072 1px solid; border-left: #EE9C8F 1px solid; }
/*orange box*/
.box4 {float: left; border-radius: 4px 0 0 4px; width: 20px;height: 44px;background-color: #F0C19A; border-top: #FBC282 1px solid; border-left: #E29551 1px solid;border-bottom: #E08D43 1px solid; border-right: #E8A971 1px solid; }
.box5 { float: left; width: 550px;height: 45px; border-bottom: 1px solid #CCCCD2; background-color: #fff;}
.box6 {float: left; border-radius: 0 4px 4px 0; width: 20px;height: 44px;background-color: #F0C19A; border-top: #FBC282 1px solid; border-right: #E29551 1px solid;border-bottom: #E08D43 1px solid; border-left: #E8A971 1px solid; }
/*green box*/
.box7 {float: left; border-radius: 4px 0 0 4px; width: 20px;height: 44px;background-color: #C0DDBA; border-top: #CDEECC 1px solid; border-left: #94CB7A 1px solid;border-bottom: #87BB83 1px solid; border-right: #8FCE74 1px solid; }
.box8 { float: left; width: 550px;height: 45px; border-bottom: 1px solid #CCCCD2; background-color: #fff;}
.box9 {float: left; border-radius: 0 4px 4px 0; width: 20px;height: 44px;background-color: #C0DDBA; border-top: #CDEECC 1px solid; border-right: #94CB7A 1px solid;border-bottom: #87BB83 1px solid; border-left: #8FCE74 1px solid; }
/*blue box*/
.box10 {float: left; border-radius: 4px 0 0 4px; width: 20px;height: 44px;background-color: #BDCDDE; border-top: #C9DCED 1px solid; border-left: #A2BAD4 1px solid;border-bottom: #87BB83 1px solid; border-right: #8CB5D1 1px solid;...