JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<input required placeholder='required' /><br/>
<input name='foo-bar' placeholder='foo-bar' /><br/>
<input name='foobar' placeholder='foobar' /><br/>
<input name='foobar' placeholder='foobar' /><br/>
<input value='alice in wonderland' /><br/>
<input value='malice in wonderland'/>
<br/><br/>
<button id='required'>input[required]</button>
<button id='pipefoo'>input[name|=foo]</button>
<button id='starfoo'>input[name^=foo]</button>
<button id='endbar'>input[name$=bar]</button>
<button id='aliceword'>input[value~=alice]</button>
<button id='aliceanywhere'>input[value*=alice]</button>

CSS

input { width: 200px; height: 20px;}

JavaScript

/* 
 * HTML5 Session Selectors Demo
 */

$(function () {
    $('#required').click(function () {$('input[required]').css('border', '2px solid red');});
    $('#pipefoo').click(function () {$('input[name|=foo]').css('border', '2px solid blue');});
    $('#starfoo').click(function () {$('input[name^=foo]').css('border', '2px solid black');});
    $('#endbar').click(function () {$('input[name$=bar]').css('border', '2px solid pink');});
    $('#aliceword').click(function () {$('input[value~=alice]').css('border', '2px solid orange');});
    $('#aliceanywhere').click(function () {$('input[value*=alice]').css('border', '2px solid green');});
});