JSFiddle - React, Tailwind, and code Playground

by JoshC

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Taft Power Equipment</title>
        <link rel="stylesheet" type="text/css" href="js\jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <!--[if lt IE 7]>
            <link rel="stylesheet" type="text/css" href="style-ie.css" />
        <![endif]-->
        <script type="text/javascript" language="Javascript" src="js\jquery.min.js"></script>
        <script src="js/jquery.horizontalNav.js"></script>
        <script src="js\jquery-migrate-1.2.1.js"></script>
        <script>
            // When document is ready...
            $(document).ready(function() {
                $('.full-width').horizontalNav({}); // Call horizontalNav on the navigations wrapping element
                $("#main-content").load("home.html");
            });
        </script>
        <script>
            $(document).ready(function() {
                $("#home").click(function() {
                    $("#main-content").load("home.html");
                });
                $("#work").click(function() {
                    $("#main-content").load("work.html");
                });
                $("#blog").click(function() {
                    $("#main-content").load("blog.html");
                });
                $("#about").click(function() {
                    $("#main-content").load("about.html");
                });
                $("#contact").click(function() {
                    $("#main-content").load("contact.html");
                });
                $("#parts").click(function() {
                    $("#main-content").load("parts.html");
                });
                $("#people").click(function() {
                   ...

CSS

* {

    margin: 0;

    padding: 0;

}

html, body {

    margin:0;

    padding-top:0;

    height:100%;

}

p, li {

}

a {

}

b {

}

table {

    border-collapse: collapse;

    /* 'cellspacing' equivalent */

}

table th {

    font: 1.5em Tahoma;

    border: 3px solid #0e7079;

    border-radius: 6px;

    padding: 0em 1em 0em 1em;

}

table td {

    font: 1.3em sans-serif;

    border-radius: 1px;

    border: 0px solid #0e7079;

    padding: 0 1em 0 1em;

}

h1 {

    font: 2.0em Tahoma, sans-serif;

    color: white;

    height: 0px;

}

h2 {

    font: 1.8em Tahoma, sans-serif;

    color: green;

    margin-bottom: 10px;

}

ul {

    margin-left: 0px;

}

img {

    border: none;

}

/* ========================================================================================== */

#page-wrap {

    !margin: 10px auto;

    display: inline;

}

#inside {

    width: 960px;

    margin: 0 auto;

    background: blue;

    min-height:100%;

    position:relative;

}

#searchbar {

    width: 30%;

    background: #747474;

    border: 1px solid red;

    display: inline-block;

}

#results {

    background: #4c4c4c;

    min-height: 100px;

    width:50%;

    display: inline-block;

    border-radius: 6px;

    border: 1px solid #0e7079;

}

#results b {

    font: 2.0em Tahoma, sans-serif;

    color: white;

    height: 0px;

}

#main-content {

    margin-bottom: 10px;

    padding:10px;

    padding-bottom:30px;

    /* Height of the footer */

}

#header {

}

#menu {

}

#left-sidebar {

    width: 150px;

    float: left;

    padding-left: 15px;

    padding-top: 20px;

}

#footer {

    background: #000000;

    text-align: center;

    padding-top: 0px;

    color: white;

    position:absolute;

    bottom:0;

    width:960px;

    height:30px;

    /* Height of the footer */

}

/* ========================================================================================== */

.horizontal-nav {

    background: #efefef;

   ...