JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "author-details"><div><label>View as:&nbsp;&nbsp;</label> <a href ="#" onClick="return false" onmousedown="javascript:swapContent('con1');"></a></div></div>

CSS

.author-details > div a {
    display: inline-block;
    width: 30%;
    float: none !important;
    background-color: #1ABC9C;
    color: #fff;
    padding: 2% 3% 2% 3%;
    border-radius: 7%;
    font-weight: normal;
    font-size: 16px;

    -webkit-transition: background 0.35s linear;
    -moz-transition: background 0.35s linear;
    -ms-transition: background 0.35s linear;
    -o-transition: background 0.35s linear;
    transition: background 0.35s linear;

    -webkit-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
    box-shadow: 0px 5px 13px -8px rgba(0,0,0,0.45);
}

.author-details > div a:after {
  content: 'Others';
}

.author-details > div a:hover {
    background-color: #5DADE2;
}

.author-details > div a:hover:after {
    -webkit-animation:fade-in 0.35s ease-in;
}

@-webkit-keyframes fade-in{
0%{
    opacity:1;
    top:0px;
}
50%{
    opacity:0;
    top:-5px;
    content: 'Me';
}
100%{
    opacity:1;
    top:-5px;
}
}