JSFiddle - React, Tailwind, and code Playground

by Dan Mathisen

HTML

<!DOCTYPE html>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="Javashaun.js"></script>
        <link type="text/css" rel="stylesheet" href="main.css" />
        <title>Shaun Andersons first page</title>
    
<body>
       
    
              
        <img class="topimage" src="http://i.imgur.com/acP2knb.png" alt="SA design Logo" />
        
        
       <table class="main-nav">
            <thead>
                <tr>
                    <th><div><a href="index.html">Home</a></div></th>
                    <th><div><a href="Cv.html">Resume</a></div></th>
                    <th><div><a href="Portfolio.html">Portfolio</a></div></th>
                    <th><div><a href="Contact.html">Contact</a></div></th>
                </tr> 
            </thead>
        </table>
      
    
     
   <div id="bodydiv">
       <div class="indexwrap"> 
     
        <div id="indexleft"> 
            <h2 class="indextitle">Hi, </h2>
            <br><br>
            <p class="indexpara"> 
               </p>
        </div>
       
       <div id="indexright"> 
            rightindex
        </div>
       </div>
       
       
        
        <table class="table2">
            <thead> 
                <tr>
                    <th id="th4">
                        <div id="mailc">
                            <a class="maillink" href="mailto:[email protected]" id="sendmail"><p>[email protected]</p></a>
                        </div>  
                    </th>
                </tr>        
            </thead>
        </table> 
       
   </div>      
        <div id="footer">
            <table id="bottomtable">
            <thead>
                <tr>
                    <th class="th1">
                        <div class="clickt2">
                            <a class="a2" href="index.html">Home</a>
                        </div>
                    </th>
                    <th...

CSS

/* Global Instructions */
h1{
    font-family: sans-serif; text-align: center;
}

body{
    background-color: #FFFAFA;
    margin:0;
   
}



/*logomain css*/

.topimage{
    position:absolute;
    width:72%;
    margin-left:15.5%;
    margin-right:12.5%;
    margin-top: 2.5em;
    height:600px;
    z-index:0;
    
       
}

#logotable{
    width:40%;
}

/* TOP NAV BAR*/
.main-nav {
    position:inherit;
    width:25%;
    margin-left:50%;
    margin-top: 8em;
    z-index:2;
}

.main-nav th {
    padding:0.1;
    border-left:1px solid black;
}
.main-nav th:last-child {
    padding:5px;
    border-right:1px solid black
}

.main-nav th div {                
    height: 1.5em; 
    width: 5em;
    color: black;
    background-color: #FFFAFA; 
    margin: auto;
    border-radius:0em;
    text-align: center;
    border-radius: 5px;
}
    
.main-nav th div:hover {
    text-decoration: underline;
}

.main-nav a {
    text-decoration: none;
    color: black;
    font-family: Verdana;
    text-align: center;
}





/*Main Body division*/

#bodydiv{
    position:relative;
    background-color:#FFFAFA;
    height:500px;
    width:70%;
    margin-top:9em;
    margin-left: 15%;
    margin-right:15%;
    margin-bottom:3em;
    border-radius: 1em;
    box-shadow: -4px -4px 8px 3px lightgrey;
    z-index:1;
}

/* Email Link*/

.table2{
    width:40%; 
    margin-left:auto; 
    margin-right:auto;
    margin-top:1em;
    text-decoration: none;
}

/* th4 is also referenced here in html */

#mailc{
    text-decoration: none;
}

#sendmail{
    text-decoration:none; 
    color: black;  
}

.maillink{
    
}

/*footer*/

#footer{
    
    background-color:black;
    max-width: 100%;
    max-height: 3em;
    color:black;
    clear:both;
    text-align:center;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
   
    
}

/* BOTTOM NAV BAR*/

#bottomtable{
    width:40%; 
    margin-left:auto; 
    margin-right:auto;
}

.th1{
    padding: 0.1; ;
    border-left:1px...