JSFiddle - React, Tailwind, and code Playground

by snowman

HTML

<div class="adData">
<div class="linkedList">
    <ul>
        <li>
            <a title="Cat1" href="/Ad/List?CS.C1=32"><span>Cat1</span></a>
        </li>
        <li>
            <a title="Cat2" href="/Ad/List?CS.C2=34"><span>Cat2</span></a>
        </li>
    </ul>
</div>
</div>

CSS

.adData .linkedList ul 
{
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

.adData li 
{
  display: inline;
  margin-bottom: 5px;
  text-align: justify;
}


.linkedList a
{
    background: transparent url('http://i.imgur.com/zjrGx.png') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 26px;
    padding-right: 26px; /* sliding doors padding */
    text-decoration: none;
}
.linkedList a span
{
    background: transparent url('http://imgur.com/UkqxS.png') no-repeat;
    display: block;
    line-height: 14px;
    padding: 6px 0 6px 13px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.linkedList a span {float:none;}
/* End IE5-Mac hack */
.paging a:hover span{
    color:            black;
}
.linkedList .current a
{
    background-position:    100% -52px;
    border-width:            0px;
}
.linkedList .current a span
{
    background-position:    0 -52px;
    color:                    black;
}
.linkedList .inactive a
{
    background-position:    100% -26px;
    border-width:            0px;
}
.linkedList .inactive a span
{
    background-position:    0 -26px;
    color:                    #d9d9d9;
}

.linkedList .inactive a:hover 
{
    background-position:    100% -26px;
    border-width:            0px;
    cursor:                 default;
}
.linkedList .inactive a:hover span 
{
    background-position:    0 -26px;
    color:                    #d9d9d9;
    cursor:                 default;
}

.linkedList a:hover
{
    background-position:        100% -52px;
    color:                    black;
}
.linkedList a:hover span{
      background-position:        0 -52px;
}


#signInForm a:link, a:visited {
  color: #2277BB;
  text-decoration: none;
}