JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="theme-buttons">
<li><a data-theme-id="1">theme 1</a></li>
<li><a data-theme-id="2">theme 2</a></li>
<li><a data-theme-id="3">theme 3</a></li>
</ul>
CSS
ul.theme-buttons
{
overflow: auto;
}
ul.theme-buttons li
{
display: block;
float: left;
background-color: #eee;
padding: 5px;
margin: 2px;
}
ul.theme-buttons li.active
{
background-color: #999;
}
JavaScript
$(document).ready(function(){
$("ul.theme-buttons li:first-child").addClass("active");
$("ul.theme-buttons li a").click(function(){
$("ul.theme-buttons li").removeClass("active");
$(this).parent().addClass("active");
alert("you selected " + $(this).data("theme-id"));
// do your PHP magic here
});
});