JSFiddle - React, Tailwind, and code Playground

by RenaissanceDesign

HTML

<form>
    <p><input type="text" placeholder="A text input" /></p>
    <p>
        <select>
        <option>Some</option>
        <option>option</option>
        <option>values</option>
        <option>here</option>
        </select>
    </p>
</form>

<div class="container">
    <ul class="tabs">
        <li class="selected"><a href="#">Some</a></li>
        <li><a href="#">Nav</a></li>
        <li><a href="#">Tabs</a></li>
        <li><a href="#">Here</a></li>
    </ul>
</div>

CSS

body {
   background: url(http://michellepicca.files.wordpress.com/2011/08/black-and-white.jpg) no-repeat center center fixed #000; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    font-size: 14px;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
}

a:link {
    color: #A29ECD;
}

form, .container {
    margin: 2em;
    padding: 5em 2em;
	background-color: rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.6);
	-moz-box-shadow:    0px 3px 5px rgba(0, 0, 0, 0.6);
	box-shadow:         0px 3px 5px rgba(0, 0, 0, 0.6);
	padding: 1.428571428571429em;    
}

p {
    margin-bottom: 1.5em;
}

/* Forms */

input[type="text"], 
input[type="email"], 
input[type="search"], 
input[type="tel"], 
input[type="url"], 
input[type="password"], 
input[type="number"], 
input[type="date"], 
input[type="month"],
input[type="week"], 
input[type="time"], 
input[type="datetime"], 
input[type="datetime-local"], 
textarea, 
select {
    width: 25em;
    height: 2.2em;
	background-color: transparent;
	color: #fefefe;
	border: 1px solid rgba(221,221,221,0.15);
	-webkit-box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:    inset 0px 5px 5px rgba(0, 0, 0, 0.75);
	box-shadow:         inset 0px 5px 5px rgba(0, 0, 0, 0.75);
	padding: 0.3571428571428571em;
	margin: 0.3571428571428571em;
    font-size: inherit;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="url"]:focus, 
input[type="password"]:focus, 
input[type="number"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus,
input[type="week"]:focus, 
input[type="time"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus,...