JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<header>
   <div id="logo">
    <a href="#"></a>
   </div>
   <div style="display:inline;">
    <input style="margin-top:3px;" class="searchbox" type="text"/>
   </div>
 <ul>
  <li>
   <a href="#" title="Home">Home</a> 
  <li>
  <li>
   <a href="#" title="Profile">Profile</a> 
  </li>
  <li>
   <a href="#" title="Profile">Actions</a> 
  </li>
  <li>
   <a href="#" title="Profile">Invite Friends</a> 
  </li>
 </ul>


</header>
<section>
 <article> 
         <ul data-role="listview" data-theme="a" id="listofsalary">
             <li data-icon="false">
                 <a href="/Salary/SalaryDates/64">
                     <h3 id="salary_item_64">week 5 t/m 8</h3>
                     <i class="pep-list icon-chevron-right"></i>
                     </a>
</li>

<li data-icon="false">
<a href="/Salary/SalaryDates/63">
<h3 id="salary_item_63">week 1 t/m 4</h3>
<i class="pep-list icon-chevron-right"></i>
</a>
</li>

<li data-icon="false">
<a href="/Salary/SalaryDates/60">
<h3 id="salary_item_60">1</h3>
<i class="pep-list icon-chevron-right"></i>
</a>
</li>

<li data-icon="false">
<a href="/Salary/SalaryDates/59">
<h3 id="salary_item_59">week 45 t/m 48</h3>
<i class="pep-list icon-chevron-right"></i>
</a>
</li>

<li data-icon="false">
<a href="/Salary/SalaryDates/58">
<h3 id="salary_item_58">week 41 t/m 44</h3>
<i class="pep-list icon-chevron-right"></i>
</a>
</li>

<li data-icon="false">
<a href="/Salary/SalaryDates/57">
<h3 id="salary_item_57">week 37 t/m 40</h3>
<i class="pep-list icon-chevron-right"></i>
</a>
</li>

<li data-icon="false">
<a href="/Salary/SalaryDates/56">
<h3 id="salary_item_56">week 33 t/m 36</h3>
<i class="pep-list icon-chevron-right"></i>
</a></li>

<li data-icon="false">
<a href="/Salary/SalaryDates/55">
<h3 id="salary_item_55">week 29 t/m 32</h3>
<i class="pep-list icon-chevron-right"></i>
</a>
</li>

<li data-icon="false">
<a href="/Salary/SalaryDates/54">
<h3 id="salary_item_54">week 25 t/m 28</h3>
<i class="pep-list...

CSS

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }


html {
         height:100%; /* fix height to 100% for IE */
         max-height:100%; /* fix height for other browsers */
         padding:0; /*remove padding */
         margin:0; /* remove margins */

         background:#fff; /*color background - only works in IE */
         /* hide overflow:hidden from IE5/Mac */
         /* \*/
         overflow:hidden; /*get rid of scroll bars in IE */
         /* */
}
body {
         height:100%;
         max-height:100%;
         min-width:960px;
         overflow:hidden;
         padding:0;
         margin:0;
         font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
section {
         display:block;
         height:100%;
         max-height:100%;
         overflow:auto;
         position:relative;
         z-index:3;
         word-wrap:break-word;
         top:45px;
}
header {
         position:absolute;
         margin:0;
         top:0;
         display:block;
         width:100%;
         height:40px;
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
         background:#333333;
            background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;

}
#logo a {
            background: url("2.gif") no-repeat scroll 6px 2px transparent;
            color: #FFFFFF;
            display: block;
            height: 100%;
            margin-right: 5px;
            outline: medium none;
            text-indent: -9999px;
            width: 140px;
          ...