JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<script src="https://fonts.googleapis.com/icon?family=Material+Icon"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.brown-light_green.min.css">
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">getquote</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Invoices</a>
      <a href="#scroll-tab-2" class="mdl-layout__tab">Products</a>
      <a href="#scroll-tab-3" class="mdl-layout__tab">Customers</a>
    </div>
  </header>

  <main class="mdl-layout__content">
    <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
      <div class="page-content">

        <div class="mdl-grid">
          <div class="mdl-cell mdl-cell--4-col">

            <form action="#">
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="sample3">
                <label class="mdl-textfield__label" for="sample3">Text...</label>
              </div>

              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
                <label class="mdl-textfield__label" for="sample4">Number...</label>
                <span class="mdl-textfield__error">Input is not a number!</span>
              </div>
            </form>

          </div>

          <div class="mdl-cell mdl-cell--4-col">

            <form action="#">
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      ...

CSS

.mdl-cell {
    border-left: 3px solid lightgreen;
    padding-left: 5px;
}