JSFiddle - React, Tailwind, and code Playground

HTML

<title>
  Contact Me</title>

<!--CSS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" />
<link type="text/css" rel="stylesheet" href="/stylesheets/style.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="/stylesheets/form.css" media="screen,projection" />

<body>
  <header>
    <nav class="top-nav">
      <div class="nav-wrapper teal darken-1">
        <a href="/" class="brand-logo">Contact</a>
        <a href="#" data-activates="mobile-nav" class="button-collapse">
          <i class="material-icons">menu</i></a>
        <ul id="normal-nav" class="right hide-on-med-and-down">
          <li>
            <a href="/about-us" class="waves-effect">About Us</a>
          </li>
          <li>
            <a href="/what-we-do" class="waves-effect">What We Do</a>
          </li>
          <li>
            <a href="/contact" class="waves-effect">Contact</a>
          </li>
        </ul>
        <ul class="side-nav" id="mobile-nav">
          <li>
            <a href="/about-us" class="waves-effect">About Us</a>
          </li>
          <li>
            <a href="/what-we-do" class="waves-effect">What We Do</a>
          </li>
          <li>
            <a href="/contact" class="waves-effect">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <main class="mainContent">
    <div class="container">
      <h4>Want to get in touch with us?</h4>

      <form id="contact-form" action="/submit" class="col s12" enctype="multipart/form-data">
        <!-- Name -->
        <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">person</i>
            <input value="Mantis Toboggan" id="input_name" name="name" type="text" class="validate" autocomplete="off">
            <label for="input_name">Name</label>
  ...

CSS

/**
 * Used in the "Contact Me" page
 */

.links i {
  position: relative;
  bottom: -3px;
  font-size: 20px;
}

.btn i {
  margin-top: -2px;
  font-size: 22px;
}

.input-field i {
  color: #212121;
}

.input-field .prefix.active {
  color: rgb(68, 138, 255);
}

.container .row {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.row .col {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.input-field,
.col {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

#dummy_field {
  display: none;
}


/* label focus color */

.input-field input[type=text]:focus + label,
.input-field input[type=email]:focus + label,
.input-field textarea.materialize-textarea:focus + label {
  color: #607d8b;
}


/* label underline focus color */

.input-field input[type=text]:focus,
.input-field input[type=email]:focus,
.input-field textarea.materialize-textarea:focus {
  border-bottom: 1px solid #607d8b;
  box-shadow: 0 1px 0 0 #607d8b;
}

form {
  width: 100%;
}

@media only screen and (max-width: 600px) {
  /* Mobile devices */
  form {
    margin-top: 8%;
    margin-bottom: 8%;
  }
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
  /* Tablet */
  form {
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 1%;
  }
}

@media only screen and (min-width: 993px) {
  /* Desktop */
  form {
    margin-top: 4%;
    margin-bottom: 4%;
    margin-left: 1%;
  }
}


/**
* Stylesheet for entire site
*/

@import url(http://fonts.googleapis.com/css?family=Roboto+Mono:400);
html,
body {
  width: 100%;
  height: 100%;
}

.flow-text {
  font-size: 18px;
  color: #212121;
}

.top-nav {
  height: 128px;
}

.top-nav .mdi-navigation-menu,
.top-nav .right {
  /*line-height: 128px;*/
}

.page-title {
  font-size: 2.0rem;
  line-height: 128px;
}

.right li a {
  align-content: center;
  padding-left: 2.0rem;
  padding-right: 2.0rem;
}

h2 {
  font-size: 3.0rem;
  font-family: 'Roboto Mono';
 ...

JavaScript

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var bodyParser = require('body-parser');
var https = require('https');
var fs = require('fs-extra');
var multer = require('multer');

var app = express();
var upload = multer({
  dest: './tmp/'
});
// view engine setup
app.set('port', (process.env.PORT || 5000));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(favicon(path.join(__dirname, 'public', 'images', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

// Used for accessing webpages without the .html extension!
var publicdir = __dirname + '/public';
app.use(function(req, res, next) {
  if (req.path.indexOf('.') === -1) {
    var file = publicdir + req.path + '.html';
    fs.exists(file, function(exists) {
      if (exists)
        req.url += '.html';
      next();
    });
  } else
    next();
});
app.use(express.static(publicdir));
//end .html extension removal

//Doesn't work :(
app.post('/submit', upload.single('attachment'), function(req, res) {
  console.log("____ Clicked submit ____");
  console.log(req.body);

  console.dir(req.files);
});


var server = app.listen(app.get('port'), function() {
  console.log('clearview-website listening on port 5000;');
}); //server closing-bracket



/**
 * ERROR HANDLING
 */
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
 ...