JSFiddle - React, Tailwind, and code Playground

by slash197

HTML

<ul style="float: right; margin-left: 5px;" id="status-infos">

   <li><a id="A"class="button qNav sprite-arrow-circle" ></a></li>
   <li>
      <a id = "B" class="button qNav">
         <img width="16" height="16" src="/Images/control-180.png">
      </a>
   </li>
</ul>

CSS

.sprite-arrow-circle{ background-position: 0 0; width: 16px; height: 16px; }
.button { display: inline-block; }
.button, .form legend, .legend, .mini-menu {
   border: 1px solid white;
   border-radius: 0.417em 0.417em 0.417em 0.417em;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
   font-weight: normal;
   line-height: 1.333em;
   outline: 0 none;
   padding: 0.167em 0.5em 0.25em;
   text-decoration: none;
   text-shadow: none;
} 
a.button {
    background-color: transparent;
    background-image: url(/Images/sprite.png);
    background-position: 0 -396px;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}