JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<div id="wrapper">
            <div id="head"></div>
            
            <div id="hiddenone"><p>content one</p></div>
            <div id="hiddentwo"><p>content two</p></div>
            <div id="hiddenthree"><p>content three</p></div>
            <div id="hiddenfour"><p>content four</p></div>
            <div id="hiddenfive"><p>content five</p></div>
            <div id="hiddensix"><p>content six</p></div>
            
            
            <div id="projectsgrid">
                <div class="project" id="one"></div>
                <div class="project" id="two"></div>
                <div class="project" id="three"></div>
                <div class="project" id="four"></div>
                <div class="project" id="five"></div>
                <div class="project" id="six"></div>
            </div>
            
            <div id="foot"></div>
        </div>

CSS

html {
    box-sizing: border-box;
    background-color: #d8d8d8;
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
    font-family: 'Crimson Text', serif;
    text-align:center;
    padding-top: 0px;
    overflow: scroll;
    overflow-x: hidden;
}

#wrapper {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

#head {
    height: 120px;
    width: 780px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

#foot {
    height: 120px;
    width: 780px;
    margin: 0 auto;
    float: left;
    border: 1px solid black;
}

#toptext {    
    font-family: 'League Spartan';
    font-weight: bold;
    font-size: 140%;
    width: 40%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#bottomtext {    
    width: 40%;
    font-style: italic;
    font-size: 150%;
    font-weight: 400;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#projectsgrid {
    width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.project {
    width: 240px;
    height: 60px;
    margin: 10px;
    float: left;
    background-color: #fff;
    border: 1px solid black;
}

#hiddenone {
    width: 100%;
    height: 300px;
    display: none;
    border: 1px solid black;
}

#hiddentwo {
    width: 100%;
    height: 300px;
    display: none;
    border: 1px solid black;
}

#hiddenthree {
    width: 100%;
    height: 300px;
    display: none;
    border: 1px solid black;
}

#hiddenfour {
    width: 100%;
    height: 300px;
    display: none;
    border: 1px solid black;
}

#hiddenfive {
    width: 100%;
    height: 300px;
    display: none;
    border: 1px solid black;
}

#hiddensix {
    width: 100%;
    height: 300px;
    display: none;
    border: 1px solid black;
}

JavaScript

$(function () {
                
            $("#one, #hiddenone").click(function(){
                $("#hiddentwo, #hiddenthree, #hiddenfour, #hiddenfive, #hiddensix").slideUp("slow");
                $('.active').removeClass('active');
                $("#hiddenone").slideToggle("slow");
                $(this).toggleClass("active");
                return false;
            }); 
            
            $("#two, #hiddentwo").click(function(){
                $("#hiddenone, #hiddenthree, #hiddenfour, #hiddenfive, #hiddensix").slideUp("slow");
                $('.active').removeClass('active');
                $("#hiddentwo").slideToggle("slow");
                $(this).toggleClass("active");
                return false;
            }); 
                
            $("#three, #hiddenthree").click(function(){
                $("#hiddenone, #hiddentwo, #hiddenfour, #hiddenfive, #hiddensix").slideUp("slow");
                $('.active').removeClass('active');
                $("#hiddenthree").slideToggle("slow");
                $(this).toggleClass("active");
                return false;
            }); 
                
            $("#four, #hiddenfour").click(function(){
                $("#hiddenone, #hiddentwo, #hiddenthree, #hiddenfive, #hiddensix").slideUp("slow");
                $('.active').removeClass('active');
                $("#hiddenfour").slideToggle("slow");
                $(this).toggleClass("active");
                return false;
            }); 
                
            $("#five, #hiddenfive").click(function(){
                $("#hiddenone, #hiddentwo, #hiddenthree, #hiddenfour, #hiddensix").slideUp("slow");
                $('.active').removeClass('active');
                $("#hiddenfive").slideToggle("slow");
                $(this).toggleClass("active");
                return false;
            }); 
                
            $("#six, #hiddensix").click(function(){
                $("#hiddenone, #hiddentwo, #hiddenthree,...