JSFiddle - React, Tailwind, and code Playground

by abarykin

HTML

<div class="home-layout-clients shadow-side-all">
                    <div class="home-layout-clients-title">Our Clients</div>
                    
                    <br><br><br><br><br>
                    <span class="clear"></span>
                    <a id="client1" href="#1">
                        <div class="client-out"></div>
                        <div class="client-over opacity_0"></div>
                    </a>
                    <a id="client2" href="#2">
                        <div class="client-out"></div>
                        <div class="client-over opacity_0"></div>
                    </a>
                    <a id="client3" href="#3">
                        <div class="client-out"></div>
                        <div class="client-over opacity_0"></div>
                    </a>
                    <a id="client4" href="#4">
                        <div class="client-out"></div>
                        <div class="client-over opacity_0"></div>
                    </a>
                    <a id="client5" href="#5">
                        <div class="client-out"></div>
                        <div class="client-over opacity_0"></div>
                    </a>                    
                </div>

CSS

.home-layout2-title
{    
    position:relative;
    float:left;
    margin-top: 20px;
    margin-left: 20px;
    font-family:PT Sans;
    font-weight: bold;
    font-size:20px;
    color:#444444; 
    text-align:left;    
}
.home-layout-clients
{

    float:left;
    width:100%;
    height: 400px;    
    /*background-color:#f5f5f5;*/
    text-align:center;
    
    background:url(http://forum.searchengines.ru/attachment.php?attachmentid=117078&stc=1&d=1354634819) 0 50px no-repeat;
}
.home-layout-clients-title
{
    position:relative;
    float:left;
    margin-top: 20px;    
    margin-left: 20px;
    font-family:PT Sans;
    font-weight: bold;
    font-size:20px;
    color:#444444; 
    text-align:left;    
    
}
.home-layout-clients a
{
    margin: 0px 50px 70px 50px;
    color:#d00355;
    font-weight:normal;
    text-decoration:none;
    width: 166px;
    height: 73px;
    position:relative;
    float:left;
}

.client-over, .client-out { position:absolute; top:0px; left:0px; width:100%; height: 100%; } 
.client-over, .client-out { background-image:url(http://wg-studio.narod2.ru/synergy_sprite.png); }

#client1 .client-out{ background-position:0px -280px; }
#client1 .client-over{ background-position:0px -360px; }

#client2 .client-out{ background-position:-170px -280px; }
#client2 .client-over{ background-position:-170px -360px; }

#client3 .client-out{ background-position:-340px -280px; }
#client3 .client-over{ background-position:-340px -360px; }

#client4 .client-out{ background-position:-510px -280px; }
#client4 .client-over{ background-position:-510px -360px; }

#client5 .client-out{ background-position:-680px -280px; }
#client5 .client-over{ background-position:-680px -360px; }