JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- Contact -->
    <div class="container white">
        <div class="row">
            <div class="container white percent100">
                <div class="col-lg-12">
                    <div class="padder-t2">
                        <h1>Contact</h1>
                        <div class="horiz-divider"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row padder-t padder-b">
            <div class="container white">
                <div class="col-lg-12">
                    <!-- Form -->
                    <form class="form-horizontal" action=" " method="post"  id="contact_form">
                        <fieldset>
                            <!-- Text input-->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4 col-lg-4">
                                        <label class="control-label pull-right"><h4>First Name</h4></label>
                                    </div>
                                    <div class="col-md-4 col-lg-4 inputGroupContainer">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                            <input id="firstname" name="firstname" placeholder="First Name" class="form-control"  type="text">
                                        </div>
                                    </div>
                                </div>
                         ...

CSS

/*Nav BAR*/
.btn {
	border: 0 none;
	text-transform: uppercase;
	cursor: pointer;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
	outline: 0 none;
}

.btn-primary {
	background: #dddddd;
	color: #636c72;
}

.btn-primary:hover, .btn-primary.hover {
	background: #93298b;
}

.btn-primary:active, .btn-primary.active {
	background: #636c72;
	box-shadow: none;
}

.btn-danger:active, .btn-danger.active {
	box-shadow: none;
}

.btn-primary.raised, .btn-danger.raised {
	box-shadow: 0 3px 0 0 #636c72;
}

.btn-primary.raised:active, .btn-primary.raised.active {
	background: #787878;
	box-shadow: none;
	margin-bottom: -3px;
	margin-top: 3px;
}

.btn-danger.raised:active, .btn-danger.raised.active {
	box-shadow: none;
	margin-bottom: -3px;
	margin-top: 3px;
}

#upload-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left:-58px;
	margin-top:-12px;
}

.top-left {
	position: absolute;
	left: 10%;
	top: 10%;
}

.custom-file {
	position: absolute;
	max-width: 0%;
	height: 0rem;
	margin-bottom: 0;
}

.custom-file-input {
	width: 0px;
	height: 0px;
	margin: 0;
	filter: alpha(opacity=0);
	opacity: 0;
}

button > a, button > a:hover, button > a:link, button > a:visited, button > a:active {
	color:white;
	text-decoration: none !important;
}

div[class="custom-file-input"] {
	display: none;
}

.ml-auto {
	margin-right: 0 !important;
	margin-left: 0;
}

.form-control {
	background-color: #ddd;
}

.navbar-default {
	background-color: #4f5054 !important;
}

#navbar {
	z-index:1000;
}

.widerer {
	width: 100%;
}


/*-------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------Footer------------------------------------------------*/
.footer-bs {
	background-color: #3c3d41;
	color: #ddd;
}

.footer-bs2 {
	background-color: #222222;
	color: #ddd;
}

.footer-ns { padding-top: 10px; }
.footer-ns { border-color: transparent; }

.footer-ns a:hover { color:#FFFFFF; text-decoration:none;...