JSFiddle - React, Tailwind, and code Playground

survey_container

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://jennperrin.com/dev/bugged/css/bootstrap.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css">
<div class="wizard" id="survey_container">
    <div id="top-wizard">
        Please read each question and select the best rating. If you feel the question does not apply to you, please select the N/A option for that question. You can enter in any comments you may have for each question directly below that question. Comments are optional.<br><br>Thank you for your time &amp; feedback.
     </div>
    <div class="shadow"></div>

    <div id="middle-wizard">
        Please read each question and select the best rating.
        
    </div>

    <div id="bottom-wizard">
        <button type="button" name="backward" class="btn btn-primary"><i class="icon-long-arrow-left"></i> Back</button>
        <button type="button" name="forward" class="btn btn-info">Next <i class="icon-long-arrow-right"></i></button>
    </div>
</div>

CSS

body {
    margin: 5%;
    font: 14px/20px 'Open Sans', Arial, sans-serif;
}
#survey_container {
    background-color: #FFFFFF;
    box-shadow: 0 0 5px #777777;
    margin-bottom: 30px;
    margin-top: 0;
    position: relative;
    z-index: 9;
}
#top-wizard {
    background-color: #F3F3F3;
    border-bottom: 1px solid #E7E7E7;
    font-size: 16px;
    padding: 15px 75px;
    position: relative;
}
#middle-wizard {
    padding: 50px 125px 35px;
}
#bottom-wizard {
    background-color: #F3F3F3;
    border-top: 1px solid #E7E7E7;
    padding: 15px 120px;
    text-align: center;
}