JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<form id="myform">
    <p>
        Enter some text and hit "Clear": <input type="text" value="" />
    </p>
    <p>
        <span class="btn btn-warning">
            <i class="fa fa-times"></i> <input type="reset" value="Clear"/>
        </span> - input type=reset
    </p>
    <p>
        <button class="btn btn-warning" type="reset">
            <i class="fa fa-times"></i> Clear
        </button> - button type=reset
    </p>
    <p>
        <a href="javascript:document.getElementById('myform').reset();" class="btn btn-warning">
            <i class="fa fa-times"></i> Clear
        </a> - anchor + javascript
    </p>
</form>

CSS

/*For input type reset only*/
span > i {
    color: white;
}
span > input {
    background: none;
    color: white;
    border: 0;
    padding: 0;
}