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 */
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 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;
   ...