JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container" id="navbar-holder">
<a href="index.php"><img src="img/Logo.png" id="logo"></a>
<p id="header-text">Email Info Securely.
</div>
</div>
<div class="container">
<div class="well">
<div class="sub-header">
<div class="explanation-text-div explanation-text">Top stuff
<br><span class="bottom-explanation">and <span class="burner-pink">more</span> stuff.</span>
</div>
<div class="explanation-text-div explanation-text">Top stuff
<br><span class="bottom-explanation">and <span class="burner-pink">more</span> stuff.</span>
</div>
<div class="explanation-text-div explanation-text">Top stuff
<br><span class="bottom-explanation">and <span class="burner-pink">stuff</span>.
</div>
<div class="learn-more"><a href="how.php" class="learn-text" />Learn More</a>
</div>
</div>
<form role="form" method="post" action="index.php">
<div class="form-holder">
<div class="form-group">
<input type="text" class="form-control" name="recipients" placeholder="Email Recipient(s)">
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" placeholder="(Optional Subject)">
</textarea>
</div>
<div class="form-group">
<textarea...
CSS
/*
KEEP CSS ALPHABETIZED.
Starting with basic selectors, then classes, then IDs.
*/
/* Basic Selectors */
body {
padding-top:80px;
background-image:url(../img/WorldGrainyBlurred.png);
background-position:-80px;
font-size:100%;
font-family:"HelveticaNeue-CondensedBold", "Helvetica Neue";
width: 200px;
}
a:hover {
text-decoration:none;
}
input, textarea {
color:#808080;
}
p {
padding:0px;
}
textarea:focus, #messageInput:focus, .form-control, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable- input:focus {
border-color:none;
box-shadow:none;
-webkit-box-shadow:none;
outline:none;
background-color:#e6e6e6;
resize:none;
-webkit-transition:background-color 300ms linear;
-moz-transition:background-color 300ms linear;
-o-transition:background-color 300ms linear;
-ms-transition:background-color 300ms linear;
transition:background-color 300ms linear;
}
/* Classes */
.bottom-explanation {
font-size:2.7em;
line-height:70%;
}
.btn-success {
margin:auto;
display:block;
}
.burner-pink {
color:#f5637f;
}
.explanation-text-div {
float:left;
display:inline-block;
margin:0px;
border:0;
padding:0px;
padding-top:30px;
width:33.333%;
height:75%;
text-align:center;
}
.explanation-text {
font-size:1.8em;
}
.footer {
background-color:black;
clear:both;
width:100%;
}
.form-control {
font-size:1.4em;
margin:0px;
background-color:#dadada;
border-radius:0px;
border:0px;
padding-top:30px;
padding-bottom:30px;
...