JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="wrapper">
    <form class="form-signin">
         <h1 class="form-signin-heading">Kirjaudu sisään</h1>
        <p>Testikäytössä 1.3. - 30.4.2015</p>
 
        	<form class="form-signin" action="" method="">
                
               				<input type="text" class="form-control" placeholder="Sähköpostiosoite" required autofocus>
               				<input type="password" class="form-control" placeholder="Salasana" required>
                                
                                <div class="row">
                                    <div class="col-xs-6"><p><input type="checkbox" style="size:40px;">  Muista minut</input></p></div>
                                    <div class="col-xs-6"><p><a>Unohtuiko salasanasi?</a></p></div>
</div>
                
               				<input type="submit" class="btn btn-lg btn-success btn-block" value="Kirjaudu" />
                                <p/>
               				
                                <div class="row">
                                <div class="col-xs-8"><p>    
                                    Eikö sinulla ole vielä tunnusta?</div><div class="col-xs-4"><p>  
                                    <a>Rekisteröidy.</a>   </p>
                                    </div></div>
               				
               			
        
    
  </div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700);

html, body {
        background: url(http://p1.pichost.me/640/11/1339448.jpg) no-repeat center center fixed;
    background-color:#6a6;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
     font-family:'Source Sans Pro', sans-serif;

}
.wrapper {
    margin-top: 50px;
    width: 400px;
    height: 400px;
    margin-left:auto;
    margin-right:auto;
    background-color:rgba(0,0,0, 0.3);
    border-radius:10px;
    transition:visibility 0s linear 0.5s, opacity 0.5s linear;
}
p {
    color:#cfc;
    font-weight:200;
    font-size:15px;
}
h1 {
    color:#ff9;
    font-weight: 700;
    font-size: 34px;
   }
h2 {
    font-weight: 300;
    font-size: 13px;
    opacity: 0.8;
}
h3 {
    text-transform: uppercase;
    margin-top: 10px;
    font-size: 11px;
}
h3:before {
    margin-right: 2px;
    font-size: 14px;
    content:'\203A';
}
#slide-panel {
    width:200px;
    padding:10px;
    background: rgba(0, 0, 0, 0.5);
    margin-left:-200px;
    color: #fff;
}
#opener {
    float:right;
    margin:20px -62px 0px 0px;
    border-radius:0;
}
.zoom {
    zoom: 2;
}
.zoom-moz {
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}
.form-signin {
    max-width: 330px;
    padding: 10px;
    margin: 0 auto;
}
.form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
   ...

JavaScript

$('#opener').on('click', function () {
	    var panel = $('#slide-panel');
	    if (panel.hasClass("visible")) {
	        panel.removeClass('visible').animate({
	            'margin-left': '-200px'
	        });
	    } else {
	        panel.addClass('visible').animate({
	            'margin-left': '0px'
	        });
	    }
	    return false;
	});

	$(document).ready(function () {


	});