JSFiddle - React, Tailwind, and code Playground

by karlovac

HTML

<div class="view">
blah
</div>

<div class="container">
</div>

CSS

.view {
  height: 200px;
  background-color: #00ff00;
  position: relative;
  display: block;
}

.container {
  background-color: #ff0000;
  position: relative;
  display: block;
}

.container input {
  display: block;
  margin: auto;
  margin-top: 30px;
  font-size: 24px;
}

JavaScript

const logEvent = (e) => {
	console.log('['+e.type+'] event');
};

for (let i=0; i<10; i++) {
	const el = document.createElement('input');

  el.addEventListener('mousedown', e => {
	  logEvent(e);
  });
  el.addEventListener('focus', e => {
	  logEvent(e);
    e.preventDefault();
    setTimeout(() => {
    	console.log('timeout has run');
    	window.scrollTo(0,0);    
    }, 100);
  });
  el.value = 'input number ' + i;
  const parent = document.querySelector('.container');
  parent.append(el);
}