JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<ul id="posiNav">	
    <li>
        <a>Home</a>
    </li>
	<li>
        <a>Overview</a>
    </li>
    <li>
        <a>
            <img class="arrow" id="ksArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png" />
        KS Series
        </a>

        <ul class="navDrop" id="ksDrop">
            <li><a>KS6700</a></li>
            <li><a>KS7200</a></li>
            <li><a>KS7500</a></li>
            <li><a>KS7700</a></li>
        </ul>
   </li>
   <li>
       <a><img class="arrow" id="txArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png" />
		TX Series
       </a>

        <ul class="navDrop" id="txDrop">
            <li><a>TX3100</a></li>
            <li><a>TX4200E</a></li>
        </ul>
  </li>	
  <li>
      <a><img class="arrow" id="tmArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png" />
		TM Series
      </a>

        <ul class="navDrop" id="tmDrop">
            <li><a>TM8115</a></li>
        </ul>
    </li>
    <li><a><img class="arrow" id="cdArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png" />
		Cash Drawers
        </a>

        <ul class="navDrop" id="cdDrop">
            <li><a>CR3110</a></li>
            <li><a>CR6000</a></li>
        </ul>
    </li>
    <li>
        <a><img class="arrow" id="periphArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png" />
		Peripherals</a>

        <ul class="navDrop" id="periphDrop">
            <li><a>Printers</a></li>
            <li><a>Cash Drawers</a></li>
            <li><a>Pole Displays</a></li>
            <li><a>Magnetic Stripe Readers</a></li>
        </ul>
    </li>
    <li>
        <a>Resources</a>
    </li>
	<li>
        <a>Support</a>
    </li>

</ul>

CSS

#posiNav {
    list-style-type: none;
    background-color: rgb(179, 35, 23);
    color: white;
    width: 150px;
    text-align: center;
}
#posiNav a {
    display: block;
    position: relative;
}
#posiNav li {
    padding: 5px 0px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(204, 204, 204);
}
#posiNav li:hover {
    background-color: gray;
}
#ksDrop {
    display: none;
}
.navDrop {
    background: rgb(221, 220, 220);
    border-style: none;
    color: black;
    list-style-type: none;
    margin-left: 10px;
}
.arrow {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 15px;
    cursor: pointer;
}

#ksDrop {
    display: none;
}
#txDrop {
    display: none;
}
#tmDrop {
    display: none;
}
#cdDrop {
    display: none;
}
#periphDrop {
    display: none;
}

JavaScript

$('.arrow').click(function () {
    var id = $(this).attr("id");
    
    
    if($(this).hasClass('rot')) {
        $(this).removeClass('rot').rotate({
            duration: 200,
            angle: 180,
            animateTo:1
      });
    } else {
        $(this).addClass('rot').rotate({
            duration: 200,
            angle: 0,
            animateTo:180});
    };

    if (id == 'ksArrow') {
        $('#ksDrop').slideToggle("slow");
    }
    if (id == 'txArrow') {
        $('#txDrop').slideToggle("slow");
    }
    if (id == 'tmArrow') {
        $('#tmDrop').slideToggle("slow");
    }
    if (id == 'cdArrow') {
        $('#cdDrop').slideToggle("slow");
    }
    if (id == 'periphArrow') {
        $('#periphDrop').slideToggle("slow");
    }
});