JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<footer>
    <h3>Copyright © ******** - 2015</h3>
    <div class="share">
        <a href="https://www.facebook.com/MangaNext"><img src="http://www.hotel-haussonville.fr/systeme/media/facebookicon.png" alt="Facebook" /></a>
        <a href="https://twitter.com/MangaNext"><img src="http://avaorigins.fr/wp-content/uploads/2013/04/icone-twitter-10685503dkhiq_1713.jpg" alt="Twitter" /></a>
        <a href="http://www.manganext.fr/rss.xml"><img src="http://www.branchersherbrooke.com/wp-content/uploads/rss.gif" alt="RSS" /></a>
    </div>
</footer>

CSS

footer
    {
        width: 100%;
        height: 70px;
        margin: 0;
        background-color: #F6C70C;
        position: relative;
    }
    footer h3
    {
        background-color: #426384;
        border: 1px solid #426384;
        border-radius: 5px 5px 0px 0px;
        padding: 10px 30px 10px 30px;
        width: 350px;
        margin: auto;
        position: absolute;
        left: 50%;
        transform:translateX(-50%);
        bottom: 0;
        text-align: center;
        color: white;
    }
    .share
    {
        position: absolute;
        top: 10px;
        right: 115px;
    }
     
    .share a, .share img
    {
        display: inline-block;
        width:20px;
        height:20px;
    }


     
    .share a:hover
    {
        transform: rotate(360deg) scale(1.05);
        transition-property: transform;
        transition-duration: 650ms;
    }
    @media screen and (max-width: 1000px)
    {
        footer h3
        {
            display: none;
        }
         
        .share
        {
            margin: auto;
            width: auto;
        }
         
    }