JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shop-beauty-drop">
  <span class="shop-beauty-span"></span>
  <ul class="shop-beauty-ul">
    <li class="shop-beauty-li" value="1">All</li>
    <li class="shop-beauty-li" value="2">Hair</li>
    <li class="shop-beauty-li" value="3">Makeup</li>  
    <li class="shop-beauty-li" value="4">Skin</li>  
    <li class="shop-beauty-li" value="5">Under $100</li>  
  </ul>
</div>

<div id="ShopBeautyPage1" class="shopbeautypage" style="">
  Content of page 1
</div>
<div id="ShopBeautyPage2" class="shopbeautypage" style="display:none">
  Content of page 2
</div>
<div id="ShopBeautyPage3" class="shopbeautypage" style="display:none">
  Content of page 3
</div>
<div id="ShopBeautyPage4" class="shopbeautypage" style="display:none">
  Content of page 4
</div>
<div id="ShopBeautyPage5" class="shopbeautypage" style="display:none">
  Content of page 5
</div>

CSS

.shop-beauty-ul{
  display: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  position: absolute;
width:100%;
  text-align:center;
    min-width:200px;
}

.shopbeautypage{
  display:none;
}

#shop-beauty-drop:hover > ul{
  display: block;
    cursor: pointer;
}
#shop-beauty-drop:hover {
    cursor: pointer;
}

#shop-beauty-drop{
  background-color: #fff;
  width: 22%;
  text-align:center;
    margin: 0 auto;
    position: relative;
    min-width:200px;
      text-transform: uppercase;
  font-size: 15px;
  font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
    padding-top: 10px;
    margin-bottom: 200px;
}

.shop-beauty-li{
  list-style: none;
  text-align: center;
}

.shop-beauty-li:hover{
    cursor: pointer;
}

JavaScript

jQuery(".shop-beauty-span").html("All");
jQuery("#ShopBeautyPage1").show();

jQuery(".shop-beauty-li").on('click', function() {
  var value = jQuery(this).val();
  if (value) {
    jQuery(".shopbeautypage").hide();
    jQuery("#ShopBeautyPage" + value).show();
   jQuery(".shop-beauty-span").html($(this).text());
  }
});