JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<fieldset class='topic'> 
    <div class='style_picker validatable translate'> 
        <label class='topic_style' for='style'> 
            Select a topic type:
        </label> 
        <div class='validatable' id='style_picker'> 
            <div class='selector'> 
                <span class='selection'></span> 
                <span class='handle'></span> 
            </div> 
            <ul type='none'> 
                <li class='ice'> 
                    <span class='style_item'></span> 
                    <span class='copy'> 
                        ice
                    </span> 
                </li> 
                <li class='earth'> 
                    <span class='style_item'></span> 
                    <span class='copy'> 
                        earth
                    </span> 
                </li> 
                <li class='wind'> 
                    <span class='style_item'></span> 
                    <span class='copy'> 
                        wind
                    </span> 
                </li> 
                <li class='fire'> 
                    <span class='style_item'></span> 
                    <span class='copy'> 
                        fire
                    </span> 
                </li> 
                <li class='water'> 
                    <span class='style_item'></span> 
                    <span class='copy'> 
                        water
                    </span> 
                </li> 
            </ul> 
        </div>
    </div>
</fieldset>

CSS

.fire {
    background: red;
}

JavaScript

(function($) {
    $(document).ready(function() {
        $('.topic .style_picker li.fire span.copy').text("time");
    });
})(jQuery);