JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<h1>Tournaments</h1>
<ul>
            <li><a href="#" class="men-trigger">Men's</a></li>
            <li><a href="#" class="women-trigger">Women's</a></li>
            <li><a href="#" class="coed-trigger">Coed</a></li>
            <li><a href="#" class="all-trigger">All</a></li>
</ul>

CSS

body { padding:10px; }
h1 { margin-bottom:10px; padding-bottom:10px; border-bottom:#000 1px dotted;  }
ul { width:150px; }
li { margin-bottom:5px; }
a, a:active { display:block; padding:5px; background:#eee; text-decoration:none; color:#359; border:transparent 1px solid; }
a:hover { border:#000 1px solid; }
.active { background:#000; color:#fff; }

JavaScript

/*Volleyball schedule nav bar*/
$('[class$="trigger"]').click(function() {  
    $(this).addClass('active').parent('li').siblings().find('a').removeClass('active');
});

/*$('.men-trigger').click(function() {  
    $(this).addClass('active');
    $(this).prev().siblings().find('active').removeClass('active');
});

$('.women-trigger').click(function() {  
    $(this).addClass('active');
    $(this).prev().siblings().find('active').removeClass('active');
});

$('.coed-trigger').click(function() {  
    $(this).addClass('active');
    $(this).prev().siblings().find('active').removeClass('active');
});

$('.all-trigger').click(function() {  
    $(this).addClass('active');
    $(this).prev().siblings().find('active').removeClass('active');
});*/