JSFiddle - React, Tailwind, and code Playground

by lucyman76

HTML

<div class="divv">
    Message sent successfully!
</div>
<form name="form" id="form" action="http://lazzar.zz.vc" method="post">

    <input type="text" name="name" id="name"/>
    <input type="submit" name="submit" value="submit"/>
</form>                       
<button type=""class="btn">FADE</button>

CSS

div{
    background-color:rgba(24,245,45,0.8);
    padding: 10px 30px 10px 30px;
    display:none;
    font-size:22px;
    position:absolute;
    text-align:center;
    font-family: Arial;
    font-weight:100;
    z-index:2;
    
}

button{
    width:100px;
    padding: 10px 10px 10px 10px;
    margin-top:150px;
}

JavaScript

$(document).ready(function(){
     var $form = $('#form');
   $form.submit(function(){       
      $.post($(this).attr('action'), $('form').serialize(), function(response){
          
          alert("ieii");
              $('.divv').css('display','block');
      },'json');
      return false;
   });
    
    //fade
    $('.btn').click(function(){
        $('.divv').fadeIn(1500,function(){
            $('.divv').fadeOut(5000);
        });
    });
});