JSFiddle - React, Tailwind, and code Playground

HTML

<h1>CSCI E-3 Unit 3 Project, Part B</h1>
      <p class="whatlearn">Unit 3b Homework will exercise the DOM, browser
        Events and form handling. This assignment is worth half of the total point value for the Unit 3 project. 
The other half was Unit 3 Project: Part B, previously distributed as a ZIP file.
 You should complete Part A before working on Part B.</p>
      <h4>Add behavior and additional functionality to an HTML <em>FORM</em></h4>
      You'll be adding behavior to the form below, including adding some new
      form fields and sections. You will be adding some of the following
      behaviors and features to the form.&nbsp; Specifically, you must do four
      of the six (your choice) items below. Doing more
      than the minimum counts as extra credit. <br>
      <br>
      You may change the HTML if you like, to make a form that better fits your
      interests, make it look better, or provide a better user
      experience. You must make it clear to your grader which of the
      six behaviors you've implemented&mdash;this will be especially important if
      you change the form. <br>
      <ol>
        <li>There are two password fields on the form. You will write code that
          ensures that:</li>
        <ol>
          <li>Users must enter passwords of at least 8 characters.</li>
          <li>The two fields must match.</li>
          <li>Users receive feedback immediately if the passwords don't match,
            rather than only when the form is submitted.<br>
            <br>
          </li>
        </ol>
        <li>There is a textarea on the form labeled <em>Brief Bio</em>. This is going to be <em>really</em> brief. Your code will
          provide a countdown near the <em>140 character limit</em> caption
          that counts backwards from 140 to zero to show users how many
          characters they have left.&nbsp; You may make it so that once the
          limit is reached, no more characters show in the field, even if the
   ...

CSS

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.hint {
	display:none;
	color:red;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

JavaScript

var phoneField = document.getElementById('phone');
var emailField = document.getElementById('email');
var submitButton = document.getElementById('submitBtn');
submitButton.addEventListener('click',ValidatePhoneOrEmail);
function ValidatePhoneOrEmail(){
if(phoneField.value=="" && emailField.value=="")
{
alert("Please provide either phone number or Email");
}
}