JSFiddle - React, Tailwind, and code Playground

by wh01am

HTML

<div class="container">
  <div class="dropdown">
    <div class="caption">Select</div>
    <div class="list">
      <a href="view1.html">
        <div class="item">view1</div>
      </a>
      <a href="view2.html">
        <div class="item">view2</div>
      </a>
      <a href="view3.html">
        <div class="item">view3</div>
      </a>
      <a href="view4.html">
        <div class="item">view4</div>
      </a>
      <a href="view5.html">
        <div class="item">view5</div>
      </a>
        
    </div>
  </div>

  <div class="content">
    Content
  </div>





</div>

CSS

*, :before, :after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto Condensed', 'Sans serif';
}

html, body {
  background-color: #333;
}

div.container {
  margin: 0 auto;
  width: 1000px;
  background-color: transparent;
}

div.dropdown {
  width: 200px;
  position: relative;
  margin-bottom: 50px;
}

div.dropdown > div.caption {
  background-color: #f2f2f2;
  padding: 11px 24px;
  border-radius: 3px;
  cursor: pointer;
}

div.dropdown > div.list {
  position: absolute;
  background-color: #f2f2f2;
  width: 100%;
  border-radius: 0 0 3px 3px;
  display: none;
}

div.dropdown > div.list > div.item {
  padding: 11px 24px;
  cursor: pointer;
}

div.dropdown > div.list > div.item.selected {
  font-weight: bold;
}

div.dropdown > div.caption:hover,
div.dropdown > div.list > a:hover {
  background-color: rgb(83, 161, 214);
  color: #fff;
}

div.dropdown.open > div.caption {
  border-radius: 3px 3px 0 0;
  border-bottom: solid 1px #999;
}

div.dropdown.open > div.list {
  display: block;
}


div.list > a {
  display: block;
  text-decoration: none;
  color: #000;
  padding: 10px;
}

div.list > a:hover {
  
}


div.content {
  width: 700px;
  height: 400px;
  background-color: #fff;
  
  color: #f00f00;
  font-size: 40px;
  text-align: center;
}

JavaScript

$(function() {

  $('.dropdown > .caption').on('click', function() {
    $(this).parent().toggleClass('open');
  });

  $('.dropdown > .list > .item').on('click', function() {
    $('.dropdown > .list > .item').removeClass('selected');
    $(this).addClass('selected').parent().parent().removeClass('open').children('.caption').text($(this).text());
  });

  $(document).on('keyup', function(evt) {
    if ((evt.keyCode || evt.which) === 27) {
      $('.dropdown').removeClass('open');
    }
  });

  $(document).on('click', function(evt) {
    if ($(evt.target).closest(".dropdown > .caption").length === 0) {
      $('.dropdown').removeClass('open');
    }
  });

});