JSFiddle - React, Tailwind, and code Playground
by Ajay Bhosale
HTML
<div class="box">
<div class="pldeskcontainer">
<svg class="desk" viewBox="0 0 300 150">
<path d="M 240 0
L 300 0
L 300 150
L 150 150
L 150 100
L 240 100
Z
" fill="none" stroke="blue" stroke-width="1px" />
<rect
x="90" y ="0"
width="60"
height="150"
fill="none" stroke="blue" stroke-width="1px"
/>
</svg>
</div>
<div class="deskcontainer">
<svg class="desk" viewBox="0 0 150 150">
<path d="M 0 0
L 0 150
L 60 150
L 60 50
L 150 50
L 150 0
Z
" fill="none" stroke="blue" stroke-width="1" />
</svg>
</div>
<div class="deskcontainer">
<svg class="desk" viewBox="0 0 150 150">
<path d="M 0 0
L 150 0
L 150 150
L 90 150
L 90 50
L 0 50
Z
" fill="none" stroke="blue" stroke-width="1" />
</svg>
</div>
</div>
<div class="box">
<div class="deskcontainer">
<svg class="desk" viewBox="0 0 150 150">
<path d="M 0 0
L 60 0
L 60 100
L 150 100
L 150 150
L 0 150
Z
" fill="none" stroke="blue" stroke-width="1px" />
</svg>
</div>
<div class="deskcontainer">
<svg class="desk" viewBox="0 0 150 150">
<path d="M 90 0
L 150 0
L 150 150
L 0 150
L 0 100
L 90 100
Z
" fill="none" stroke="blue" stroke-width="1px" />
</svg>
</div>
<div class="deskcontainer">
<svg class="desk" viewBox="0 0 150 150">
<path d="M 0 0
L 0 150
L 60 150
L 60...
CSS
.box {
width:300px;
height:300px
}
.deskcontainer {
width:50%;
height:50%;
float:left
}
.pldeskcontainer {
width:100%;
height:50%;
float:left
}
.desk {
width:100%;
height:100%;
border:0px solid red
}