JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Paintings</a></li>
</ul>

CSS

body{background:black}
li a{
    white-space: nowrap;
    color: transparent;
    display: block;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0px 0px 0px #fff;
    letter-spacing: 1px;
    -moz-transform: scale(0.5); 
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5); 
    -webkit-transform: scale(0.5); 
    transform: scale(0.5); 
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    transition: all 0.6s linear;  text-decoration:none
}
li a:hover{
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    text-decoration:none
}
li a:hover:before{content:"<"}
li a:hover:after{content:">"}
li{
    float:left;
}