JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
      <li><button class="switch">Green</button></li>
      <li><button class="switch">Red</button></li>
      <li><button class="switch">Blue</button></li>
      <li><button class="switch">Black</button></li>
      <li><button class="switch">Pink</button></li>
      <li><button class="switch">Yellow</button></li>
      <li><button class="switch">Light Green</button></li>
    </ul>
    <div id="viewport"></div>

CSS

.green{
                  color: #00cd2e;
                  }
                  .red{
                  color: #b50000;
                  }
                  .blue{
                  color: #0002bd;
                  }
                  .black{
                  color: #222222
                  }
                  .pink{
                  color: #c73ee3
                  }
                  .yellow{
                    color: #d0da0b
                  }
                  .light-green{
                    color: #98ff8f
                  }
                  li{
                    display: inline-block;
                  }
#viewport{
  height: 100px;
  width: 100px;
  background: #ccc;
}

JavaScript

$('.switch').on('click',function(){
$('#viewport').css('backgroundColor',$(this).text());
});