JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<a href = "#" id="foo">
AAAAAAAAAAAAA    
</a><a  href = "#">
BBBBBBBBBBBBB
</a><a  href = "#">
CCCCCCCCCCCCC    
</a><a  href = "#">
AAAAAAAAAAAAA
</a><a  href = "#">
BBBBBBBBBBBBB
</a><a  href = "#">
CCCCCCCCCCCCC    
</a><a  href = "#">
AAAAAAAAAAAAA
</a><a  href = "#">
BBBBBBBBBBBBB
</a><a  href = "#">
CCCCCCCCCCCCC
</a>

CSS

@keyframes pressed {    
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.3); 
    }
}
a:focus, a:active {
    animation-name: pressed; 
    animation-duration: .5s;    
    -moz-animation-fill-mode: forwards;
}


a{
    border: 1px solid silver; 
    padding: 10px;
    margin: 0px;
    display: inline-block;
    width: 33.3%;
    box-sizing: border-box;  
    background: white;
}

JavaScript

document.getElementById("foo").focus();