JSFiddle - React, Tailwind, and code Playground

HTML

<div class="radio-btns"><span class="selected-search">&nbsp;</span>
      <div class="radio-btns-wrapper">
          <label>
          <input type="radio" name="rb" value="all" id="all">
          All</label>        
        <label>
          <input type="radio" name="rb" value="ln" id="ln">
          Option 1</label>
        <label>
          <input type="radio" name="rb" value="prodsandserv" id="prodsandserv">
          Option 2</label>
        <label>
          <input type="radio" name="rb" value="publications" id="publications">
          Option 3</label>
        <label>
          <input type="radio" name="rb" value="comm" id="comm">
          Option 4</label>
        <label>
          <input type="radio" name="rb" value="lweb" id="lweb">
          Option 5</label>
      </div>
    </div>

CSS

div.radio-btns-wjs { display:inline-block; position:relative; vertical-align:middle; }
span.selected-search-wjs { 
             display:block; 
             width:130px; 
             padding:8px; 
             cursor:pointer; 
             text-align:left;
             color:#333;            
             font:bold 11px Arial, Helvetica, sans-serif; 
             border:#ddd 1px solid; 
             background:url(../images/sprites.png) right -99px no-repeat #fff /*Up/Down down arrows*/;
         }        
 span.selected-search-wjs:hover { background:url(../images/sprites.png) right -97px no-repeat #f1f1f1 /*Up/Down down arrows*/; }
         
 div.radio-btns-wrapper-wjs { 
             display:block; 
             width:160px; 
             white-space:nowrap; 
             padding:10px; 
             text-align:left; 
             position:absolute; 
             left:0; top:33px; z-index:10; 
             border:#ccc 1px solid; 
             background:#fff; background:rgba(255,255,255,.9); 
         }
 div.radio-btns-wrapper-wjs label { display:block; cursor:pointer; padding:5px 2px; font:11px Arial, Helvetica, sans-serif; }
 div.radio-btns-wrapper-wjs label:hover { color:#333; background:#e1e1e1; font-weight:bold; }
 div.radio-btns-wrapper-wjs label input { margin:0 5px 0 0; vertical-align:middle; }

JavaScript

$(function(){
    $('.radio-btns-wrapper').addClass('radio-btns-wrapper-wjs').removeClass('radio-btns-wrapper');    
    $('.radio-btns-wrapper-wjs').hide();    
    $('.radio-btns').addClass('radio-btns-wjs').removeClass('radio-btns');    
    $('.selected-search').addClass('selected-search-wjs').removeClass('selected-search').append('Please Select&hellip;').click(function() {
        $('.radio-btns-wrapper-wjs').slideToggle('fast');        
    }); 
    //Change selection text
    $('input[type=radio]').click(function() {        
        $('.selected-search-wjs').text($(this).parent().text());
        $('.radio-btns-wrapper-wjs').slideUp('fast');    
    });
    //Hide list when mouse leaves the list
    $('.radio-btns-wrapper-wjs').mouseleave(function() {
        $(this).slideUp();
    });
    //Hide the list when mouse leaves <span class="selected-search"> but NOT if the mouse is over the list
    
    //...???
});