JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="text">1</div>
<div class="text">1</div>
<div class="text">1</div>
<div class="text">1</div>
<button class="color" data-color="yellow">yellow</button>
<button class="color" data-color="red">red</button>
<button class="color" data-color="brown">brown</button>

CSS

body {
    margin: 0;
}
div:nth-child(1){
    background: red;
}
div:nth-child(2){
    background: yellow;
}
div:nth-child(3){
    background: blue;
}
div:nth-child(4){
    background: black;
}
.yellow {
    background: yellow !important;
}
.red {
    background: red !important;
}
.brown {
    background: brown !important;
    font-size: 30px;
    color: red;
}

JavaScript

function changeColor(){
	var a = document.querySelectorAll('.color');
    for(var i = 0; i < a.length; i++){
    	a[i].addEventListener('click',function(){
        	var c = this.dataset.color;
        	var b = document.querySelectorAll('.text');
            for(var i = 0; i < b.length; i++){
            	b[i].classList.remove('red' , 'yellow', 'brown');
            	b[i].classList.add(c);
            }
        })
    }
}
changeColor();