JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

HTML

<div class="sociallist">
                        <a class="fb" title="Follow on Facebook" href="http://www.facebook.com/CordlifeIndia" target="_blank">Like onFacebook</a>
                        <a class="twitter" title="Follow on Twitter" href="http://twitter.com/intent/follow?source=followbutton&amp;variant=1.0&amp;screen_name=CordLife_India" target="_blank">Follow on Twitter</a>
                        <a class="gplus" title="Follow on Google" href="https://plus.google.com/115726787659806145941/posts" target="_blank">Follow on Google</a>
                        <a class="linkedin" title="Follow on LinkedIn" href="http://www.linkedin.com/company/cordlifesciences-india-pvt.-ltd" target="_blank">Follow on LinkedIn</a>
                        <a class="youtube" title="Follow on Youtube" href="http://www.youtube.com/user/cordlifein?sub_confirmation=1" target="_blank">Follow on Youtube</a>
                    </div>

CSS

.sociallist a{
    width:20px;
    height:20px;
    text-indent:-999px;
    display:inline-block;
    
}

.sociallist .fb{
      background:#305891  url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M22.439%2010.95h4v-4.95h-4c-3.311%200-6%202.92-6%206.5v2.5h-4v4.97h4v12.03h5v-12.03h5v-4.97h-5v-2.55c0-.86.532-1.5%201-1.5z%22%2F%3E%3C%2Fsvg%3E') no-repeat left;
    background-size: 20px 20px;
    
}

.sociallist .twitter{
      background:#2ca8d2  url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M26.67%209.38c-.779.35-1.63.58-2.51.69.9-.54%201.6-1.4%201.92-2.42-.85.5-1.78.87-2.78%201.06-.8-.85-1.94-1.38-3.19-1.38-2.42%200-4.379%201.96-4.379%204.38%200%20.34.04.68.11%201-3.64-.18-6.86-1.93-9.02-4.57-.38.65-.59%201.4-.59%202.2%200%201.52.77%202.86%201.95%203.64-.72-.02-1.39-.22-1.98-.55v.06c0%202.12%201.51%203.89%203.51%204.29-.37.1-.75.149-1.15.149-.28%200-.56-.029-.82-.08.56%201.74%202.17%203%204.09%203.041-1.5%201.17-3.39%201.869-5.44%201.869-.35%200-.7-.02-1.04-.06%201.94%201.239%204.24%201.97%206.71%201.97%208.049%200%2012.45-6.67%2012.45-12.45l-.01-.57c.839-.619%201.579-1.389%202.169-2.269z%22%2F%3E%3C%2Fsvg%3E') no-repeat left;
    background-size: 20px 20px;
    
}

.sociallist .gplus{
        background:#cf4832...

JavaScript

jQuery(document).ready(function(){
    jQuery(".sociallist a").click(function(){
        if(window.innerWidth > 520 & window.innerHeight > 420)
        {
            alert('test');
            return false;
        }
    });

});