JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid" id="userProjectsSelectors">
        <div class="row-fluid">
            <div class="col-xs-1"></div>
            <div class="col-xs-10" id="allSlidersContainer">
                <h2 id="projSlidersHeader">PROJECTS</h2>
                <div class="projectSliders" id="projleadSlider">
                    <i class="fa fa-paw" aria-hidden="true"></i>  <h3>View Projects You Lead</h3>
                </div>
                <div class="projSliderContent" id="userLeadProjectsDiv" url='@routes.DashboardController.projectOptionPicker("userLead")'>
                    External doc loads here
                </div>
                <div class="projectSliders" id="projCollabSlider">
                    <i class="fa fa-users" aria-hidden="true"></i>  <h3>View Your Collaborated Projects</h3>
                </div>
                <div class="projSliderContent" id="userCollabProjectsDiv" url='@routes.DashboardController.projectOptionPicker("userCollab")'>
                    External doc loads here
                </div>
                <div class="projectSliders" id="projCreatorSlider">
                    <i class="fa fa-plus-square-o" aria-hidden="true"></i><h3> Create a New Project</h3>
                </div>
                <div class="projSliderContent" id="createNewProjectDiv" url='@routes.DashboardController.projectOptionPicker("newProject")'>
                    External doc loads here
                </div>
            </div>
            <div class="col-xs-1"></div>
        </div>

    </div>

<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSS

#userProjectsSelectors{
    margin-top: 10%;
}

i.fa {
    float: left;
    border: 2px solid white;
    border-radius: 3px;
    margin: 1%;
    padding: 3px;
    font-size: 1.6em;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
}

i+h3 {
    display: inline-block;
}

#projSlidersHeader {
    border-bottom: 5px double white;
    text-align: center;
    font-family: animal-fantastic;
    margin: 0px;
    padding-top: 15px;
    padding-bottom: 7px;
    background: rgba(23, 137, 159, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */ inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */ inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */ inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */ inset 0 -15px 30px rgba(0, 0, 0, 0.3); /* Dark Background */
}

#allSlidersContainer {
    border: 5px double white;
    border-radius: 10px;
    padding: 0%;
}

.projectSliders {
    background: rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), /* Exterior Shadow */ inset 0 1px rgba(255, 255, 255, 0.3), /* Top light Line */ inset 0 10px rgba(255, 255, 255, 0.2), /* Top Light Shadow */ inset 0 10px 20px rgba(255, 255, 255, 0.25), /* Sides Light Shadow */ inset 0 -15px 30px rgba(0, 0, 0, 0.3); /* Dark Background */
}

.projectSliders:hover {
    background: rgba(0,0,0,0.25);
    cursor: pointer;
}

#projleadSlider, #projCollabSlider {
    border-bottom: 4px solid white;
}

JavaScript

function loadDoc(myUrl, id) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById(id).innerHTML =
                this.responseText;
        }
    };
    xhttp.open("GET", myUrl, true);
    xhttp.send();
}

$(document).ready(function () {

    $('.projSliderContent').hide();

    $('.projectSliders').on('click', function () {
        var targetArea = $(this).next('.projSliderContent');
        var urlToPass = $(targetArea).attr('url');
        var idOftarget = $(targetArea).attr('id');
        $.when(loadDoc(urlToPass, idOftarget)).done(
            $(this).next('.projSliderContent').slideToggle("slow")
        );
    });
});