JSFiddle - React, Tailwind, and code Playground

by skilesare

HTML

<html>
    <div class='ClassName'>Hi</div>
    <form id='ItemID'>
        <input type=text />
        <input id='MyField' type=text/>
    </form>
    <input type=button class="ClassButton" value=".ClassName" />
    <input type=button class="IDButton" value="#ItemID" />
    <input type=button class="ElementButton" value="div" />
    <input type=button class="ChildButton" value="#ItemID > #MyField" />
    <input type=button class="AttributeButton" value='[type="text"]' />
    <input type=button class="AncesstorButton" value="form input" />
</html>

CSS

input{
    padding: 5px 5px 5px 5px;
}

JavaScript

var a = function() {
    $('.ClassName').css('background-color','red');
},
    b = function() {
        $('#ItemID').css('background-color','green');
    },
    c = function() {
        $('div').css('background-color','blue');
    },
    d = function() {
        $('#ItemID > #MyField').css('background-color','orange');
    },
    e = function() {
        $('[type="text"]').css('background-color','yellow');
    },
    f = function() {
        $('form input').css('background-color','grey');
    };

$('.ClassButton').bind('click',a);
$('.IDButton').bind('click',b);
$('.ElementButton').bind('click',c);
$('.ChildButton').bind('click',d);
$('.AttributeButton').bind('click',e);
$('.AncesstorButton').bind('click',f);