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 btnLogin">Login <span>&#9660</span></a></li>
           </ul>
       </div>
        <div id="topLogin">
        <form action="" method="post">
        <label for="userName-log-in">Username</label>
        <input type="text" id="username" name="username" class="text" maxlength="20">
        <div class="clr"></div>
        <label for="password-log-in">Password</label>
        <input type="password" id="password-log-in" name="userPassword" class="password">
        <div class="clr"></div>
            <a href="">Lost password?</a>
            <button class="fl_r" type="submit" class="pill button">Login</button>
        </form>
    </div>
    </div>
    <div class="clr"></div>
<div id="wrapper">
    <div class="clr"></div>
    <div id="container">

        <div id="middle">
                        <h1>3 Easy steps</h1>
       <span><h3>get a second opnion on your radiology reports.</h3></span>
            <ul id="threeSteps">
                <li>
   <div class="steps">
        <img src="http://dl.dropbox.com/u/71491/1318595675_PatientFile.png" />
       <h4>Add patient</h4>
        <p>Add your family members to keep track of their medical history.</p>
    </div>
    <!--<div><a href="">Add Patient</a></div>-->

</li>
<li>
    <div class="steps">
        <img src="http://dl.dropbox.com/u/71491/1318595106_Upload.png" />
            <h4>Upload image</h4>
        <p>Upload images from CD, hard drive or other media.</p>
    </div>
    <!--<div><a href="" class="pill button heart"><span class="heart icon"></span>View Report</a></div>-->
    
</li>
<li>
    <div...

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: 14px;  
}

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;
}
h1, h2, h3, h4, h5{
    font-family: 'Ubuntu', sans-serif;
    color: #556270;
}
h1 {
   ...

JavaScript

$('.btnLogin').click(function(){
    $('#topLogin').toggle();
    $('.btnLogin span').html($('#topLogin').is(':visible')? '&#9650' : '&#9660');
    $('#username').focus();
    return false;
});