JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<div class="footer">
    <div class="cBox">
      <div class="copyrights">Copyright &copy; <a href="www.teleradtech.com">Telerad Tech</a> 2011 <span>Version : 3.0.0.30842</span></div>
      <div class="fl_r">
      
<!--      <span id="dtTime"></span>-->
      
        <div id="footerNotes" class="footerIcon">
            <a title="Notes" href="javascript:void(0)" class="iconlink notes slideTrigger"><span>Notes</span></a>
            <div id="NotesCounter" class="counter slideTrigger">6</div>
            <div class="slidePanel notesPanel">
              <div class="header">
                <h3>Notes</h3>
                <a onclick="pokeBubble('task_bubble');" href="javascript:void(0);" class="vAll">View All</a>
                <div class="pagination"></div>
              </div>
              <div class="contList">
                <ul>
                  <li>
                    <div><img width="30" height="30" alt="Expert" src="images/expert01.jpg"><strong>Marissa</strong> added a Note on 23rd Jul, 2010</div>
                    <p>We still need to get additional information for this study from the CRO as soon as possible.</p>                   
                  </li>
                  <li>
                    <div><img width="30" height="30" alt="Expert" src="images/expert03.jpg"><strong>Catherine</strong> added a Note on 30th July, 21</div>
                    <p>This is coming together very well, i would want to know Steve's inputs on this.</p>                   
                  </li>
                  <li>
                    <div><img width="30" height="30" alt="Expert" src="images/expert04.jpg"><strong>Steve</strong> added a Note on 3rd August, 2010</div>
                    <p>Catherine, I did take a look at this and it looks ok to me. Will ask Sebastian for this expert comments and update this page. In the meantime take a look at the document that I have uploaded.</p>                   
                  </li>
                </ul>                
     ...

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: url("../images/pagebg.jpg") repeat-x scroll 0 0 #F6F6F6;
}
body, textarea, input, select {
    font: 11px arial;
}
body.landing {
    background-image: url("../images/homebg.jpg");
}
a {
    color: #0063D3;
    text-decoration: none;
}
a:hover {
    color: #0099FF;
}
ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.secondaryLinks .user, .secondaryLinks .settings, .secondaryLinks .signout, .linkCont .menuOn {
    background: url("../images/icons.png") no-repeat scroll 0 0 transparent;
}
.linkCont .settingsUl a, .rightCont .linkList li, .panelCont .pHead h2, .userInfo .designation, .boxMidL .pHead h2, .boxMid h3, .panelBox h2, .lookup a, .search .sField a, .pdocs li, .wlistCont li, .prefLinks li a, .rightContBig .subPanel h3, .gridBtn .linkBtn, .filters h2, .worklistSec h2, .actionsList a, .maDrop, .maList a, .repBody .whistory li, .repBody .comments li, .unassign, .preNxt a, .viewImgs, .viewReps, .boxMidR .patInfo h2, .patInfo .moreInfo {
    background: url("../images/icons_sprite.gif") no-repeat scroll 0 0 transparent;
}
.rightCont h2, .contentTop h1, .boxMidR h3, .vclose {
    background: url("../images/icons_big.gif") no-repeat scroll 0 0 transparent;
}
.tabs ul li, .subTabsMenu, .dataGrid thead, .dataGrid tfoot, .pbBody .menuCont, .pbFoot, .pFoot, .gridBtn, .rightContBig .pHead, .prefLinks h2, .prefLinks li.on, .boxBar, .actionsList, .repBody .pbHead, .repBody .pbSubHead, .repHead .pbHead {
    background: url("../images/gradient.gif") repeat-x scroll 0 0 transparent;
}
.menuCont ul li a, .linkCont li a, .linkCont li .separator, .tabs ul li a, .subTabs li a, .pHead .fr .fl a, .vTabs ul li a, .worklist .gridBtn a, .unassignLink a, .changeETALink a {
    outline: medium none;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.clr {
    clear: both;
}
.posRel {
    position: relative;
}
.MT1 {
    margin-top: 20px;
}
.wrapper {
    margin: auto;
   ...