JSFiddle - React, Tailwind, and code Playground

by sesamechicken

HTML

<button onclick='shiftFocus()'>
Click me
</button>
<br />
<input type='text' placeholder='thing 1' /> <br />
<input type='text' placeholder='thing 2' /> <br />
<input type='text' placeholder='thing 3' />

CSS

input{
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #d5d5d5;
  margin: .2em 0;
}
input:focus{
 box-shadow: 1px 1px 10px #008698;
 outline: none;
}

JavaScript

const shiftFocus = () => {
	const thing3 = document.querySelectorAll('input')[2];
  thing3.focus();
}