JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Raleway|Rancho"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
  <div class="container">

    <!-- Custom dropdown -->
    <div class="custom-sel">
      <a class="selected" href="#">ENG &nbsp;<i class="fa fa-caret-down lightblue" aria-hidden="true"></i></a>
      <a class="hidden" href="#">EST</a>
      <a class="hidden" href="#">RUS</a>
      <a class="hidden" href="#">FIN</a>
    </div>

  </div>
</body>

CSS

/* Custom dropdown */

@import url(//fonts.googleapis.com/css?family=Raleway);
.custom-sel a {
  text-decoration: none;
  text-transform: uppercase;
  margin: 0;
  padding: 10px;
  text-align: left;
  font-family: 'Raleway';
  color: #546e7a;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  display: block;
}

.custom-sel a:hover {
  text-decoration: none;
  background-color: #EDF0F2;
  color: #ffffff;
}

.custom-sel a.selected {
  background-color: transparent;
}

.custom-sel a.selected:hover {
  background-color: transparent;
  color: #546e7a;
}

.hidden {
  display: none;
}

.lightblue {
  color: #03a9f4;
  margin-left: -4px;
}

.show-sel {
  background-color: #ffffff;
  box-shadow: -5px 0px 65px 0px rgba(0, 0, 0, 0.18);
}

.custom-sel {
  margin: 30px;
  display: inline-block;
}


/* Custom dropdown */

JavaScript

$(document).ready(function() {

  // Show dropdown
  $('.selected').click(function() {
    $('.custom-sel').addClass('show-sel');
    $('.custom-sel a').removeClass('hidden');
  });

  // Hide dropdown when not focused
  $('.custom-sel').focusout(function() {
    $('.custom-sel').removeClass('show-sel');
    $('.custom-sel a:not(:first)').addClass('hidden');
  }).blur(function() {
    $('.custom-sel').removeClass('show-sel');
    $('.custom-sel a:not(:first)').addClass('hidden');
  });

});