JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<button data-class="border">border</button>
<button data-class="bg">bg</button>
<button data-class="font">font</button>
<button data-class="align">align</button>
<button data-class="clear">clear</button>
<br>
<br>

<div id="wrap">
  hello
</div>

CSS

#wrap{width:200px;height:200px;}
#wrap.border{border:1px solid red}
#wrap.bg{background:gray}
#wrap.font{font-size:60px}
#wrap.align{text-align:center;}

JavaScript 1.7

$('button').on('click', function(){
  var $targetEle = $('#wrap');
  var className = $(this).attr('data-class');
  
  if(className != 'clear') {
  	$targetEle.toggleClass(className);
  }else{
  	$targetEle.attr('class', '');
  }
})