JSFiddle - React, Tailwind, and code Playground

HTML

<div class="twitterClick"></div>
<a class="twitterClick"></a>
    <a href="https://twitter.com/ConvivenciaCan">
    <img src="http://convivencia.ca/images/twitter_icon.png" alt="red ball" height="30" width="30">
    </a>

CSS

.twitterClick {
    border: solid 3px transparent;
    width: 30px;
    height: 30px;
    background: url('https://www.convivencia.ca/images/instagram_icon.png') no-repeat;
    margin-left:0%;
    margin-top:0px;
    background-position: center center;
}
.twitterClick:hover {
    cursor:pointer;
    border-radius: 1px;
    border-color:#226fa3;
    border:outset;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
}