JSFiddle - React, Tailwind, and code Playground

by kizu

HTML

Buttons:
    <span class="Button">
        <span class="Button-helper"></span><img src="http://www.connectedtext.com/Image/ok.gif" />
        <span class="Button-text">Small Icon</span>
    </span>


    <span class="Button">
        <span class="Button-helper"></span><img src="http://cdn1.iconfinder.com/data/icons/glaze/48x48/actions/button_ok.png" />
        <span class="Button-text">Large icon</span>
    </span>


    <span class="Button">
        <span class="Button-helper"></span><span class="Button-text">No Icon</span>
    </span>

    Inline text

    <br />
    Thank you for trying.

CSS

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; height:24px;
             vertical-align:middle; 
             }
.Button-helper
{
    display: inline-block;
    height: 200px;
    vertical-align: middle;
    width: 0;
}

span.Button img,
.Button-text
{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -88px;
}