JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color__items">
 <button class="color__item color__item-black" type="button"></button>
 <button class="color__item color__item-white" type="button"></button>
 <button class="color__item color__item-red" type="button"></button>
 <button class="color__item color__item-purple" type="button"></button>
 <button class="color__item color__item-blue" type="button"></button>
 <button class="color__item color__item-lightblue" type="button"></button>
 <button class="color__item color__item-green" type="button"></button>
 <button class="color__item color__item-yellow" type="button"></button>
 <button class="color__item color__item-orange" type="button"></button>
</div>

CSS

.color__items{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 55px;
  border-radius: 15px;
  background-color: rgb(31, 33, 44);
  margin-bottom: 60px;
}
.color__item{
  width: 26px;
  height: 26px;
  border-radius: 35%;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: all .3s;
 }
 .color__item:hover{
    opacity: 1;
  }
  .color__item-title{
    font-size: 21px;
    margin-bottom: 20px;
  }
  .color__item-black{
    background-color: #000000;
  }
  .color__item-white{
    background-color: #fefefe;
  }
  .color__item-red{
    background-color: #f50818;
  }
  .color__item-purple{
    background-color: #f508e7;
  }
  .color__item-blue{
    background-color: #2f08f5;
  }
  .color__item-lightblue{
    background-color: #08cbf5;
  }
  .color__item-green{
    background-color: #08f524;
  }
  .color__item-yellow{
    background-color: #e1f508;
  }
  .color__item-orange{
    background-color: #f58e08;
  }
}
.color__item.active{
  opacity: 1;
}

JavaScript

let items = document.querySelector('.color__items');
  let item = document.querySelectorAll('.color__item');

  item.forEach(el => {
    el.addEventListener('click', function(){
      items.querySelector('.active').removeClass('active');

          el.classList.add('active');
    });
  });