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">
                 <h6>Patients in Account</h6>
                 <ul>
                     <li>pat1</li>
                     <li>pat2</li>
                     <li>pat3</li>
                     <li>pat4</li>                     
                 </ul>
            </div>
            <div id="lCol" class="fl_l">
                <div id="patInfo">
                    <img class="fl_l patAvatar" src="http://placekitten.com/50/50" />
                    <span style="display: block;" class="fl_l">
                    <h3>Mr. Patient</h3>
                    <h6>Male, 30 Years old</h6>
                    </span>
                    <div class="clr"></div>
                    <p class="mb10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor dolor vel sapien tincidunt ut blandit lacus hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sodales tellus a nisl bibendum auctor. Maecenas neque ante, placerat non aliquet eu, elementum pharetra eros. Aenean nibh tortor, rutrum vel blandit in, imperdiet a tortor. Mauris eu justo in tellus ultricies euismod. Vivamus convallis laoreet libero, eget semper est sagittis in.</p>
                    
                  <a href="" class="pill button"><span class="rightarrow icon"></span>Create new order</a>  
                </div>
                <div id="patTbl">
                   ...

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;
}
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{
    margin-bottom: 10px;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Ubuntu', sans-serif;
   ...