JSFiddle - React, Tailwind, and code Playground

by tchalvakspam

HTML

<form action="index.php?action=login" method="post">
                	
					<label for="openbb_username">Enter your email address</label>
                	<input type="text" id="email" name="openbb_username" class="logininput" value="">
					<label for="openbb_passsword">Enter your password:</label>
                	<div style="clear:both">
					<input type="password" name="openbb_password" class="logininput" value="" style="width:300px">
                   </div>
                   	<input type="submit" class="loginbtn" value="Login"><br>

                </form>

CSS

form label,form input{display:block;}

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


label, legend {
display: block;
font-weight: bold;
font-size: 13px;
}
label {
margin: 1em 0 .3em 0;
}


.skin-red .contact-form label {
border-bottom-color: #D83F28;
}
.contact-form label {
border-bottom-color: #D83F28;
}
.contact-form label {
text-transform: uppercase;
font-size: .8em;
border-bottom: 24px solid #777;
border-right: 24px solid rgba(0, 0, 0, 0);
height: 0;
line-height: 24px;
display: inline-block;
padding: 0 10px 0 10px;
float: left;
color: #FFF;
}

label {
    display:block;
    height: 30px;
    width: 200px;
    background: skyblue;
    position: relative;
    text-transform:uppercase;
    color:white;
    font-weight:bolder;
    padding:0 1em;
    vertical-align:baseline;
    line-height:30px;
    text-shadow:1px 1px 7px black;
}

label:after {
    height: 0;
    width: 0;
    display: inline-block;
    position: absolute;
    right: -30px; 
    content: " ";
    border-bottom: 30px solid skyblue;
    border-right: 30px solid transparent;
}