JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<div id="dot"><p>DK</div>
<div id="dot2"></div>
<div id="loop"><p>Dank lick</p></div>

CSS

body {
    font-family: "Comic Sans MS";
}
p {
    font-size: 1em;
}
#dot {
    position: absolute;
    left: 49%;
    top: 61%;
    width: 10%;
    height: 10%;
    background-color:  #100000;
    text-align:center;
    padding-top: 0px;
}
#replaceButton {
   margin-top: 25px;
   width: 100px;
}
#dot2 {
      position: absolute;
      left: 47%;
      top: 50%;
      width: 10%;
      height: 10%;
      background-color:  #100000;
}      
#loop {
    position: absolute;
    left: 25%;
    top: 5%;
    width: 40%;
    height: 40%;
    background-color:  #900000;
}

JavaScript

document.getElementById("dot")
    .style.backgroundColor = "yellow";
document.getElementById("dot2")
   .style.transform = "rotate(23deg)";
alert("welcome to how to to spaek dank")