JSFiddle - React, Tailwind, and code Playground

by mrcatoff

HTML

<form>
<input type="text" value="https://google.com" id="html_link">
<input type="text" value="Custom text" id="html_header">
</form>
<div class="" id="result_form">
  <a href="https://google.com" style="display: none;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
  <div class="">
    <h2>
    Custom text
    </h2>
  </div>
</div>

JavaScript

document.getElementById('html_link').addEventListener('keydown', function (event) {
  document.querySelector('#result_form a').setAttribute('href', this.value);
})
document.getElementById('html_header').addEventListener('keydown', function (event) {
	document.querySelector('#result_form h2').innerText = this.value + event.key;
  console.log(event.key)
})