JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <ul>
            <li tabindex='1'>Content 1</li>
            <li tabindex='2'>Content 2</li>
            <li tabindex='3'>Content 3</li>
            <li tabindex='1'>Content 4</li>
            <li tabindex='2'>Content 5</li>
            <li tabindex='3'>Content 6</li>
        </ul>
        <br/>
        <br/>
        Try clicking on 1 or 4.<br/>
        How do I make them, when I click any / only 1 of them,<br/> 
        both of them will be affected.
    </body>
</html>

CSS

li[tabindex='1']:focus {
    background: black; color: white; }