JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang ="en">
<head>
    <title>HOMEPAGE</title>
    <!-- Custom Scripts and Styles -->
    <link rel="stylesheet" type="text/css" href="CSS/normalize.css" />
    <link rel="stylesheet" type="text/css" href="CSS/c3it_base_css.css" />
    <link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>  
     <script type="text/javascript" src="JS/c3it_essential_js.js"></script> 
</head>
<body>
    
<div id="page">
    
<div id="leftside">
<div id="inner_left">

    
    <div id="content">
    
    <h1>Fear of a Bot Planet</h1>
<p>Yes, except the Dave Matthews Band doesn't rock. Doomsday device? Ah, now the ball's in Farnsworth's court! Bender, hurry! This fuel's expensive! Also, we're dying! Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!</p>
<h2>Insane in the Mainframe</h2>
<p>I daresay that Fry has discovered the smelliest object in the known universe! Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? But existing is basically all I do!</p>
<ul>
<li>No, just a regular mistake.</li>
<li>I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</li>
<li>You're going back for the Countess, aren't you?</li>
<li>I love this planet! I've got wealth, fame, and access to the depths of sleaze that those things bring.</li>
</ul>

<div class="expandable">
<h3>The Prisoner of Benda</h3>
<div class="expansion_text">
<p>Bender, I didn't know you liked cooking. That's so cute. The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. This is the worst part. The calm before the battle. Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!</p> ...

CSS

body, html {
    /*font: normal 18px "Lucida Sans Unicode", "Lucida Grande", sans-serif; */
    font: normal 14pt 'Rokkitt', serif;
text-align:justify;
height: 100%;
}

img { max-width: 100% }

#page{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: white;
}

#leftside{
    float: left;
    height: 100%;
    width: 60%;
}

/* The inner containers are incase we find the full layout too spread out at 1920x1080+; we can centralise it using max-width */

#inner_left{
    float: right;
    width: 100%;
    height: 100%;
}
    #header, #content, #footer{
        margin: 0 4em;
    }
    #header{
        background-color: white;
    }
        .header_img{
            width: 100%;
        }
    #content h1{
        font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
        font-size: 2.2em;
        color: #2956B2;
        text-decoration: none;
        font-weight: normal;
    }
    #content h2{
        color: #7DBD00;
        text-align: left;
    }
    #content .expansion_header{display: block}

    #content h3{
        padding: 0.1em 1em;
        color: #2956B2;
        -moz-border-radius: 8em 1em 8em 1em;
        border-radius: 8em 1em 8em 1em;
        border: 2px solid #2956B2;
        display: inline;
    }
        
    #footer{
        background-color: grey;

    }

#rightside{
    position: fixed;
    right: 0em;
    height: 100%;
    width: 40%;
    background-color: green;
    z-index:0;
}
    
#inner_right{
    float: left;
    width: 100%;
    height: 100%;
    background-color: #2956B2;
}
    #navbar_container{
        width: 100%;
        font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
        font-size: 2.2em;
        text-align: left;
    }
    ul#navbar{
        list-style: none;
        margin: 0;
        padding: 0;
        
    }
        li.nav_option{
            
        }
        ul#navbar li.nav_option a{
  ...

JavaScript

$(document).ready(function() {
    
    //br is the most efficient way to get desired effect with inline h3's
   $("<br/>").insertBefore("h3");
   
   //collapse all expandable sections on page load
   $(".expansion_text").slideToggle("slow");
});

//Click for expansion
$(function(){
    $("h3").click( function(){
        $(this).siblings(".expansion_text").slideToggle( "slow", function(){
            if ( $(this).is(":visible") ){
                $("html, body").animate({
                scrollTop: $(this).offset().top
                }, "slow");
            }
        });
        
    });
});