JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<p>Selected: <span class='selected'></span></p>

<select>
    <option disabled>Select a letter</option>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
    <option>e</option>
    <option>f</option>
    <option>g</option>
    <option>h</option>
    <option>i</option>
    <option>j</option>
    <option>k</option>
    <option>l</option>
    <option>m</option>
    <option>n</option>
    <option>o</option>
    <option>p</option>
    <option>q</option>
    <option>r</option>
    <option>s</option>
    <option>t</option>
    <option>u</option>
    <option>v</option>
    <option>w</option>
    <option>x</option>
    <option>y</option>
    <option>z</option>
</select>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

var selected = document.querySelector('.selected');
var changeHandler = function () {
    selected.textContent = this.value || 'nothing selected';
};

document.querySelector('select').addEventListener('change', changeHandler );
changeHandler();