JSFiddle - React, Tailwind, and code Playground

HTML

<?php
/*
 * Tricia Reilly
 * CSCE A360 Final Project
 * Dr. Kirk Scott
 * 1 May 2017
 *
 * header.php
 * The header for all the pages
 */
?>
<!DOCTYPE HTML>
<html>
    <head>
        <title>Foundation Finder</title>
        <noscript>
        <link href="https://fonts.googleapis.com/css?family=Antic+Didone|Crimson+Text|Josefin+Sans|Raleway" type="text/css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="C:\wamp64\www\Foundation_Finder\css\style.css" />
        <!--<link rel="stylesheet" href="css/style-desktop.css" />-->
        </noscript>
        <script>
            /* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
            function openSidebar() {
                document.getElementById("ff_sidebar").style.width = "25%";
                document.getElementById("main").style.marginLeft = "25%";
                document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
            }
            /* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
            function closeSidebar() {
                document.getElementById("ff_sidebar").style.width = "0";
                document.getElementById("main").style.marginLeft = "0";
                document.body.style.backgroundColor = "white";
            }
        </script>
    </head>
    <body>
        <!-- ********************************************************* -->
        <div id="ff_sidebar" class="sidebarnav">
    <a href="javascript:void(0)" class="hidebtn" onclick="closeSidebar()">&times;</a>
    <a href="http://localhost/Foundation_Finder/index.php">Home</a>
    <a href="http://localhost/Foundation_Finder/libs/foundation_form.php">Add a Foundation</a>
    <a href="#">Link 3</a>
</div>

        <div id=main>
            <span style="cursor:pointer" onclick="openSidebar()">&#9776;</span>
            <header...

CSS

/*

font-family: 'Raleway', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Antic Didone', serif;
font-family: 'Crimson Text', serif;
font-family: 'Georgia', serif;

*/

/*********************************************************************************/
/* Global                                                                        */
/*********************************************************************************/

/* Basic */
    @font-face {
    font-family: 'Heuristica Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Heuristica Bold'), url('fonts/Heuristica-Bold.woff') format('woff');
    }
    /*BOX*/
    *,*:before,*:after{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-o-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box}
    body {
        font-size: 13.5pt;
        font-family: sans-serif;
        background-color: #e3e9dc;
        font-family: 'Heuristic Regular', serif;
        color: #000000;
        letter-spacing: -1px;
    }
    h1,h2,h3,h4 {
        font-family: 'Josefin Sans', sans-serif;
        font-style: normal;
        font-weight: 400;
    }
    h1 {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 23px;
        line-height: 23px;
        font-variant: small-caps;
        color: #152235;
    }
    h2 {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 17px;
        line-height: 23px;
        font-variant: small-caps;
        color: #007897;
    }
    h3 {
        font-size: 14px;
        line-height: 23px;
        font-variant: small-caps;
        color: #152235;
    }
    h4 {
        font-size: 11px;
        line-height: 23px;
        color: #152235;
    }
    body{
        font-family: 'Heuristic Regular', serif;
       margin: 0px;
       padding: 0px;
    }
    div{
       margin: 0px;
       padding: 0px;
    }
    /*img{
       border: 0px;
       margin: 0px;
       padding: 0px;
    }
    table{
       margin:...