JSFiddle - React, Tailwind, and code Playground

by Chris22

HTML

<ul class="options">
                    <li class="comment"><a href="#">Comment</a></li>
                    <li class="email"><a href="#">E-mail</a></li>
                    <li class="tweet"><a href="#">Twitter</a></li> 
                    <li class="fb"><a href="#">Facebook</a></li>
                    <li class="linkedin"><a href="#">LinkedIn</a></li>
        
                </ul>

CSS

.options {
                width:500px;
                border:1px solid red;
                overflow:hidden;
            }
                            
            .options li {
                float:left;
            }
            
            .options a {
                padding:4px 5px;
                
                
            }
            
            .options a:hover {
                color:red;
            }
            
            
            .options li a{
                background:url("images/sprites.gif") repeat-y;
                width:13px;
                height:1117px;
                padding:0 0 0 12px;
                border:1px solid blue;
                display:inline;
                
            }
            
            .options li.comment a {
                background-position:0px -118px;

            }
            
            .options li.email a {
                background:0px -478px;
            }
            
            .options li.tweet a {
                background:0px 312px;
            }
            
            .options li.fb a {
                background:0px 336px;
            }
            .options li.linkedin a {
                background:0px 360px;
            }