JSFiddle - React, Tailwind, and code Playground

by Renzo Calla

HTML

<div class="buttons">
  <div class="btn btn-reset"></div>
  <div class="btn btn-red"></div>
  <div class="btn btn-green"></div>
  <div class="btn btn-yellow"></div>
</div>

<div class="container">
  When I click on the colored buttons, then container color class will added/exchanged. When I click on the white button, then it removes container color class. <strong>How to do it?</strong>
</div>

CSS

/* Buttons */
.btn {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 3px;
  cursor: pointer;
  border: 2px solid #333;
}
.btn.btn-red { background-color: red; }
.btn.btn-green { background-color: green; }
.btn.btn-yellow { background-color: yellow; }

/* Container */
.container {
  max-width: 480px;
  margin-top: 20px;
  padding: 40px;
  border: 2px solid #333;
}

/* Container color classes */
.container.cont-red { background-color: red; }
.container.cont-green { background-color: green; }
.container.cont-yellow { background-color: yellow; }

JavaScript

let container = $('.container');

$('.btn').click(function(){
  container.attr('class', 'container');
  if($(this).hasClass('btn-red')) container.addClass('cont-red');
  else if($(this).hasClass('btn-green')) container.addClass('cont-green');
  else if($(this).hasClass('btn-yellow')) container.addClass('cont-yellow');
});