JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
  <div id="canvas">
    <div id="banner">
      <h1>MooD 16 Material design controls</h1>
    </div>
    <div class="row">
      <form class="col s12">
        <div class="row">
          <div class="input-field col s4">
            <select>
              <option value="" disabled selected>Title</option>
              <option value="1">Mr</option>
              <option value="2">Mrs</option>
              <option value="3">Miss</option>
              <option value="4">Dr</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s4 waves-effect ">
            <input placeholder="First Name" id="first_name" type="text" class="validate">
          </div>
        </div>
        <div class="row">
          <div class="input-field col s4 waves-effect ">
            <input placeholder="Last Name" id="last_name" type="text" class="validate">
          </div>
        </div>
        <div class="row">
          <div class="input-field col s4 ">
            <input type="date" class="datepicker" placeholder="Birthdate">
          </div>
        </div>
        <div class="row">
          <div class="input-field col s4">
            <input type="checkbox" id="test6" class="filled-in" />
            <label for="test6">Opt out of something</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s4 waves-effect ">
            <button class="btn waves-effect waves-light" type="submit" name="action">Save &amp; Continue
            </button>
          </div>
        </div>

CSS

#canvas {
	  height: 929px;
	  width: 1171px;
	  margin: auto;
	  border: 1px solid grey;
	  -webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.37);
	  -moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.37);
	  box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.37);
	}
	
	#banner {
	  width: 100%;
	  height: 200px;
	  background-color: #00bcd4;
	  top: -27px;
	  position: relative;
	}
	
	#form {
	  margin-top: 25px;
	  padding: 25px;
	}
	
	h1 {
	  color: #fff;
	  font-family: arial;
	  font-size: 40px;
	  font-weight: 400;
	  padding-top: 100px;
	  padding-left: 100px;
	}
	
	.dx-texteditor {
	  width: 300px;
	  margin-bottom: 25px;
	}
	
	.dx-validationsummary {
	  margin-top: 25px;
	  margin-bottom: 25px;
	}

JavaScript

$('select').material_select();
 $('.datepicker').pickadate({
   selectMonths: true, // Creates a dropdown to control month
   selectYears: 15 // Creates a dropdown of 15 years to control year
 });