JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<nav>
    <ul class="cards">
        <li class="card">
            <div class="card-title">Full-Time MBA</div>
            <div class="card-content cards">
            <ul class="menu-list-sub ">
                <li class="card">
                    <div class="card-title">Admissions</div>
                    <div class="card-content">
                    <ul>
                        <li><a href="admissions/index.html">Deadlines &amp; Requirements</a>

                        </li>
                        <li><a href="admissions/online_application.html">Online Application</a>

                        </li>
                        <li><a href="admissions/why_mba.html">Why A Goizueta MBA?</a>

                        </li>
                        <li><a href="admissions/international.html">International Applicants</a>

                        </li>
                        <li><a href="admissions/joint_degree/index.html">Joint Degree Applicants</a>

                        </li>
                        <li><a href="admissions/military_applicants.html">U. S. Military Applicants</a>

                        </li>
                        <li><a href="admissions/minority_applicants.html">Minority Applicants</a>

                        </li>
                        <li><a href="admissions/fellowships/index.html">Funding Your MBA</a>

                        </li>
                        <li><a href="admissions/faq.html">FAQ</a>

                        </li>
                    </ul>
                    </div>
                </li>
                <li class="card">
                    <div class="card-title">One-Year MBA</div>
                    <div class="card-content">
                    <ul class="menu-list-sub">
                        <li><a href="one_year_mba/index.html">Overview</a>

                        </li>
                        <li><a href="one_year_mba/program_structure.html">Program Structure</a>

                        </li>
                      ...

CSS

nav {
    background: hsl(0, 0%, 100%);
}
.cards {
    background: hsl(0, 0%, 90%);
}
.card-content {
    background: hsl(0, 0%, 80%);
}


.cards {
    position: relative;
    overflow-x: hidden;
    min-height: 300px;
    overflow-y: auto;
}
.card-title {
    padding: 1em;
    position: relative;
    
    border-top: 2px solid rgba(255,255,255,0.7);        
    
    cursor: pointer;
}
.card-title:after {
    content: '';
    
    height: 0;
    width: 0;
    position: absolute;
    right: 5%;
    
    border-width:10px 0 10px 10px;
    border-color: transparent #FFF;
    border-style: solid;
}
.card-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    
    -webkit-transform: translateX(100%);
    transition: -webkit-transform 0.4s;
}
.card.is-active > .card-content {
    z-index: 2;
    
    -webkit-transform: translateX(0);
}
.card-content-title,
.card-back {
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    font-size: 1.5em;
}
.card-back {
    width: 100%;
    padding: 1em;
    padding-left: 2em;
    margin: 0;
    
    border: 0 none;
    
    background: transparent;
    
    text-align: left;
    font-size: 1em;
    
    cursor: pointer;
}
.card-back:before {
    content: '';
    
    height: 0;
    width: 0;
    position: absolute;
    left: 1em;
    
    border-width:10px 10px 10px 0;
    border-color: transparent #FFF;
    border-style: solid;
}

JavaScript

$('.card-title').click(function() {
    $(this).parent('.card').addClass('is-active');
});

$('.card-content').each(function() {
    var cardContent = $(this);
    var button = $('<button />').addClass('card-back').text('Back');
    var title = $('<div />').addClass('card-content-title').text(cardContent.parent().find('> .card-title').text());
    var fragment = document.createDocumentFragment();
    
    $(fragment).append(button);
    
    cardContent.prepend(fragment);
});

$('.card-back').click(function() {
    $(this).closest('.card.is-active').removeClass('is-active');
});