JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dl.dropbox.com/u/40036711/Scripts/jquery.ddslick.min.js"></script>
<strong>Demo for Custom Dropdown Plugin:</strong><br/>
<hr/>
<p class="q"><strong>Q:</strong> 
    What is your preferred social communication tool?
</p>
<form>
<label>Social Network:</label>
<select id="mydropdown">
    <option value="0" data-imageSrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png" data-description="Description with Facebook">Facebook</option>
    <option value="1" data-imageSrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png" data-description="Description with Twitter">Twitter</option>
    <option value="2" data-imageSrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png" data-description="Description with LinkedIn">LinkedIn</option>
    <option value="3" data-imageSrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png" data-description="Description with Foursquare">Foursquare</option>    
</select>
<div class="clearfix"></div>
</form>

CSS

body
{
    padding:20px;
    font-family:helvetica;
    font-size:12px;    
}
strong{font-weight:bold;}
p.q{color:#000;margin:15px 0;}

form > label
{
    float:left;
    width:100px;
    margin-right:10px;
}
#mydropdown
{
    float:left;
    display:block;
}
.clearfix
{
    clear:both;
}

JavaScript

//Applying plugin to the placeholder
$('#mydropdown').ddslick({    
    width: 240,
    selectText: "Select your preferred social network"    
});