JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 rcshadow">
<div class="row">
<div class="rcpage">
<div class="row">
<h1>Add New Contact</h1>
<hr>
</div>
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">Contact Information:</div>
<div class="panel-body">
<form role="form" id="newprofile" name="newprofile" style="display:inline" action="" method="post">
<input type="hidden" name="Update" value="true" />
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="FirstName">First Name:</label>
<input required class="form-control" type="text" id="FirstName" name="FirstName" value="">
</div>
<div class="form-group">
<label for="MiddleName">Middle Name:</label>
<input class="form-control" type="text" id="MiddleName" name="MiddleName" value="">
</div>
<div class="form-group">
<label for="LastName">Last Name:</label>
<input required...
CSS
/* START
** Div and container setup */
/* Make Search Bar Easier to fit and use */
.search-bar-form>.form-control, .search-bar-form>.input-group-addon, .search-bar-form>.input-group-btn>.btn {
height:20px !important;
padding:5px 10px !important;
font-size:10px !important;
line-height:1.5 !important;
border-radius:5px !important;
}
/* Set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 970px;
}
/* Make background highlightable */
.highlightable:hover {
background-color:#e7e7e7;
}
/* Spacer */
.spacer {
padding:10px;
}
/* Padding */
.padding10 {
padding:10px;
}
/* Shadow for Page Outline */
.rcshadow {
-moz-box-shadow: 0px 0px 30px 10px #000;
-webkit-box-shadow: 0px 0px 30px 10px #000;
-khtml-box-shadow: 0px 0px 30px 10px #000;
box-shadow: 0px 0px 30px 10px #000;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
}
/* Page Outline */
.rcpage {
background-color:#FFF;
padding:10px 30px 20px;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
}
/* Body */
body {
margin:0;
padding:0;
font-size:100%;
font-family:verdana, arial, 'sans serif';
background-color:#3b607e;
color:#000000;
}
tr.clickable-row {
cursor: pointer;
}
/* END
** Div and container setup */
/* START
** Navbar Styling */
.navbar-rc {
margin-bottom:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.navbar-nav > li > a, .navbar-brand {
padding-top:5px !important;
padding-bottom:0 !important;
height: 30px;
}
.highlight-light > li:hover, .highlight-light .navbar-brand:hover {
background-color:#e7e7e7;
}
.highlight-dark > li:hover {
background-color:#000000;
}
.navbar {
min-height:30px !important;
}
/* END
** Navbar Styling */
/* START
** Typography */
h1 {
font-size:2em;
...