JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://tympanus.net/Development/SimpleDropDownEffects/css/style1.css">
<script src="http://tympanus.net/Development/SimpleDropDownEffects/js/modernizr.custom.63321.js"></script>
<div>
        <div style='float:left;width:250px;'>
<select id="Select1"  name="cd-dropdown" class="cd-select">
    <option value="-1" selected>The drop down menu</option>
    <option value="1" class="icon-monkey">Choice 1</option>
    <option value="2" class="icon-bear">Choice 2</option>
    <option value="3" class="icon-squirrel">Choice 3</option>
    <option value="4" class="icon-elephant">Choice 4</option>
</select>
    </div>
    <div style='float:left;width:150px;padding-top:170px;'>
<select id="Select2" name="cd-dropdown" class="cd-select">
    <option value="-1" selected>The drop down menu</option>
    <option value="1" class="icon-monkey">Choice 11</option>
    <option value="2" class="icon-bear">Choice 21</option>
    <option value="3" class="icon-squirrel">Choice 31</option>
    <option value="4" class="icon-elephant">Choice 41</option>
</select>
    </div>
</div>

JavaScript

/**
 * jquery.dropdown.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2012, Codrops
 * http://www.codrops.com
 */
;( function( $, window, undefined ) {

	'use strict';

	$.DropDown = function( options, element ) {
		this.$el = $( element );
		this._init( options );
	};

	// the options
	$.DropDown.defaults = {
		speed : 300,
		easing : 'ease',
		gutter : 0,
		// initial stack effect
		stack : true,
		// delay between each option animation
		delay : 0,
		// random angle and positions for the options
		random : false,
		// rotated [right||left||false] : the options will be rotated to thr right side or left side.
		// make sure to tune the transform origin in the stylesheet
		rotated : false,
		// effect to slide in the options. value is the margin to start with
		slidingIn : false,
		onOptionSelect : function(opt) { return false; }
	};

	$.DropDown.prototype = {

		_init : function( options ) {

			// options
			this.options = $.extend( true, {}, $.DropDown.defaults, options );
			this._layout();
			this._initEvents();

		},
		_layout : function() {

			var self = this;
			this.minZIndex = 1000;
			this._transformSelect();
			this.opts = this.listopts.children( 'li' );
			this.optsCount = this.opts.length;
			this.size = { width : this.dd.width(), height : this.dd.height() };
			
			var elName = this.$el.attr( 'name' ), elId = this.$el.attr( 'id' ),
				inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + ( new Date() ).getTime();

			this.inputEl = $( '<input type="hidden" name="' + inputName + '"></input>' ).insertAfter( this.selectlabel );
			
			this.selectlabel.css( 'z-index', this.minZIndex + this.optsCount );
			this._positionOpts();
			if( Modernizr.csstransitions ) {
				setTimeout( function() { self.opts.css( 'transition', 'all ' + self.options.speed + 'ms ' + self.options.easing ); }, 25 );
			}

		},
		_transformSelect :...