JSFiddle - React, Tailwind, and code Playground

HTML

<h1>iOS Button focus test</h1>
<body ontouchstart="">
<p>Works on Desktop (Firefox, Chrome, Edge), not on iOS:</p>
<button>Button 1</button>
<button>Button 2</button>

<br/>
<p>works everywhere, js solution:</p>
<button onclick="this.focus()">Button 3</button>
<button onclick="this.focus()">Button 4</button>

<p>suggested solution with tabindex, but also does not work on iOS:</p>
<button tabindex="1">Button 5</button>
<button tabindex="2">Button 6</button>
</body>

CSS

button:focus{
  border: 2px solid red;
}