JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<!--<svg width="400" height="400">
  <rect x="100" y="100" width="200" height="200" fill="#1B75BC" fill-opacity="0.8" rx="20" ry="20" />
  <rect id="level" x="100" y="100" width="200" height="50" fill="#996633" fill-opacity="0.8" rx="20" ry="20" />
  <circle cx="200" cy="200" r="59" fill="white" />
</svg>-->
<div id="container">
<div id="sea"></div>
<div id="land"></div>
</div>

CSS

#container {
    width:200px;
    height:200px;
    float:left;
    padding:10px
}
#sea {
    background-color:#1B75BC;
    width:200px;
    height:150px;
    float:left;
    padding:10px
}
#land {
    background-color:#996633;
    width:200px;
    height:50px;
    float:left;
    padding:10px
}