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>


 

<script>
  function show(operation1) {
    document.getElementById('main_place').innerHTML = document.getElementById('operation1').innerHTML;
  }
</script>

<script>
var interval = undefined;
$(document).ready(function () {
    $('.next').on('click', getNext);
    $('.previous').on('click', 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);
    });

}


</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>...

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,...