JSFiddle - React, Tailwind, and code Playground

by floyd_may

HTML

<div class='outer'>
    <span>Search for:</span>
    <input type="text" />
    <a class="search-button btn-outer" href="">
        <span class="btn-inner">
            <span class="btn-icon"></span>
        </span>
    </a>
    <span>in:</span>
    <a href="" class="btn-outer">
        <span class="btn-inner" >
            <span class="ng-scope">(TODO: dropdown menu)</span>
            <span class="btn-icon"></span>
        </span>
    </a>
</div>

CSS

.outer
{
    /* just for visual clarity inside mr. jsfiddle */
    padding: 2em;
    border: 1px solid black;
    font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
}

.outer > *
{
    display: inline-block;
}

.btn-outer
{
    border: 1px solid #aaa;
    padding: 5px;
    background-color: #acf;
    text-decoration: none;
}

.btn-inner,
.btn-inner > *
{
    vertical-align: baseline;
}


.btn-outer .btn-icon
{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #999;
    display: inline-block;
    margin-bottom: -3px;
}