JSFiddle - React, Tailwind, and code Playground

by pauldwaite

HTML

<div class="content">
   <form method="POST" action="">

     <div data-role="fieldcontain">
       <label for="login" class="itemLabel">User ID</label>
       <input type="text" id="login" name="login" class="itemValue"  />
     </div>
     <div data-role="fieldcontain">
       <label for="password">Password</label>
       <input type="password" id="password" name="password" class="itemValue"  />
     </div>
     <div>
     <input type="submit" value="Login" />
   </div>
     </form>
 </div>

CSS

a {
    text-decoration: none;
}

.content {
    width: inherit;
    height: 100%;
}

.toolbar .noButton {
    display: none;
}

.content ul {
    -webkit-padding-start: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.content ul li {
    overflow: hidden;
    clear: both;
}

.content ul li span {
    display: block;
}

.content ul.settings li div.itemLabel span.title {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    font-family: Helvetica;
}

h1 {
    font-size: 1.0em;
}

/* header */

.pageTitle h1 {
    position: absolute;
    text-align: center;
    width: 100%;
    margin: 0 auto 0 auto;
    line-height: 50px;
    color: white;
    text-shadow: 1px 1px 1px #000;
}

/* toolbar */

.toolbar {
    width: 100%;
    height: 50px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #aebbcb), color-stop(0.5, #8094ae), color-stop(1.0, #6e84a2));
}

.toolbar div {
    position: absolute;
    overflow: hidden;
    text-align: center;
}

.toolbar .leftItem {
    top: 10px;
    left: 10px;
    width: 50px;
}

.toolbar .centerItem {
    bottom: 20px;
    width: 100%;
    margin-left: 10px;
    height: 30px;
}

.toolbar .rightItem {
    top: 10px;
    right: 10px;
    width: 50px;
}

.toolbar a {
    color: white;
    display: block;
    line-height: 30px;
}

.toolbar .backButton {
    -webkit-border-bottom-left-radius: 16px 16px;
    -webkit-border-bottom-right-radius: 6px 6px;
    -webkit-border-image: url(/public/images/backButton.png) 0 5 0 13 stretch stretch;
    -webkit-border-top-left-radius: 16px 16px;
    -webkit-border-top-right-radius: 6px 6px;
    border-width: 0 5px 0 13px;
    width: auto;
    font-size: .9em;
    z-index: 3;
}

.toolbar .deleteButton,
.toolbar .regularButton,
.toolbar .blueButton {
    -webkit-border-radius: 5px;
    overflow: hidden;
    text-align: center;
    width: auto;
    height: 30px;
    font-size: .9em;
    border-left: #5e7088 1px solid;
    border-right: #5e7088 1px solid;
...