JSFiddle - React, Tailwind, and code Playground

HTML

This is what I want the input to look like:
<a class="contentAddToCart2" href="">Buy Now<span></span></a>

But this is as far as I have been able to figure out:
<input class="contentAddToCart" type="submit" name="Buy" value="ADD TO CART">

CSS

.contentAddToCart {
    background:#E5E5E5 url('http://f.cl.ly/items/103I080w2r2Y0x122K3z/demo.png') no-repeat right;
    display: block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 100px;
    border:0px
}


.contentAddToCart2 {
    background:#E5E5E5;
    display: block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 100px;
}

.contentAddToCart2 span {
    background: url("http://f.cl.ly/items/103I080w2r2Y0x122K3z/demo.png") repeat scroll -38px 0 transparent;
    float: right;
    height: 24px;
    overflow: hidden;
    text-indent: -99999px;
    width: 24px;
}
.contentAddToCart2:hover {
    background-color: #FFFFFF;
}