JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<div id=wrapper>
<button id="star-button">
  <i class="fa fa-star"></i>
</button>
<button id="arrow-button">
  <i class="fa fa-circle-up"></i>
</button>
</div>

CSS

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #456770;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fa {
  font-size: 24px;
}

.filled {
  color:#ff5722 ;
}

JavaScript

var starButton = document.getElementById("star-button");
var arrowButton = document.getElementById("arrow-button");

starButton.addEventListener("click", function() {
  var star = starButton.querySelector(".fa-star");
  star.classList.toggle("filled");
});

arrowButton.addEventListener("click", function() {
  var arrow = arrowButton.querySelector(".fa-circle-up");
  arrow.classList.toggle("filled");
});