JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="selectBox">
    <span class="icon-cloud"></span>
    Repositories
    <select name="cat" id="picker">
        <option value="pepp">Pep</option>
        <option value="mush">Mushroom</option>
        <option value="pine">Pineapple</option>
        <option value="xchs">Extra Cheese</option>
    </select>
</div>

CSS

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

/******************
**Faker - A simple set of form elements.
**Victor Fuentes 2013
**********************/

 .selectBox {
    background: #999;
    padding:20px 3px;
    display:inline-block;
    padding-right:50px;
    position:relative;
    top:0;
    padding-right: 260px;
    
} 
#toppings {
    display:none;
}
.fakeSelect {
 margin:0;
    padding:0;
    width:250px;
    
    border-radius:0px;
    display:inline-block;
    position:absolute;
    top:0;
    right:0;
    padding:10px;
    padding-right:30px;
    background:#e3e3e3
       
}
.fakeSelect div {
     cursor:pointer;
    margin:0;
    padding:2px;
    background:white;
    margin: 5px 3px;
    border-radius:5px;
        box-shadow:0 1px 0 rgba(250,250,250,.7), inset 0 1px 2px  rgba(0,0,0,.2);
    border:1px solid #999;
}
.fakeSelect div:hover {
}
.down {
    background:red;
    height:22px;
    width:22px;
    display:block;
    position:absolute;
    top:5px;
    right:5px;
    background: url(../img/down.png);
}


.fakeDownOut {
    background:blue !important;
}
.selected{
    background: white !important;

}

JavaScript

//Fake Select Function
$.fn.fakeSelect = function(userWidth) {
	//add our pieces
	var fakeSelect = "<div class='fakeSelect'></div>";
	var downArrow = "<div class='down'></div>";
	$(this).append(fakeSelect);
	$(this).append(downArrow);
   //$(this).find('select').hide();

	// if it has a custom width
	if (userWidth != null) {
		alert('width working');
		$(this).find('.fakeSelect').width(userWidth);
	} ;


	$(this).find('select option').each(function(){
	    //get the info
	    var optionText = $(this).text();
	    var optionVal = $(this).attr("value");
	    
	   //build the option
	    var option = "<div data-value='" + optionVal + "'>" + optionText + "</div>";
	    //put it in
	    $(this).parent().parent().find('.fakeSelect').append(option);
	});

//	$(this).find('select option').css('display', 'none');

	$('.selectBox .fakeSelect div').click(function(){
	    $(this).parent().find($('.selected')).removeClass('selected');
        $(this).addClass('selected');
	    var optName = $(this).data('value');
	    alert(optName);
	    $(this).parent().parent().find('select').val(optName);
	    $(this).siblings().slideUp(600);
	});

	//hide all options 
	$('.fakeSelect div:first-child').addClass('selected');
	$('.fakeSelect div').not(":first-child").hide();
    
 
    alert('cowabunga');
    
	$(this).hover(function(){
	    $(this).find('.fakeSelect div').stop(true,true).slideDown(100);
	    $(this).find('.fakeSelect').stop(true,true).animate({'height':"auto"}, 200);
	    $(this).css("z-index","100");
	    $(this).find($('.down')).addClass('fakeDownOut');
    }, function(){
        $(this).find('.fakeSelect div').not('div.selected').delay(300).slideUp(600);
        $(this).find('.fakeSelect').animate({'height':thisHeight}, 200);
        $(this).css("z-index","50");
        $(this).find($('.down')).removeClass('fakeDownOut');
	});

   //visuals
    //set height
    var firstWidth = $(this).find('.fakeSelect div.selected').height();
    var parentHeight =...