JSFiddle - React, Tailwind, and code Playground

by Ajay Bhosale

HTML

<div class="glass">
    <svg style="width:1312px;height:2772px;background-color:green;left:-300px;top:-27px;position:absolute;"
     viewBox="0 0 656 1386">
    <rect x="23" y="23" width="610" height="1340"
          style="stroke:#fff;stroke-width:2;fill:none;"/>
    <line x1="69" y1="23" x2="69" y2="1363" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="587" y1="23" x2="587" y2="1363" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="328" y1="23" x2="328" y2="495" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="328" y1="891" x2="328" y2="1363" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="23" y1="99" x2="633" y2="99" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="23" y1="495" x2="633" y2="495" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="23" y1="693" x2="633" y2="693" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="23" y1="891" x2="633" y2="891" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="23" y1="1287" x2="633" y2="1287" 
          style="stroke:#fff;stroke-width:2" />
   </svg>
</div>
<div class="con1">
<svg style="width:100%;height:100%;background-color:green"
     preserveAspectRatio ="xMidYMid meet" 
     viewBox="0 0 656 1386">
    <rect x="23" y="23" width="610" height="1340"
          style="stroke:#fff;stroke-width:2;fill:none;"/>
    <line x1="69" y1="23" x2="69" y2="1363" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="587" y1="23" x2="587" y2="1363" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="328" y1="23" x2="328" y2="495" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="328" y1="891" x2="328" y2="1363" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="23" y1="99" x2="633" y2="99" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="23" y1="495" x2="633" y2="495" 
          style="stroke:#fff;stroke-width:2" />
    <line x1="23" y1="693" x2="633" y2="693"...

CSS

.glass {
    position:absolute;
    left:50px;
    top:50px;
    background-color: green;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border-style:solid;
    border-color: yellow;
    border-width:5px;
    overflow:hidden;
}
.con1{
    width:328px;
    height:693px;
    border:1px solid red;
}
.con2{
    width:693px;
    height:328px;
    border:1px solid red;
}