JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
 <div class="select fa fa-plus fa-lg">
    <ol>
      <li><label class="fa fa-users    "><input type="radio" name="tipo" value="1" /></label></li>
      <li><label class="fa fa-folder   "><input type="radio" name="tipo" value="2" /></label></li>
      <li><label class="fa fa-file-text"><input type="radio" name="tipo" value="3" /></label></li>
      <li><label class="fa fa-comments "><input type="radio" name="tipo" value="2" /></label></li>
    </ol>
  </div>

  <br />
  <hr />
  <br />

  <div class="select fa fa-plus fa-lg">
    <ol>
      <li><label class="fa fa-users    "><input type="radio" name="tipo" value="1" /></label></li>
      <li><label class="fa fa-folder   "><input type="radio" name="tipo" value="2" /></label></li>
      <li class="checked"><label class="fa fa-file-text"><input type="radio" name="tipo" value="3" checked/></label></li>
      <li><label class="fa fa-comments "><input type="radio" name="tipo" value="2" /></label></li>
    </ol>
  </div>

CSS

.select{
  border: 1px solid #ccc;
  border-left: none;
  color: #333;
  margin: 30px;
  height: 30px;
  line-height: 30px;
  width: 150px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}
.select:hover{
  overflow: visible;
}
.select:before{
  float: right;
  margin-right: 5px;
}
.select:after{
  content: "";
  border: 5px solid transparent;
  border-color: #ccc transparent transparent transparent;
  position: absolute;
  top: 12px;
  left: 38px;
}
.select:hover:after{
  border-color: #333 transparent transparent transparent;
}
.select ol{
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ccc;
  border-top: none;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 50px;
}
.select li{
  height: 30px;
  width: 50px;
  background-color: #fff;
}
.select li.checked{
  position: absolute;
  top: 0;
  left: 0;
}
.select:hover li.checked{
  position: relative;
  background-color: #ccc;
}
.select li:hover{
  background-color: #ccc;
}
.select label{
  cursor: pointer;
  display: block;
}
.select label:before{
  line-height: 30px;
  margin-left: 5px;
}
.select input{
  display: none;
}

JavaScript

$('.select :radio').on('change', function(e){
    var $radio = $(this);
    $radio.parents('ol').find('.checked').removeClass('checked');
    $radio.parents('li').addClass('checked');
});