JSFiddle - React, Tailwind, and code Playground

by timkl

HTML

<ul id="hero-banner-tabs">
        <li id="hero-banner-tab-1"><a  class="active" href="#"></a></li><li id="hero-banner-tab-2"><a href="#"></a></li><li id="hero-banner-tab-3"><a href="#" class="light"></a></li>
    </ul><!-- /tabs -->

CSS

ul#hero-banner-tabs {
    margin: -6px 0 -10px 0; /*ie7 top adjust*/
    padding: 0;
    width: 956px;
    }

#hero-banner-tabs li {
    list-style-type: none;
    display: inline-block;
    zoom:1;
    *display:inline;
    margin: 0;
    padding: 0;
    }

#hero-banner-tabs li a{
    width: 316px;
    height: 43px;
    display: inline-block;
    zoom:1;
    *display:inline;
    margin: 0;
    margin-right: 1px;
    padding: 0;
    }

#hero-banner-tabs li#hero-banner-tab-1 a {
    background: url(http://www.timkl.com/test/hero-banner-tabs.png) 0 0;
    }

#hero-banner-tabs li#hero-banner-tab-2 a {
    background: url(http://www.timkl.com/test/hero-banner-tabs.png) 0 -43px;
    }

#hero-banner-tabs li#hero-banner-tab-3 a {
    background: url(http://www.timkl.com/test/hero-banner-tabs.png) 0 -86px;
    }

#hero-banner-tabs li#hero-banner-tab-1 a:hover {
    background: url(http://www.timkl.com/test/hero-banner-tabs-hover.png) 0 0;    
    }

#hero-banner-tabs li#hero-banner-tab-2 a:hover {
    background: url(http://www.timkl.com/test/hero-banner-tabs-hover.png) 0 -43px;    
    }

#hero-banner-tabs li#hero-banner-tab-3 a:hover {
    background: url(http://www.timkl.com/test/hero-banner-tabs-hover.png) 0 -86px;
    }

#hero-banner-tabs li#hero-banner-tab-1 a.active {
    background: url(http://www.timkl.com/test/hero-banner-tabs-active.png) 0 0;    
    }

#hero-banner-tabs li#hero-banner-tab-2 a.active {
    background: url(http://www.timkl.com/test/hero-banner-tabs-active.png) 0 -43px;    
    }

#hero-banner-tabs li#hero-banner-tab-3 a.active {
    background: url(http://www.timkl.com/test/hero-banner-tabs-active.png) 0 -86px;
    }