JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test js</title>
<style type="text/css">
a {display:block; paddin:4px; margin:4px;}

.first {background:lightblue}
.second {background:pink}
.third {background:#ff00ff}
.something {background:lightgreen}

.grey {background:grey}
</style>

<script type="text/javascript">
    function getCss(object)
    {   
        if(object != null && object != "")
        {
            return object.className;
        }
        return false;
    }

    
    function setCss(object, cssclass)
    {        
        if(object != null && object != "")
        {
            return (object.className = cssclass);
        }
        return false;
    }
    
    function getCss2(object)
    {
        if(object != null && object != "")
        {    
            if (object.getAttribute("className")) {
                return object.getAttribute("className");
            }
            return object.getAttribute("class");
        }
        return false;
    }

    
    function setCss2(object, cssclass)
    {    
        if(object != null && object != "")
        {  
            if (object.getAttribute("className")) {
                return object.setAttribute("className",cssclass);
            }
            object.setAttribute("class",cssclass);
        }
        return false;
    }
    
    function changeText(obj, value) {
        obj.innerHTML = value;
    }
</script>

</head>
<body>


<a href="#" class="first" onclick="changeText(this, getCss(this))" >getCss</a>
<a href="#" class="second" onclick="setCss(this,'grey')" >setCss</a>
<a href="#" class="third" onclick="changeText(this, getCss2(this))" >getCss2</a>
<a href="#" class="something else" onclick="setCss2(this,'grey')" >setCss2</a>

</body>
</html>