JSFiddle - React, Tailwind, and code Playground

by Eduardo GarcĂ­a Sanz

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
	    Size
        <span class="caret"></span>
        <span class="valueOfButton">All</span>
	</a>
    <ul class="dropdown-menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
    </ul>
</div>

CSS

ul{
    list-style-type:none;
    max-height:160px;
    padding-top:10px;
    overflow:auto;
    text-align:center;
}

ul li{
    height:24px;
    line-height:24px;
}

.selected{
    background:#ff0000;
    color:#fff;
}

.btn.dropdown-toggle{
	width: 135px;
	height: 60px;
	padding-top: 40px;
	border-radius: 0px;
	font-weight: bold;
	font-size: 20px;	
}

.btn .caret{
	margin-top:8px;
}

.valueOfButton{
	display: block;	
	font-size: 14px;
}

JavaScript

(function($, undefined) {
    
    $.fn.dropdown = function() {
        
        var widget = $(this);
        var label = widget.find('span.valueOfButton');
        var list = widget.children('ul');
        var selected;
        var highlighted;
        
        var select = function(i) {
        
            selected = $(i);
            label.text(selected.text());
        
        };
        
        var highlight = function(i) {
            
            highlighted = $(i);
            
            highlighted
            .addClass('selected')
            .siblings('.selected')
            .removeClass('selected');
        };
        
        var scroll = function(event) {
            
            list.scrollTo('.selected');
            
        };
        
        var hover = function(event) {
            
            highlight(this);
            
        };
        
        var rebind = function(event) {
        
            bind();
        
        };
        
        var bind = function() {
            
            list.on('mouseover', 'li', hover);
            widget.off('mousemove', rebind);
            
        };
        
        var unbind = function() {
            
            list.off('mouseover', 'li', hover);
            widget.on('mousemove', rebind);
            
        };
        
        list.on('click', 'li', function(event) {
        
            select(this);
        
        });
        
        widget.keydown(function(event) {
        
            unbind();
            
            switch(event.keyCode) {
            
                case 38:
                    highlight((highlighted && highlighted.prev().length > 0) ? highlighted.prev() : list.children().last());
                    
                    scroll();
                    break;
            
                case 40:
                    highlight((highlighted && highlighted.next().length > 0) ? highlighted.next() : list.children().first());
                    
             ...