JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<ul class="list-group">
    <li class="list-group-item"><a href="#">
        <i class="fa fa-home"></i>Anasayfa</a>
    </li>
    <li class="list-group-item"><a href="#">
        <i class="fa fa-book"></i>Hakkımızda</a>
    </li>
    <li class="list-group-item"><a href="#">
        <i class="fa fa-truck"></i>Ürünlerimiz</a>
    </li>
</ul>

<ul class="list-group">
    <li class="list-group-item"><a href="#">
        <i class="fa fa-pie-chart"></i>Bayi ve Servislerimiz</a>
    </li>
    <li class="list-group-item"><a href="#">
        <i class="fa fa-newspaper-o"></i>Haberler</a>
    </li>
    <li class="list-group-item"><a href="#">
        <i class="fa fa-map-marker"></i>İletişim</a>
    </li>
</ul>

CSS

.list-group:nth-child(1){
    margin-right: 30px;
}
.list-group:nth-child(2){
    margin-right: 0px;
}
.list-group{
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
    display: inline-block;
}
.list-group li{
    line-height: 30px;
    font-size :11.5px;
    font-family: 'Tahoma';
    min-width: 220px;
    width: auto;
}
.list-group li i{
    font-size: 16px;
    width: 30px;
    margin-right: 2px;
    text-align: center;
    vertical-align: text-bottom;
}
.list-group li a{
    color: #6b6b6b;
    font-weight: 400;
}
.list-group li a:hover{
    text-decoration: none;
    color: #555;
}

JavaScript

$(".list-group a").hover(function(){
    $(this).animate({
        'padding-left': '+=6px'
    }, "fast");
}, function(){
    $(this).animate({
        'padding-left': '-=6px'
    }, "fast");
});