JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script language="javascript">
        function popup(){
            alert("hello function world");
        }
        
        function hideme(){
         document.getElementById("hideshowbox").style.display = "none";
        }
        function showme(){
        document.getElementById("hideshowbox").style.display = "block";
        }
        function setclassA(){
            document.getElementById("switchstylebox").className="A";
        }
        function setclassB(){
            document.getElementById("switchstylebox").className="B";
        }
        function setclassReset(){
            document.getElementById("switchstylebox").className="";
        }
        function getNameInput() {
            var name = document.getElementById("nameInput").value;
            alert("Hello " + name + ", thanks for entering your name!");
            setNameOnPage(name);
        }
        function setNameOnPage(theName) {
            document.getElementById("nameBox").innerHTML = theName;
        }
        function multiply() {
            var v1 = document.getElementById("value1").value;
            var v2 = document.getElementById("value2").value;
            var answer = v1 * v2;
            document.getElementById("value3").innerHTML = answer;
        
        }
        
        function checkCaptcha() {
            var input = document.getElementById("captchaInput");
            var result = document.getElementById("captchaResult");
            /* notice the 'toLowerCase()' to make it case-insensitive */
            if (input.value.toLowerCase() == "ifhkfp") {
                /* user entered the correct code */
                result.className = "captchaCorrect";
                result.innerHTML = "You entered the correct characters. That means you are probably human.";
            } else {
                /* user entered incorrectly */
                result.className = "captchaWrong";
                result.innerHTML = "Please try entering what you...

CSS

#hideshowbox{
 width:50px;   
    background:lightblue;
    padding:5px;
    margin:5px;
    border:2px dotted black;
}
#switchstylebox{
     width:50px;   
    background:lightblue;
    padding:5px;
    margin:5px;
    border:2px dotted black;
}
.A{
 float:left;
 border:4px solid black;
  color:yellow;
   font-size:0.5em; 
}
.B{
  float:right;   
  border:8px dotted black;
  color:white;
   font-size:2em;
}

#nameBox {
    background-color:lightblue;
    border: 1px dotted black;
}
.captchaCorrect {
    background-color:green;
}
.captchaWrong {
    background-color:red;
}

.tvshow {
    padding: 5px;
    border: 1px dotted black;
    background-color: lightblue;
    display:none; /* default until user selects one */
}