JSFiddle - React, Tailwind, and code Playground

by stefek99

HTML

<div tabindex=1 class="child active" autofocus>1</div>
    <div tabindex=2 class="child" >2</div>
    <div tabindex=3 class="child" >3</div>
    <div tabindex=4 class="child" >4</div>

CSS

body {background: #eee;}
    .child {display:block; width:200px; border: 5px solid black; padding: 10px;}
    .child.active {background: red;}

JavaScript

$(document).ready(function() {
    $("body").on("hover", ".child", function(){
        $(".child").removeClass("active");
        $(this).addClass("active");
        $(this).focus();
    });
    
    $("body").append('<div tabindex=5 class="child">5</div>' +
            '<div tabindex=6 class="child" >6</div>' +
            '<div tabindex=7 class="child" >7</div>' +
            '<div tabindex=8 class="child" >8</div>');
    
});