JSFiddle - React, Tailwind, and code Playground

by maximua

HTML

<ul class="group">
<li> <a href="#" class="small-btn">Small</a> </li>
<li> <a href="#" class="med-btn">Medium</a> </li>
<li> <a href="#" class="large-btn">Large</a> </li>
</ul>

<div id="main_content" class="large">
content here
</div>

CSS

.small {color: red;}
.med   {color: green;}
.large {color: blue;}

JavaScript

$(document).ready(function () {
	$("[class$='btn']").click(function() {
		var $container = $('#main_content');
		$container.removeClass();
		
		var cls = $(this).attr('class');
		$container.addClass(cls.substring(0, cls.indexOf("-")));	
	});
});