JSFiddle - React, Tailwind, and code Playground

HTML

<input onClick="changeColor();" value="Change Color" type="button" />
<br />
<br />
<input onClick="changeSize();" value="Change Size" type="button" />
<br />
<br />
<input onClick="changeFont();" value="Change Font" type="button" />
<br />
<br />
<input onClick="changePosition();" value="Change Position" type="button" />
<br />
<br />
<input onClick="changeText();" value="Change Text" type="button" />
<br />
<br />

<div id="bob">
bob
</div>

CSS

#bob
{
    background-color: red;
    padding: 20px;
    width: 25px;
    height: 25px;
    color: white;
    float: left;
}

JavaScript

function changeColor() {
    if (document.getElementById('bob').style.backgroundColor == 'red') {
        document.getElementById('bob').style.backgroundColor = 'blue'; 
    }
    else {
         document.getElementById('bob').style.backgroundColor = 'red';   
    }
}

function changeSize() {
    if (document.getElementById('bob').style.width == '25px') {
        document.getElementById('bob').style.width = '100px';
        document.getElementById('bob').style.height = '100px';
    }
    else {
         document.getElementById('bob').style.width = '25px';   
         document.getElementById('bob').style.height= '25px';   
    }
}

function changeFont() {
    if (document.getElementById('bob').style.fontWeight == 'bold') {
        document.getElementById('bob').style.fontWeight = 'normal';
        document.getElementById('bob').style.fontWeight = 'normal';
        document.getElementById('bob').style.fontStyle = 'normal';
    }
    else {
         document.getElementById('bob').style.fontWeight = 'bold';   
         document.getElementById('bob').style.fontWeight = 'bold';
         document.getElementById('bob').style.fontStyle = 'italic';   
    }
}
function changePosition() {
    if (document.getElementById('bob').style.cssFloat == 'left') {
        document.getElementById('bob').style.cssFloat= 'right';
    }
    else {
         document.getElementById('bob').style.cssFloat = 'left';   
    }
}
function changeText() {
    if (document.getElementById('bob').innerHTML == 'bob') {
        document.getElementById('bob').innerHTML = 'Robert';
    }
    else {
         document.getElementById('bob').innerHTML = 'bob';   
    }
}