JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css' />
<link href='http://dl.dropbox.com/u/71491/btn/stylesheets/css3buttons.css' rel='stylesheet' type='text/css' />
<body id="layout">
    
   <div id="header">
       <div class="fl_l"><h3>SECOND OPINION</h3></div>
       <div id="topNav" class="fl_r">
           <ul>
               <li><a href="" class="button">Hi User!<span>&#9660</span></a></li>
           </ul>
    </div>
    <div class="clr"></div>
    </div>
<div id="wrapper">
             <div id="rCol" class="fl_l">
                 <ul>
                     <li>pat1</li>
                     <li>pat2</li>
                 </ul>
            </div>
            <div id="lCol" class="fl_l">
                <h4>Welcome User!</h4>
                <hr />
                <ul class="patList">
                    <li><a href=""><img src="http://placekitten.com/80/80" />Patient 1</a></li>
                    <li><a href=""><img src="http://placekitten.com/80/80" />Patient 2</a></li>
                    <li><a href=""><img src="http://placekitten.com/80/80" />Patient 3</a></li>
                    <li><a href=""><img src="http://placekitten.com/80/80" />Patient 4</a></li>
                    <li><a href=""><img src="http://placekitten.com/80/80" />Patient 5</a></li>
                    <li class="addPlus"><a href=""><img src="http://dl.dropbox.com/u/71491/1318783347_user_64.png" style="width: 80px; height: 80px;" />Add+</a></li>
                </ul>
                 <div id="noPatient" class="mb10">
                   <h5 class="mb10">You have not added any patient yet.</h5>
                   <a href="" class="pill button"><span class="user icon"></span>Add a new patient</a>
                 </div>
                <hr />
                <div id="dbSummary">
                    <h6 class="mb10">Summary</h6>
                 <table width="100%" class="mb10">
                  <tbody>
                     <tr>
         ...

CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}       

body, select, input, textarea { 
  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 
  color: #333333;
  font-family: "Lucida Sans Unicode","Lucida Grande",Arial,Verdana,sans-serif; 
  font-size: 13px;  
}

html {
    line-height: 1.5;
    text-shadow: 0 0 1px rgba(51,51,51,0.5);
}
label {
    display:        block;
    float:            left;
    width:            68px;
    padding-top:    7px;
    color:            #4c4c4c;
    font-size:        11px;
    text-transform:    uppercase;
    text-align:        right;
}
input.text, input.password {
    display:            block;
    float:                right;
    width:                183px;
    margin-bottom:        5px; /* IE */
    height:                29px;
    color:                #4c4c4c;
    font-size:            13px;
    border:                1px solid #d9d9d9;
    border-width:        1px 0 0 1px;
    background-color:    #f8f8f8;
    padding:            0 5px;
}

hr{
    color: #DFE7EA;
    height: 0;
    border:0;
    border-top: 1px solid  #DFE7EA;
}
a {
border-bottom: 1px dotted #A6A6A6;
color: gray;
font-weight: bold;
margin-top: 3px;
text-decoration: none;
font-family: helvetica, arial, sans-serif;
font-size: 12px;
}
.clr {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.fl_l{
float: left;
}
.fl_r{
float: right;
}
.m10{
margin: 10px;
height: 1px;
}
.mb10{
   ...

JavaScript

//hide if no patient
//$('.patList, #dbSummary').hide();

//hide if patient list is not empty
$('#noPatient').hide();

$('#rCol').hide();
$('#lCol').css({width: '100%'})