JSFiddle - React, Tailwind, and code Playground

HTML

<p>Dê o foco a cada um dos textos a seguir clicando sobre os textos ou clicando em qualquer lugar e acionando a tecla Tab.
    <br>Alguns navegadores, por padrão, colocam uma borda em elementos que tem o foco.</p>

<h3 tabindex="1">Título com fundo cinza</h3>

<p tabindex="2">Parágrafo com outline</p>
<ul>
    <li tabindex="3">Item 1 - cor verde</li>
    <li tabindex="4">Item 2 - aumenta tamanho de fonte</li>
    <li tabindex="5">Item 3 - sublinhado</li>
</ul>
<input type="text">

CSS

h3:focus {
    background: #ccc;
}
p:focus {
    outline: 2px dotted blue;
}
li:nth-child(1):focus {
    color: green;
}
li:nth-child(2):focus {
    font-size: 150%;
}
li:nth-child(3):focus {
    text-decoration: underline;
}
input:focus {
    background: yellow;
    border: 1px solid black;
}