JSFiddle - React, Tailwind, and code Playground

by godfrzero

HTML

<form>
    <!-- This one won't get any custom styles applied to it -->
    <label><input type="radio" name="radioSet" value="specialRadio" /> Unstyled</label>
    
    <!-- These three have the same IDs --->
    <label><input type="radio" name="radioSet" id="radioSet" value="radioSet1" /> Radio Set 1</label>
    <label><input type="radio" name="radioSet" id="radioSet" value="radioSet2" /> Radio Set 2</label>
    <label><input type="radio" name="radioSet" id="radioSet" value="radioSet3" /> Radio Set 3</label>
    
    <!-- This one's special, unique ID -->
    <label><input type="radio" name="radioSet" id="specialRadio" value="specialRadio" /> Special Radio</label>
</form>

CSS

label {
    display: block;
}

#radioSet, #specialRadio {
    height: 10px;
    width: 10px;
    vertical-align: middle;
}

JavaScript

/*
   Case 1: IDs as Stylesheet Selectors
   ===================================
   
   In this example, we're comparing three different cases:
   
   - The default radio input
   - Three radio inputs with the same IDs
   - One radio input with a unique ID
   
   The HTML4.01 spec at http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
   specifies that IDs should be unique. Let's have a look at what happens when 
   they aren't, and how different browsers behave.
   
   Chrome 28, Firefox 22, Safari 6.0.5, IE9: 
       Styles are applied regardless of the uniqueness of the ID. Hm.
   
*/