JSFiddle - React, Tailwind, and code Playground

by tchalvakspam

HTML

<!DOCTYPE html>
<html>
 <head>
    <title>Nav Interface</title>


    <!-- Should declare a character set here eventually .e.g. utf-8 -->
<style type="text/css">
body {background:#eeeeee;min-width:700px}
#admin-header{
    position:relative;
    width:100%;
    min-width:800px;
    height:60px;
    border-bottom:10px solid #99a4de;
}
#logo-container{
    position:absolute;
    top:0;
    left:0;
}
#header-content{
    position:absolute;
    bottom:0;
    left: 160px;
    min-width:500px; /* Plus 160ish px from the logo container */

}
#admin-nav{
    margin:4px auto 0;
    color:rgba(40, 40, 40, .5);
}
#admin-nav a, #admin-nav a:link, #admin-nav a:visited{
    text-decoration:none;
    color:black;
    font-family:Impact, Charcoal, sans-serif;
    text-shadow: 0 1px 2px white;
}
#admin-nav a:hover{
    text-decoration:underline;
    color:orangered;
    text-shadow:none;
}
#admin-nav ul{
    list-style-type:none;
    text-indent:0;
    margin:0 0 -3px; /* Needs a negative bottom margin for some annoying reason */
    text-align:center;
    padding:0 1em;
    border:1px solid lightgray;
    border-bottom: 10px solid #99a4de;
    font-size:130%;
}
#admin-nav li{
    margin:0;
    padding:0 15px 3px;
    text-align:center;
    display:inline-block;
    border-right:1px solid lightgray;
}
#admin-nav li:hover, #admin-nav li.current{
    background-color:#99a4de;
}
#admin-nav li.last{
    border-right:none;
}
#logged-in-as{
    width:100%;
    background-color:#99a4de;
    text-align:center;
    font-family:Georgia, Times, serif;
}
</style>
  </head>
<body>
<div id='admin-header' style="background:url(/assets/headback1.jpg) no-repeat right top #b8bee0">
    <div id='logo-container' style='width:150px;height:60px'>
        <a href="/">
            <img src="/assets/logo_small.png"title='View Main Site' width="150" height="60">
        </a>
    </div>    
    <div id='header-content'>
        <div id='admin-nav'>
            <ul>
                <li class=''><a...