JSFiddle - React, Tailwind, and code Playground

by tobeeornot

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    </head>
<body>
<div id="wrapper">
<div id="header">
        <div id="shoppingCart"><a href=".htm" title="shop">shop</a></div>
    <div id="joinButton"><a href="mailto:[email protected]" title="join">join</a></div>
    <div id="mainNav">
          <ul>
            <li><a href="index.htm">about us</a></li>
            <li><a href="products.htm">products</a></li>
            <li><a href="order.htm">custom order</a></li>
            <li><a href="contact.htm">contact us</a></li>
            <li><a href="recipe.htm">recipes</a></li>
          </ul>
<!-- end #header --></div>         
<img src="http://i1200.photobucket.com/albums/bb328/tobeeornot/header_bg.jpg" width="960" height="115" alt="header" /><img src="http://i1200.photobucket.com/albums/bb328/tobeeornot/indentifier.jpg" width="960" height="65" /></div>
<div id="mainContent">    
    <h2>BLISS NO.5</h2><!--The clear property specifies which sides of an element where other floating elements are not allowed.-->
    <h1>A New Dimension in Good Taste</h1>
    <div id="sideImage"><img src="http://i1200.photobucket.com/albums/bb328/tobeeornot/cup_tin.png" alt="cup" width="355" height="223"/></div><!--make sure png image is set upon a transparent canvas in Fireworks (modify/canvas/canvas color/transparent-->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco aboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- end #mainContent --></div>
    <div id="footer">
    <div id="footerLeft">
      <p>&copy;...

CSS

@charset "utf-8";

html,
body {
    margin: 0px;
    padding: 0px;
}

body {
    background: #4d3821;
    font: 100% "Times New Roman", Times, serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* ^2 --------------- limited-scale reset ---------------- */
h1,h2,h3,h4,h5,h6,p,address,blockquote,div,ul,li {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;    
}

h1 {
    color: #ffffff;
    font-size: 25px;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    margin-bottom: 0;
    margin-top: 0;
    margin-left: 20px;
}

h2 {
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 0;
    margin-left: 20px;
}
h3 {
    color: #ffffff;
    font-size: 1.3em;
    font-weight: normal;
    margin: 1.25em 0 .5em;
}

h1,
h2,
h3 {
    clear: both;
    text-align: left;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #afd8d8;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
    color: #8dadaf;
    text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
}


/* ^3 ------------------ global classes --------------------------- */
.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}

.clearRight {
    clear: right;
}

.clearLeft {
    clear: left;
}

.clearBoth {
    clear: both;
}

.callOut {
    background: #e1d8b9;
    margin-bottom: 25px;
    padding: 15px;
}

.callOut h1 {
    border-bottom: 2px solid #193742;
    color: #193742;
    font-size: 1.2em;
    margin-bottom: .5em;
    padding-bottom: .25em;
}

.quote {
    font-style: italic;
}

/* ~~ this fixed width container surrounds the other divs ~~...