JSFiddle - React, Tailwind, and code Playground

by sbaydakov

HTML

<div class="partner_tabs">
<ul class="tab_titles">
<li>Lead Partners</li>
<li>Supporting Nonprofits</li>
</ul>
<div class="tab_lists">
<ul>
    <li><img alt="The Mission Continues" src="http://www.gotyour6.org/images/partners/the_mission_continues.png"></li>
</ul>
<ul>
	<li><img alt="Team Rubicon" src="http://www.gotyour6.org/images/partners/team_rubicon.png"></li>
	<li><img alt="The 6th Branch" src="http://www.gotyour6.org/images/partners/the_6th_branch.png"></li>
</ul>
</div>
</div>

CSS

.partner_tabs{position:absolute;bottom:50%;left:2em}
.partner_tabs .tab_titles{list-style:none;margin:0;padding:0}

.partner_tabs .tab_titles li{margin-right:16px;margin-right:1rem;background-color:#3c4868;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4f5e88), color-stop(100%, #293248));background-image:-webkit-linear-gradient(top, #4f5e88,#293248);background-image:-moz-linear-gradient(top, #4f5e88,#293248);background-image:-o-linear-gradient(top, #4f5e88,#293248);background-image:linear-gradient(top, #4f5e88,#293248);color:#fff;font-family:'Bebas Neue Regular';display:inline-block;*zoom:1;*display:inline;font-size:20px;font-size:1.25rem;padding:0.25em 1em;-webkit-border-radius:0.5em 0.5em 0 0;-moz-border-radius:0.5em 0.5em 0 0;-ms-border-radius:0.5em 0.5em 0 0;-o-border-radius:0.5em 0.5em 0 0;border-radius:0.5em 0.5em 0 0;box-shadow:0 0 1em #000;cursor:pointer}

.partner_tabs .tab_lists ul{list-style:none;margin:0;padding:0;list-style:none;background-color:#f7f6f6;display:block;margin:0;padding:0.5em 1em;min-width:10em;text-align:center;-webkit-border-radius:0 0.5em 0 0;-moz-border-radius:0 0.5em 0 0;-ms-border-radius:0 0.5em 0 0;-o-border-radius:0 0.5em 0 0;border-radius:0 0.5em 0 0;box-shadow:0 0 1em #000;position:relative;z-index:5;display:none}.partner_tabs .tab_lists ul li{display:inline-block;*zoom:1;*display:inline;margin-left:-4px;vertical-align:middle}.partner_tabs .tab_lists ul img{max-width:180px;height:auto;padding:0.25em 1em;max-height:75px;margin:auto}

JavaScript

$(function() {
    // 6 Pillars Pop-Up Tabs
    var lead_partners = $('.partner_tabs');
    $('.tab_titles li', lead_partners).click( function(e) {
        
        var index = $('.tab_titles li', lead_partners).index(this),
            current = $('.tab_lists ul:nth-child(' + (index+1) + ')', lead_partners);
        
        if( !(current.is(":visible")) ) {
            $('.tab_lists ul', lead_partners).removeClass('active').stop(true, true);
        }
        
        current.stop(true).addClass('active').slideUp();
    });
});