JSFiddle - React, Tailwind, and code Playground

HTML

<div class="social-top">
        
        <ul>
            <li class="facebook"><a href="#self">F</a></li>
                <li class="twitter"><a href="#self">T</a></li>
                    <li class="youtube"><a href="#self">YT</a></li>
        </ul>
                    
    </div>

CSS

.social-top {
float: right;
}

.social-top li {

    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #ccc;
    border-radius: 150px;
}

.social-top li.facebook:hover {
    background-color: #006;
 
}

.social-top li.twitter:hover {
    background-color: #060;
 
}

.social-top li.youtube:hover {
    background-color: #600;
 
}

    .social-top li:hover a {
           color: #fff;
    }

.social-top a {
    display: block;
    line-height: 40px;
    text-align: center;
    width: 100%;
    height: 100%;
}