JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<body>
  <div id="main">
    <div id="header">
      <div id="logo">
        <div id="logo_text">
          <h1><a href="index.html">Pascal Dulieu</span></a></h1>
          <h2>Digtial portfolio.</h2>
        </div>
      </div>
<div id="nav">
   <ul id="nav_wrapper">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="job.html">Job</a></li>
      <li><a href="course.html">Course</a>
           <ul>
                <li><a href="#">Test1</a></li>
                <li><a href="#">Test2</a></li>
                <li><a href="#">Test3</a></li>
                <li class="selected"><a href="#">Test4</a></li>
            </ul>
          </li>
    </ul>
</div>
    <div id="site_content">
      <div class="sidebar">
        <!-- sidebar items -->
        <h3>Information.</h3>
        <h3>links</h3>
        <ul>
          <li><a href="#">CV</a></li>
          <li><a href="#"></a></li>
        </ul>
        <h3>college lectures</h3>
        <ul>
          <li><a href="#">Chris Smith</a></li>
          <li><a href="#">Imran Kahn</a></li>
          <li><a href="#">Saj Mawnwoollah</a></li>
         </ul>
      </div>
      <div id="content">
        <!-- page content here -->
        <h1>Courses I have finished.</h1>
        <p>
      </div>
    </div>
    <div id="footer">
     Copyright &copy; Pascal Dulieu.
    </div>
  </div>

CSS

html {
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
}
body {
    font: normal .80em'trebuchet ms', arial, sans-serif;
    background: #F0EFE2 url(background.png) repeat;
    color: #000;
}
p {
    padding: 0 0 20px 0;
    line-height: 1.7em;
}
img {
    border: 0;
}
h1, h2, h3, h4, h5, h6 {
    font: normal 175%'century gothic', arial, sans-serif;
    color: #000;
    margin: 0 0 15px 0;
    padding: 15px 0 5px 0;
}
h2 {
    font: normal 175%'century gothic', arial, sans-serif;
}
h4, h5, h6 {
    margin: 0;
    padding: 0 0 5px 0;
    font: normal 120% arial, sans-serif;
}
h5, h6 {
    font: italic 95% arial, sans-serif;
    padding: 0 0 15px 0;
}
a, a:hover {
    outline: none;
    text-decoration: underline;
    color: #000;
}
a:hover {
    text-decoration: none;
}
.left {
    float: left;
    width: auto;
    margin-right: 10px;
}
.right {
    float: right;
    width: auto;
    margin-left: 10px;
}
.center {
    display: block;
    text-align: center;
    margin: 20px auto;
}
blockquote {
    margin: 20px 0;
    padding: 10px 20px 0 20px;
    border: 1px solid #E5E5DB;
    background: #FFF;
}
ul {
    margin: 2px 0 22px 17px;
}
ul li {
    list-style-type: circle;
    margin: 0 0 6px 0;
    padding: 0 0 4px 5px;
}
ul li ul {
    margin: 0 0 22px 17px;
}
ol {
    margin: 8px 0 22px 20px;
}
ol li {
    margin: 0 0 11px 0;
}
#main, #logo, #nav, #site_content, #footer {
    margin-left: auto;
    margin-right: auto;
}
#header {
    background: transparent;
    height: 202px;
}
#logo {
    width: 898px;
    position: relative;
    height: 148px;
    border-bottom: 2px solid #FFF;
}
#logo #logo_text {
    position: absolute;
    top: 20px;
    left: 0;
}
#logo h1, #logo h2 {
    font: normal 300%'century gothic', arial, sans-serif;
    border-bottom: 0;
    text-transform: none;
    margin: 0;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
    padding: 22px 0 0 0;
    color: #FFF;
    letter-spacing: -1px;
    text-decoration: none;
}
#logo_text...