JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="test" >button test</a>

CSS

* {
    padding: 0;
    margin: 0;
}
.header-nav-menu {
    font-size: 1.2em;
    clear: both;
    width: 100%;
    border-bottom: 1px dotted;
    font-weight: bold
}
.header-nav-menu ul {
    position: relative;
    list-style-type: none;
    display: inline-block
}
.header-nav-menu ul ul {
    position: absolute;
    display: none;
    top: 100%;
    margin-left: -0.5px;
    z-index: 999
}
.header-nav-menu ul ul ul {
    left: 100%;
    top: -0.5px;
}
.header-nav-menu ul li:hover > ul,
.header-nav-menu ul li ul.open {
    display: inline-block;
}
.header-nav-menu ul ul li {
    position: relative;
    min-width: 160px;
}
.header-nav-menu a {
    text-decoration: none;
    display: block;
    white-space: nowrap;
    padding: 5px 10px;
}
.header-nav-menu ul ul a {
    border: 1px solid;
    border-top: 0px;
    padding: 5px 10px;
}
.header-nav-menu ul ul li:first-child {
    border-top:1px solid;
}
.header-nav-menu > ul > li {
    display: inline-block;
    border-right: 1px solid;
}
.header-nav-menu > ul > li:first-child {
    border-left: 1px solid;
}
.header-nav-menu, .header-nav-menu > ul > li, .header-nav-menu a, .header-nav-menu > ul > li:first-child {
    background-color: #b0d2c3;
    color: #022b19;
    border-color: #70b28d;
}
#mobile-search, #mobile-login, #mobile-menu .active-mobile-menu {
    background-color:#d5eade
}
.page-content {
    border-color: #b0d2c3
}
.header-nav-menu > ul > li:hover > a {
    background-color:#d5eade
}
.header-nav-menu > ul > li > a:hover {
    background-color:#e9faf2
}
/*Drop down Nav Menu*/
 .header-nav-menu ul ul a {
    background-color: #d5eade;
    border-color: #70b28d
}
.header-nav-menu ul ul li:first-child {
    border-top-color: #70b28d
}
.header-nav-menu ul ul a:hover {
    background-color:#e9faf2;
}

JavaScript

$(function(){
 jQuery(".test").css("font-color","red");
	jQuery(".test").button();
  $(".test").hide();
})