JSFiddle - React, Tailwind, and code Playground

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" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Dave Shea" />
    <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display" />
    <meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design." />
    <meta name="robots" content="all" />

    <title>css Zen Garden: The Beauty in CSS Design</title>

    <!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
    <script type="text/javascript"></script>
    
    <style type="text/css" media="all">
        @import "zengarden-sample.css";
    </style>
    
</head>

<!--


    This xhtml document is marked up to provide the designer with the maximum possible flexibility.
    There are more classes and extraneous tags than needed, and in a real world situation, it's more
    likely that it would be much leaner.
    
    However, I think we can all agree that even given that, we're still better off than if this had been
    built with tables.


-->
 
<body onload="window.defaultStatus='css Zen Garden: The Beauty in CSS Design';" id="css-zen-garden">

<div id="container">
    <div id="intro">
        <div id="pageHeader">
            <h1><span>css Zen Garden</span></h1>
            <h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
        </div>

        <div id="quickSummary">
            <p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>
            <p class="p2"><span>Download the sample <a...

CSS

html {margin: 0;
    padding: 0;}
    
body {margin: 0; padding: 0; text-align: centre; background-color: #000000; color; #f1e5b1;    }

p {margin-top: 0; 
    text-align: justify;
    color: #f1e5b1;
    font-size: 12px;
    padding-left: 32px;}
ul{
    color: #f1e5b1;
}
    
a:link {font-weight: bold; 
    text-decoration: none; 
    color: #aebaf2; /* this was changed */}
    
a:visited {font-weight: bold; 
    text-decoration: none; 
    color: #D4CDDC;}
    
a:hover, a:active { text-decoration: underline; 
    color: #aebaf2;}
    
acronym {border-bottom: none;}

/* MAIN ELEMENTS*/

#container{ 
    position: relative;
    padding: 0px;
    margin: 0 auto;
    width: 800px;
    }

#intro{
    color: #f1e5b1;
    padding-left: 0px;
    top:0;
    bottom:0;
    left:0;
    opacity: 0.65;
    margin: 0 auto;
    width: 800px;
    height: 1883px; 
    position: absolute;
    background-image: url(images/wallpaper.jpg);
    }


#pageHeader{
    position: relative;
    }

#pageHeader h1{    
    padding: 0px;
    height: 258px;
    width: 800px;
    margin: 0;
    background-image: url(images/headerIMG.jpg);
    
    }

#pageHeader h1 span{
    display: none;
    }

#pageHeader h2 span{
    display: none;
    }    
    
#quickSummary p1 span{display:none;}

#quickSummary{}

#preamble{
    width: 550px;
    color: #f1e5b1;
    padding-top: 97px;
    font-size: 12px;
    }
    
#preamble h3{display: none;}

#supportingText{
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    opacity: 0.65;
    margin: 0 auto;
    width: 550px;
    color: #f1e5b1;
    }

#explanation h3 span{display: none;}

#explanation{
    padding-top: 607px;
}

#participation{
    padding-top: 100px;
}

#participation h3 span{display:none;}

#benefits{
    padding-top: 107px;
}

#benefits h3 span{display: none;}

#requirements {padding-top: 110px;}

#requirements h3 span{display:none;}

#footer{
    padding-top: 120px;
    padding-left: 310px;
    font-size: 20px;
    
}
   ...