JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="social-nav">
    <ul>
        <li><a href="#" target="_blank">A</a>

        </li>
        <li><a href="#" target="_blank">B</a>

        </li>
        <li><a href="#" target="_blank">C</a>

        </li>
        <li><a href="#" target="_blank">D</a>

        </li>
    </ul>
</nav>

CSS

@media screen and (max-width: 600px) {
        .social-nav {
            position:absolute;
            right: 10px;
        }
        .social-nav ul {
            margin: 0;
            padding:0;
        }
        .social-nav ul li {
            list-style: none;
            display:block;
            background: #393939;
            padding:10px 10px 5px 10px;
            margin: 1px;
            opacity: .5;
            transition: all 0.6s ease-in-out;
        }
        .social-nav ul li:hover {
            opacity: .8;
            background:#fff;
        }
    }
    @media screen and (min-width: 600px) {
        .social-nav {
            background:#000;
            width:100%;
            position:absolute;
            top: 0px;
            left: 5%;
        }
        .social-nav ul {
            margin: 0;
            padding:0;
        }
        .social-nav ul li {
            list-style: none;
            display:table-cell;
            float: left;
            background: #393939;
            padding:100px 10px 5px 10px;
            margin: 1px;
            opacity: .5;
            transition: all 0.6s ease-in-out;
        }
        .social-nav ul li:hover {
            opacity: .8;
            background:#fff;
        }
        .social-nav ul li a {
            color:#fff;
        }
    }
}