JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


  <title>test</title>


  <link rel="stylesheet" href="css/NewTow.css" type="text/css" />

  <script src="https://code.jquery.com/jquery-latest.min.js"></script>

</head>

<div id="main_place">

  <div class="swapcon1">

    text gets swapped here


  </div>

</div>





<div id=operation1 style="" class="">

  <h2>EASY 3-STEP FORM</h2>


  <form id="AUTO" method="post" action="" novalidate>

    <!-- fieldsets -->
    <fieldset>


      <div class="div1"><img src="images/step1.png" width="233" height="65"></div>

      <h3>CONTACT INFO</h3>
      <input type="hidden" name="token" value="3308f582b5dbc12f99a823c77be6cdc8" />
      <input type="hidden" name="miles" value="" />
      <div id="contact_name">FULL NAME: *<br>
        <input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"></div>



      <div id="contact_phone">PHONE NUMBER: *<span id="req">Is Required</span><br>
        <input type='tel' name='phone' id="phone" required size="11" class="phone" maxlength="15" placeholder="PHONE NUMBER" title="Phone Number Format:1(614)000-0000" pattern=" /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/" required />
      </div>


      <div id="contact_phone">EMAIL:<br>
        <input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS" />
      </div>




      <div class="button_holder">
        <input type="button" name="next" id="send" value="Next" class="next" />
      </div>



    </fieldset>




    <fieldset>
      <div class="div1"><img src="images/step2.png" width="233" height="65"></div>


      <h3>VEHICLE INFO</h3>

      <div id="contact_name">VEHICLE MAKE: *<br>
        <input id="element_2_1" name="make" class="element text" size="40"...

CSS

#offset {
  animation: letter-flicker 2s linear infinite;
}



@keyframes text-flicker {
  0% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(45, 88, 69, 1);
  }

  2% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  8% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  9% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  12% {
    opacity: 0.1;
    text-shadow: 0px 0px rgba(242, 22, 22, 1);
  }

  20% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }

  25% {
    opacity: 0.3;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }

  30% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }

  70% {
    opacity: 0.7;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }

  72% {
    opacity: 0.2;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }

  77% {
    opacity: .9;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1)
  }

  100% {
    opacity: .9;
    text-shadow: 0px 0px 29px rgba(33, 81, 61, 1)
  }
}

@keyframes letter-flicker {
  0% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  2% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  4% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }


  19% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  21% {
    opacity: 0.1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  23% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  80% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  83% {
    opacity: 0.4;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }

  87% {
    opacity: 1;
    text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
  }
}






body,
html {
  font-weight: bold;
}




.carosel {
  background-image: url("images/20201020_151720.jpg");
  background-repeat: no-repeat, repeat;
  z-index: 1;
 ...

JavaScript

function show(operation1) {
  document.getElementById('main_place').innerHTML = document.getElementById(operation1).innerHTML;
}

var interval = undefined;
$(document).ready(function() {
  $('body').on('click', '.next', getNext);
  $('body').on('click', '.previous', getPrev);
});

function getNext() {
  var $curr = $('fieldset:visible'),
    $next = ($curr.next().length) ? $curr.next() : $('fieldset').first();

  transition($curr, $next);
}

function getPrev() {
  var $curr = $('fieldset:visible'),
    $next = ($curr.prev().length) ? $curr.prev() : $('fieldset').last();
  transition($curr, $next);
}

function transition($curr, $next) {
  clearInterval(interval);
  $curr.hide();
  $next.show();

  $next.css('z-index', 2).fadeIn('fast', function() {
    $curr.hide().css('z-index', 0);
    $next.css('z-index', 1);
  });

}