JSFiddle - React, Tailwind, and code Playground

Fluid Social List for jp.com

by Jennifer Perrin

HTML

<div id="holdinIt">
    <div class="socialLinks">
        <ul>
            <li><a class="social twitter" href="#">Twitter Profile</a></li>
            <li><a class="social google" href="#">Google+ Profile</a></li>
            <li><a class="social facebook" href="#">Facebook Page</a></li>
            <li><a class="social linkedin" href="#">linkedIn Profile</a></li>
            <li><a class="social forrst" href="#">Forrst Profile</a></li>
            <li><a class="social xing" href="#">Xing Profile</a></li>
            <li><a class="social rss" href="#">RSS Feed</a></li>
        </ul>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

body{ font: 25px/24px normal 'Yanone Kaffeesatz'; }
a { text-decoration: none; }
#holdinIt { width: 300px; margin: 0 auto; }

.social {
    display: inline-block;
    width: 100%;
    padding: 16px 16px 16px 36px;
    margin-bottom: 16px;
    background-color: #f3f2f2;
    box-shadow: 8px 8px 0 0px #bfbfbf;
}

.socialLinks { padding: 8px 8px 0 8px; }

.socialLinks ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Yanone Kaffeesatz';
}
    .socialLinks ul li { display: inline; }
    .socialLinks ul li a:hover { opacity: 0.8; }

.socialLinks ul li a.twitter { 
    background: #f3f2f2 url(http://jenniferperrin.com/img/icons/twitter.png) 0 14px no-repeat; 
    color: #00a0d1;
    border-left: 20px solid #f3f2f2;
}
.socialLinks ul li a.facebook {
    background: #f3f2f2 url(http://jenniferperrin.com/img/icons/facebook.png) 0 14px no-repeat;
    color: #365998;
    border-left: 20px solid #f3f2f2;
}
.socialLinks ul li a.google {
    background: #f3f2f2 url(http://jenniferperrin.com/img/icons/google-plus.png) 0 14px no-repeat;
    color: #db4a39;
    border-left: 20px solid #f3f2f2;
}
.socialLinks ul li a.forrst {
    background: #f3f2f2 url(http://jenniferperrin.com/img/icons/forrst.png) 0 14px no-repeat;
    color: #26451b;
    border-left: 20px solid #f3f2f2;
}
.socialLinks ul li a.linkedin {
    background: #f3f2f2 url(http://jenniferperrin.com/img/icons/linkedin.png) 0 14px no-repeat;
    color: #1e7ec3;
    border-left: 20px solid #f3f2f2;
}
.socialLinks ul li a.xing{
    background: #f3f2f2 url(http://jenniferperrin.com/img/icons/xing.png) 0 14px no-repeat;
    color: #235a5c;
    border-left: 20px solid #f3f2f2;
}
.socialLinks ul li a.rss{
    background: #f3f2f2 url(http://jenniferperrin.com/img/icons/rss.png) 0 14px no-repeat;
    color: #db773d;
    border-left: 20px solid #f3f2f2;
}