JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<div id="conti">


  <div id="red"></div>
  <div id="orange"></div>
  <div id="yellow"></div>
  <div id="green"></div>
  <div id="blue"></div>
  <div id="violet"></div>
  <div id="grass"></div>
  <div id="blume1" class="blumen"> </div>
  <div id="blume2" class="blumen"></div>
  <div id="blume3" class="blumen"></div>
  <div id="blute1" class="bluten"></div>
  <div id="blute2" class="bluten"></div>
  <div id="blute3" class="bluten"></div>
  
  
  <div id="sonne"></div>
  <div id="sonne1" class="sonne"></div>
  <div id="sonne2" class="sonne"></div>
  <div id="sonne3" class="sonne"></div>
  <div id="sonne4" class="sonne"></div>
  <div id="sonne5" class="sonne"></div>
  <div id="sonne6" class="sonne"></div>
  <div id="sonne7" class="sonne"></div>
</div>

CSS

#conti {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 420px;
  height: 220px;
  background: black;
}

#red {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 200px;
  border-radius: 200px 200px 0 0;
  border: 10px solid red;
}

#orange {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 380px;
  height: 190px;
  border-radius: 190px 190px 0 0;
  border: 10px solid orange;
}

#yellow {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 360px;
  height: 180px;
  border-radius: 180px 180px 0 0;
  border: 10px solid yellow;
}

#green {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 340px;
  height: 170px;
  border-radius: 170px 170px 0 0;
  border: 10px solid green;
}

#blue {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 320px;
  height: 160px;
  border-radius: 160px 160px 0 0;
  border: 10px solid blue;
}

#violet {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 300px;
  height: 150px;
  border-radius: 150px 150px 0 0;
  border: 10px solid violet;
}






#grass {
  position: absolute;
  bottom: 0px;
  left: 60px;
  width: 280px;
  height: 0px;
  border-radius: 10px 10px 0 0;
  border: 10px solid green;
}
.blumen{
  position: absolute;
  width: 5px;
  height: 100px;
  left: 200px;
  bottom: 0px;
  background: green;
  transform-origin: 100% 100%;
}
#blume2{
  height: 80px;
  transform: rotate(20deg);
}
#blume3{
  height: 80px;
  transform: rotate(-20deg);
}
.bluten{
  position: absolute;
  width: 20px;
  height: 20px;
  border: 5px solid red;
  border-radius: 50%;
}
#blute1 {
  top: 115px;
  left: 220px;
}
#blute2 {
  top: 117px;
  left: 160px;
}
#blute3 {
  top: 95px;
  left: 186px;
}
#sonne {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  right: 0px;
  border-radius: 50%;
  background: yellow;
  border-radius: 0 0 0 150px;
}
.sonne{
  position: absolute;
  width: 120px;
  height: 3px;
  top: 0px;
  right: 0px;
  background: yellow;
  transform-origin: 100%...