JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<div id="radios">
	<input type="radio" name="foo" id="foo1" value="1"><label for="foo1" class="complexity-easy">Easy</label>
    <input type="radio" name="foo" id="foo2" value="2"><label for="foo2" class="complexity-medium">Medium</label>
    <input type="radio" name="foo" id="foo3" value="3"><label for="foo3" class="complexity-hard">Hard</label>
</div>

CSS

.complexity-easy.ui-state-active {
        background: url("/Content/themes/base/images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #080;
        color: white;
    }
    .complexity-medium.ui-state-active {
        background: url("/Content/themes/base/images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #FF0;
    }
    .complexity-hard.ui-state-active {
        background: url("/Content/themes/base/images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #F00;
        color: white;
    }

JavaScript

$('#radios').buttonset();