JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<div id="body"></div>
<div id="body2"></div>
<div id="body3"></div>
<div id="body4"></div>
<div id="body5"></div>
1A


2B

CSS

body {
    font-family: "Comic Sans MS";
}
p {
    font-size: 1em;
}
#body {
     position: absolute;
     left: 25%;
     top: 25%;
     width: 40%;
     height: 40%;
     background-color:  #100000;
     corners: 15%;
}
#body2 {
    position: absolute;
    left: 30%;
    top: 30%;
    width: 5%;
    height: 10%;
    background-color:  rgb(0,0,255);
}
#body3 {
    position: absolute;
    left: 55%;
    top: 30%;
    width: 5%;
    height: 10%;
    background-color:  #FF0000;
}
#body4 {
     position: absolute;
     left: 55%;
     top: 50%;
     width: 5%;
     height: 10%;
     background-color: rgb(255,255,0);
}
#body5 {
     position: absolute;
     left: 30%;
     top: 50%;
     width: 5%;
     height: 10%;
     background-color: rgb(0,255,0);
}

JavaScript

alert("Welcome to siaman says")
alert("This press code is 1A and press blue and green")
alert("Press code is 2B press yellow and red")