JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<img src="http://yakko.cs.wmich.edu/~brain/SAS/images/logo.png" id="img-logo"/>
</div>
<div class="inner" style="overflow: visible; height: 178px;">
<nav class="navigation">
<ul>
<li class="li-2 active"><a href="#!/about" style="overflow: visible; height: 75px;"><span class="lbl">About Us</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
<ul style="display: none; opacity: 1;">
<li><a href="#!/history">History</a></li>
<li><a href="#!/mission">Mission Statement</a></li>
<li><a href="#!/solutions">Solutions</a></li>
<li><a href="#!/distribution">Distribution Area</a></li>
<li><a href="#!/logo">SAS Logo</a></li>
</ul>
</li>
<li class="li-1"><a href="#!/events" style="overflow: visible; height: 75px;"><span class="lbl">Events</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
<ul style="display: none; opacity: 1;">
<li><a href="#!/tradeshow">Trade Show</a></li>
<li><a href="#!/awesomeachievers">Awesome Achievers</a></li>
<li><a href="#!/whatshappening">What's Happening</a></li>
</ul></li>
<li class="li-3"><a href="#!/technology" style="overflow: visible; height: 75px;"><span class="lbl">Technology</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
<ul style="display: none; opacity: 0;">
<li><a href="#!/nexgen">NexGen</a></li>
<li><a href="#!/synergy">Synergy</a></li>
<li><a href="#!/whatshappening">EDI</a></li>
</ul>
</li>
<li class="li-4"><a href="#!/clients" style="overflow: visible; height: 75px;"><span class="lbl">Marketing</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
<li class="li-5"><a href="#!/sales" style="overflow: visible; height: 75px;"><span class="lbl">Sales</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
<li class="li-6"><a href="#!/mail"...
JavaScript
$(document).ready(function(){
$('.navigation li').on('click', function(){
$('#img-logo').css('width','212px');
$('#img-logo').css('height','70px');
});
});