JSFiddle - React, Tailwind, and code Playground
by Roberts
HTML
<div class="container">
<div class="block-small login">
<div class="head"></div>
<form method="POST">
<input type="text" name="Username" placeholder="Lietotājvārds" class="field field-medium">
<input type="text" name="Name" placeholder="Vārds" class="field field-medium">
<input type="mail" name="Email" placeholder="E-pasta adrese" class="field field-medium">
<input type="password" name="Password" placeholder="Parole" class="field field-medium">
<button class="btn btn-medium">Reģistrēties</button>
<p>
Reģistrējoties, Tu automātiski apstiprini kopienes <a href="#" class="dotted">Lietošanas noteikumus</a>!
</p>
</form>
</div>
</div>CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,800,700italic,600italic,700,600,400italic,300italic);
@import url(https://fonts.googleapis.com/css?family=Exo+2:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
/*
Template Name: MATRICA 2016
Author: RSDESIGNS.lv / BOTNAME.
Email: [email protected]
File: Styles.css
*/
* {
margin: 0;
padding: 0;
outline: none;
}
html {
background: #292d3e url('../images/background.jpg') no-repeat center center fixed;
background-size: cover;
min-height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px !important;
margin: 0;
overflow-x: hidden;
color: #98a6ad;
background: transparent;
}
a {
color: #0080ff;
text-decoration: none;
}
a:hover { color: #0275d8; }
.dotted {
border-bottom: 1px dotted #0080ff;
}
.container {
max-width: 1200px;
width: 100%;
display: table;
margin: auto;
}
.container-fluid {
max-width: 100%;
width: 100%;
display: table;
margin: auto;
}
.block-small {
background: #fff;
max-width: 450px;
width: 100%;
position: relative;
display: table;
margin: auto;
}
.login > .head {
background: url('../images/login-head.jpg');
width: 100%;
height: 240px;
display: block;
}
.login > form {
max-width: 370px;
width: 100%;
margin: 40px;
float: left;
}
.login > form > input { margin: 5px 0; }
.login > form > input:first-child { margin: 0 0 5px 0; }
.login > form > input:last-child { margin: 5px 0 0 0; }
.login > form > button {
margin: 35px 0 0 0;
background-color: #0080ff;
}
.login > form > p {
margin-top: 20px;
text-align: justify;
}
input.field {
background: #f2f2f2;
max-width: 310px;
width: 100%;
color: #9ba1a8;
padding: 0 30px;
border: 2px solid transparent;
font-size: 14px;
}
input.field:focus {
background: #fff;
border-color: #0080ff;
color: #0080ff;
}
input.field.field-medium {
height: 46px;
line-height: 46px;
}
button.btn...JavaScript
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});