JSFiddle - React, Tailwind, and code Playground

by homell100

HTML

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title> Main Page </title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <ul>
            <li><div><span class="spinner">A</span></div></li>
            <li><div><span>B</span></div></li>
            <li><div><span>C</span></div></li>
        </ul>
    </body>
</html>

CSS

ul{
    list-style-type: none;
}

li {
    display: inline-block;
}

ul li div{
    width: 100px;
    height: 100px;
    background-color: red;
}

ul li div:hover span.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin{
    from{ 
        transform: rotate(0deg); 
    }
    to{ 
        transform: rotate(360deg); 
    }
}