JSFiddle - React, Tailwind, and code Playground

by nickkell

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Day Tripper</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li>
            <a href="/#/saved-events"><i class="fa fa-star"></i>Saved events</a>
          </li>
          <li>
            <a href="/#/popular"><i class="fa fa-thumbs-up"></i>Popular places</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div id="app">
    <div class="jumbotron" data-reactid=".0">
      <h1 data-reactid=".0.0">Fun activities with Day Tripper!</h1>
      <p data-reactid=".0.1">Sightseeing and activities well within a day's travel from your home</p>
        <form class="form-inline" data-reactid=".0.3.0" lpformnum="1">
          <div class="input-group" data-reactid=".0.3.0.0.1">
            <input type="text" class="form-control" placeholder="bristol" required="" data-reactid=".0.3.0.0.1.0.1">  
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">here</button>
            </span>
          </div>
          <div class="form-group" data-reactid=".0.3.0.0.0">
            <input type="date" required="" class="form-control" id="travel-date" value="2016-04-08" data-reactid=".0.3.0.1.1">
          </div>
          <div class="form-group" data-reactid=".0.3.0.0.0">
            <button type="submit" class="btn btn-default" data-reactid=".0.3.0.2.0">Take me there!</button>
          </div>
        </form>
      </div>
    </div>
</body>