JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<header>
    <img src="http://lorempixel.com/1200/700" alt="image of laminates" />
    <div class="location-search-container">
        <div class="input-group custom-search-form">
            <input type="text" class="form-control" /> 
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div><!-- /input-group -->
    </div>
</header>

CSS

header {
    position: relative;
}
header img {
    display: block;
    max-width: 100%;
}
.location-search-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.input-group {
    margin-top: -17px;
    top: 50%;
    position: absolute;
}