JSFiddle - React, Tailwind, and code Playground

HTML

<div id='search' class='section'>
    <form id='searchForm'>
        <input type='text' id='searchInput' name='searchInput' />
        <button type='submit' id='searchButton' name='searchButton' value='Search'>
            <img src='http://jsfiddle.net/img/logo.png' alt='Search' />
        </button>
    </form>
</div>

CSS

#searchInput {
    width: 80%;
    margin: 0 auto;
    display: block;
    height: 40px;
    border: 1px solid #D8D8D8;
    font-size: 1rem;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
#searchButton {
    width: 80%;
    margin: 4px auto;
    display: block;
    height: 40px;
    border: 1px solid #D8D8D8;
    font-size: 1rem;
    padding: 10px;
    text-align: center;
    background: #F2F2F2;
    cursor: pointer;
}
.section {
    width: 100%;
    display: inline-block;
    margin: 10px auto;
    background-color: #FAFAFA;
    border-radius: 5px;
    border: 1px solid #D8D8D8;
    padding: 30px;
    position: relative;
}