JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <title>Hello, world!</title>
   </head>
   <body>
      <form>
         <div class="form-group">
            <label>EMAIL:</label>
            <input type="email" class="form-control" id="email-input" placeholder="name@example.com">
         </div>
         <div class="form-group">
            <label>TYPE TIME:</label>
            <select class="form-control" name="type_time" id="type_time">
               <option value="">SELECT TYPE...</option>
               <option value="seconds">SECONDS</option>
               <option value="minutes">MINUTES</option>
            </select>
         </div>
         <div class="form-group" id="form-seconds">
            <label>SECONDS:</label>
            <input type="text" class="form-control" id="seconds-input">
         </div>
         <div class="form-group" id="form-minutes">
            <label>MINUTES:</label>
            <input type="text" class="form-control" id="minutes-input">
         </div>
         <button type="submit" class="btn btn-primary" id="buttonsubmit">Submit</button>
      </form>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"...

JavaScript

$(document).ready(function () {
  $("#form-seconds, #form-minutes").hide();
  $('select[name="type_time"]').change(function () {
    if ($(this).val() === "seconds") {
      $("#form-seconds").show();
      $("#form-minutes").hide();
    } else if ($(this).val() === "minutes") {
      $("#form-minutes").show();
      $("#form-seconds").hide();
    } else {
      $("#form-seconds, #form-minutes").hide();
    }
  });
});


 $("#buttonsubmit").click(function () {
    if ($("#email-input").val() == "") {
        $("#email-input").focus();
        alert('Field Form Email');  
    } else if ($("#seconds-input").val() == "") {
        $("#seconds-input").focus();
        alert('Field Form Seconds');
     } else if ($("#minutes-input").val() == "") {
        $("#minutes-input").focus();
        alert('Field Form minutes');
     }
 });