JSFiddle - React, Tailwind, and code Playground

by Tushar Dhingra

HTML

<script src="&lt;link href=&quot;//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;"></script>
 

<div class="container ">
      <form>
          <h3> Format used to look like this in Bootstrap 2 </h3>
          <div class="row ">
              <label for="return1"><b>Return:</b></label>
              <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                     type="text" value='8/28/2013'>
              <span id='return1' style='color:blue'> +/- 14 Days</span>
          </div>

           <br>   
           <br>   
               <h3> BootStrap 3 Version </h3>

          <div class="row">
              <label for="return2"><b>Return:</b></label>
              <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                     type="text" value='8/28/2013'>
              <span id='return2' style='color:blue'> +/- 14 Days</span>
          </div>
      </form>
  </div>

CSS

/*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 *//*! normalize.css v2.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{margin:.67em 0;font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}mark{color:#000;background:#ff0}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid #c0c0c0}legend{padding:0;border:0}button,input,select,textarea{margin:0;font-family:inherit;font-size:100%}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}button[disabled],html...