JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap.css">
<div class="center">
    <form class="hero form-inline">
        <input type="text" placeholder="Where do you live?"> 
        <a class="btn btn-inverse" rel="tooltip" data-original-title="Locate Me" data-placement="bottom"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAABe0lEQVR42q3VPSjEcRzH8b+7dOch6TZFysNmUmISWciglNSxMigLXTLJRgzWy2CT5CEWg1GS5KFIJEUoXWEwcOjO+z9cXZ/+fv3+/3zrtfwe3ss9/JxsNvuv/tqIoh9L2MM1jrCJcVTZBgswhGeY5htJxEzBIqzBz9yjwSsYxhZ0DjCJOEawjLScSaFWg2Ny6BU9cKCqsS/nD1GQC8bwhtyk0SwRVYxTiQ7kgqOysQDHQovcO84Fd2WjEY6lK7lb4S6mZDHiI7gudzvcRZ0SH8FtudvnLt7JYptlLIQnudvkbizK4qplsFfuPSDk9WllMKgBUYUHuZfI/2KfyOYPplEEjXXhEfpDKM0PxuE1L1jBHJK4hNdM6E8vhAsEmVtENOjqCRjsNv0f7viMbcMxBevwYRn7Qr1XUE1ZBudt35QobmCaFMpNQdUJ0wz7e/VgeF/OEA4SrMQ7dNr9vMsqIbENOAgcLMQ53PlETZCgakUGM3CCBtUsymzO/gKMF7Sm1yvrnAAAAABJRU5ErkJggg==" /></a>
        <a class="btn btn-primary">Search</a>
    </form>
</div>

CSS

html, body {
    position: relative;
    top: 0; bottom: 0; min-height: 100%;
    left: 0; right: 0;      width: 100%;
}
body {
    background: url(http://localhost:3000/assets/soccer.jpg);
    background-size: cover;
    repeat: no-repeat;
}

.center {
    text-align: center;
}

form.hero {
    display: inline-block;
    width: auto;
    font-size: 2em;
    line-height: 1;
    text-align: center;
    
    padding: .4em .5em 0;
    margin: .5em;
    
    vertical-align: baseline;
    
    background: rgba(255, 255, 255, .5);
    border-radius: .15em;
}

form.hero * {
    font: inherit;
    line-height: 1.5em;
    padding: .25em 1em;
    margin-bottom: .5em;
    
    vertical-align: baseline;
}

form.hero input {
    height: auto;
    padding-left: 0;
    padding-right: 0;
    text-indent: .5em;
    width: auto;
    min-width: 50%;
}

.btn img {
    padding: 0;
    margin: 0;
    vertical-align: bottom;
}