JSFiddle - React, Tailwind, and code Playground

by Hui Zheng

HTML

<body>
    <div id="pageContainer">
        <header id="pageHeader">this is header</header>
         <div id="contentContainer" class="clearfix">
            <nav id="pageNav">in nav</nav>

          <section id="pageSection">
                <header class="sectionHeader">header</header>
                <article class="sectionArticle">
                    article
                    <form>
                    <input type="color">test color</input>
                                        <input type="search">search</input>
                    
                    <input type="week" name="event" step="2" min="2011-W25" max="2011-W38" /><br/>
                    <p><input type="text" name="example" required /></p>
                        
                    <input type="tel" name="usphone" pattern="^[2-9]\d{2}-\d{3}-\d{4}$" /><br/>
 <datalist id="salaries"> 
                        <option value="40,000+" />
                    <option value="60,000+" /> 
                    <option value="80,000+" /> 
                    <option value="100,000+" /> 
                    <option value="120,000+" />
</datalist>
                   
                   
                    <p><input type="text" name="salary" placeholder="Enter desired salary" list="salaries" /></p>
                        
                        <label>speech</label>    <input type="text" x-webkit-speech />
                        <progress>working...</progress>
                        
              </form>
                    <p> <meter min="0" low="20" high="80" optimum="90" max="100" value="90">Space left: </meter> 90% </p>
                    
              </article>
                <footer class="sectionFooter">section footer</footer>
            </section>

             <aside id="pageAside">page aside</aside>
        </div>
        <footer id="pageFooter">page footer</footer>
    </div>
</body>

CSS

/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section 
{ display: block; }

/* light css reset */
* { margin : 0; padding : 0; }
h2, h3, h4, h5, p, ul, ol  { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}

/* =page level container */
#pageContainer {
    margin: 0px auto 0px auto;
    width: 960px;
}

#pageHeader {
    margin:0px auto 0px auto;
    width:960px;
    height:82px;
    position:relative;
}

#contentContainer {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    min-height: 500px;
}

#pageFooter {
    margin: 0px auto;
    padding-bottom: 20px;
    width: 960px;
    position: relative;
}

/* Clear Floated Elements */
.clearfix:before, .clearfix:after {
    content: "\0020"; 
display: block; height: 0; visibility: hidden;}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

JavaScript

var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
  //socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
    socket.onclose = function(event) { alert('closed'); }
        
        
if (navigator.geolocation) {
 
  navigator.geolocation.getCurrentPosition(function(position) {
    var latLng = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
  }, errorHandler);
}