JSFiddle - React, Tailwind, and code Playground

by bluetidepro

HTML

<script src="http://jamielottering.github.com/DropKick/js/jquery.dropkick.1-0.1.js"></script>
<!--<a href="#" class="twitterHandleButtons clearfix"><span class="sticons twitter">Twitter</span><span class="text">Manage Twitter Handles</span><span class="sticons triangle_down">Drop-Down</span></a>-->
<select name="and_me" class="change" id="TwitterHandles">
    <option value="@bluetidepro">@bluetidepro</option>
    <option value="@ayale99" selected="selected">@ayale99</option>
    <option value="@chacha">@chacha</option>
    <option value="addremove">+ Add/Remove Twitter Handles</option>
</select>

CSS

/* Only for the demo, you can delete these lines */
* {margin:0; padding:0;}
body {background:#fff; padding:10px;}

ul.dk_options_inner li:last-child{
    border-top:2px solid rgba(3, 85, 110, 0.7);
}

a.dk_toggle{
    
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
    
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    
    width:auto !important;
    
    display:inline-block;
    color:#fff;
    text-shadow: 0 1px 0 rgba(3, 85, 110, 0.6);
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),
                0 1px 0 rgba(59, 190, 230, 1.0) inset,
                0 1px 10px rgba(3, 85, 110, 0.4) inset;

    border: 1px solid rgba(3, 85, 110, 0.7);
    
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -khtml-border-radius: 6px;
    
    background: #00a0d1;
    background: -moz-linear-gradient(top,  #00a0d1 0%, #008db8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a0d1), color-stop(100%,#008db8));
    background: -webkit-linear-gradient(top,  #00a0d1 0%,#008db8 100%);
    background: -o-linear-gradient(top,  #00a0d1 0%,#008db8 100%);
    background: -ms-linear-gradient(top,  #00a0d1 0%,#008db8 100%);
    background: linear-gradient(top,  #00a0d1 0%,#008db8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0d1', endColorstr='#008db8',GradientType=0 );
    
    padding: 0 7px 0 0;
    z-index:10;
}

a.dk_toggle span{float:left; margin-left:7px; padding:7px 0 7px 0;}
a.dk_toggle span.text{border-right:1px solid rgba(59, 190, 230, 0.6); padding-right:7px;}
a.dk_toggle span.sticons.triangle_down{border-left:1px solid rgba(3, 85, 110, 0.4);}
a.dk_toggle span.sticons.triangle_down{margin:0; padding-left:7px; background-position:-109px -10px;}
a.dk_toggle span.sticons.twitter{margin-top:7px;padding:0 0 2px 0;}


a.dk_toggle...

JavaScript

$(function() {
    
    $('.change').dropkick({
        change: function(value, label) {
            if (value == 'addremove') {
                //  alert('testing!');
                document.location.href = 'google.com';
            } else {
                // alert('You picked: ' + label + ':' + value);
            }
            $('a.dk_toggle').html('<span class="sticons twitter">Twitter</span><span class="text">' + 'Manage Handles <span class="smallertext">(' + value + ')</span></span><span class="sticons triangle_down">Drop-Down</span>');
        }
    });

    $selectedval = ' <span class="smallertext">(' + $('select#TwitterHandles option:selected').val() + ')</span>';

    $('a.dk_toggle').html('<span class="sticons twitter">Twitter</span><span class="text">' + 'Manage Handles' + $selectedval + '</span><span class="sticons triangle_down">Drop-Down</span>');

});