JSFiddle - React, Tailwind, and code Playground

by LOOnny

HTML

<label for="nickname" class="label">Введите никнейм:</label>
<input type="text" id="nickname" class="text-input">

CSS

.label {
  display: inline-block;
  height: 32px;
  box-sizing: border-box;
  padding: 0 1em;
}

.text-input {
  width: 160px;
  height: 32px;
  border: 1px solid #999;
  box-sizing: border-box;
  padding: 0 1em;
  color: #999;
}

JavaScript

function textInputHandler(ev) {
	const 
  	modalWrapper	= document.createElement('div'),
  	inpt					= document.createElement('input'),
    btnCancel 		= document.createElement('div'),
    btnEnter			= document.createElement('div');
    
  const
  	cssModalWrapper = {
    	position: 'fixed',
      top: '0',
      left: '0',
      width: '100vw',
      height: '100vh',
      background: 'rgba(0, 0, 0, 0.2)'
    },
    cssModal = {
    	position: 'absolute',
      top: '50%',
      left: '50%',
      transofm: 'translate(-50%, -50%)',
      display: 'flex'
    },
    cssInpt = {
    	dispay: 'block',
      width: '100%',
      height: '32px',
      flexGrow: '2'
    },
    cssBtn = {
    	float: 'left',
    	width: '120px',
      height: '32px',
      flexGrow: '1'
    },
    cssBtnCancel = {},
    cssBtnEnter = {};  
}

document.querySelectorAll('input[type="text"]').forEach(el => {
	el.addEventListener('focus', textInputHandler);
});