JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <a href="#">
        <span id="span1">Button1</span>
        <span id="span2">Button1</span>
    </a>
    <a href="#">            
        <span id="span3">Button2</span>
        <span id="span4">Button2</span>   
    </a>
</div>

CSS

#span1 { background-image:url('button1.png'); }
    #span2 { background-image:url('button1H.png');  }
    #span3 { background-image:url('button2.png'); left: 300px;}
    #span4 { background-image:url('button2H.png'); left: 300px;}

    span{ 
        background-repeat:no-repeat;  
        position:absolute;
        width:100px;
        height:50px;
        position: 0 0;
        display: block;
    }