JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<table id="social" border="5">
    <tr>
        <td>
            <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyannbane.blogspot.com%2F&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=177127339057410" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
        </td>

        <td>
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://yannbane.blogspot.com/" data-via="Yannbane">Tweet</a>
        </td>

        <td>
            <g:plusone></g:plusone>
        </td>
    </tr>
</table>

JavaScript

// animate color variable from 0x0 to 0xF
$({ color: 0 }).animate({ color: 15}, {
    duration: 800,
    step: function(now, fx) {
        var hexValue = Math.round(now).toString(16);
        $("#social").css({
            'border-top-color': '#' + hexValue + '00',
            'border-bottom-color': '#' + hexValue + hexValue + hexValue
        });
    }
});