JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<style>

.the-button-inactive {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: black;
}
.the-button-active {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: blue;
}

</style>

<body>

   <div class="the-button-container">

                <a href="#the-image-1" id="the-image-1-id" onclick="myFunction()" class="the-button-inactive"></a>

  </div>
  
  <script>
	function myFunction() {
   var element = document.getElementByID("the-image-1-id");
   element.classList.toggle("the-button-active");
}
</script>
  

</body>

</html>