JSFiddle - React, Tailwind, and code Playground

by Paco86

HTML

<div class="dialog-header">
  <h3>Add Tenant</h3>
  <div class="dialog-header__close-btn">
    <i class="fa fa-close">X</i>
  </div>
</div>

<form id="form">
  <div>
    <label for="tenantName">Tenant Name:</label> 
    <input type="text" id="tenantName" placeholder="Name">
  </div>

  <div>
    <label for="contactName">Contact Name:</label> 
    <input type="text" id="contactName" placeholder="Contact Name">
  </div>

  <div>
    <label for="tenantEmail">Tenant Email:</label> 
    <input type="text" id="tenantEmail" placeholder="Contact Email">
  </div>

  <div>
    <label for="tenantPhone">Tenant Phone:</label> 
    <input type="text" id="tenantPhone" placeholder="Contact Phone">
  </div>

  <div>
    <label for="dhcp">Eable Custom DHCP Lease Period:</label>
    <input type="checkbox" id="dhcp">
  </div>

  <div>
    <label for="retention">Retention Group:</label>
    <select id="retention">
      <option value="default">default</option>
      <option value="group1">group1</option>
      <option value="group2">group2</option>
      <option value="group3">group3</option>
    </select>
  </div>
<input type="submit" text="Submit">
  
  

</form>

CSS

.dialog-header {
  display: flex;
  justify-content: space-between;
}

JavaScript

document.getElementById('form').addEventListener('keydown', function(event) {
	if (event.target.element === 'input') {
  
  }
});