JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="form_wrap">
  <input type="text" id="name" placeholder="Name...."><br>
  <input type="text" id="email" placeholder="Email...."><br>
  <input type="text" id="phone" placeholder="Phone...."><br>
  <textarea name="" id="message" cols="30" rows="10" placeholder="Message....">foo</textarea><br>
  <button id="btn">Click</button>
</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
   display: flex;
   height: 100vh;
   align-items: center;
   justify-content: center;
}

.form_wrap {
  text-align: center;
  padding: 20px;
  background-color: red;
}

#btn {
  padding: 5px;
}

JavaScript

let data = {};

let name = document.getElementById('name');
let email = document.getElementById('email');
let phone = document.getElementById('phone');
let msg = document.getElementById('message');

let btn = document.getElementById('btn');

data = {
	uName : name.value,
  uEmail : email.value,
  uPhone : phone.value,
  uMsg : msg.value
};

btn.addEventListener('click',()=>{
   alert(data.uMsg);
});