JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <div class="step-inner">        
        <!-- email -->                    
        <div class="email-field">          
          <input id="email" type="email" value="" placeholder="Ex.: [email protected]">
          
        </div>
        <!-- end: email -->                  
        <div class="buttons-block">
          <a href="#" class="step-btn submit-btn tr-submit-button is-disable" id="agreeclick" data-id="agreeclick">             Fuck now                                            </a>
          
        </div>
      </div>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  background: #000;
}
.email-field input {
    width: 100%;
    text-align: left;
    line-height: 1.1;
    background: rgba(255,255,255,0.37);
    border: none;
    border-radius: 4px;
    color: #160d08;
    font-size: 1.4rem;
    padding: 15px 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
    font-weight: bold;
}
.step-btn {
    display: block;
    max-width: 21.5rem;
    margin: 1rem auto;
    padding: 1.4rem 1.5rem;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 700;
    color: #2d0513;
    border-radius: 0.5rem;
    background: #d91d37;
    border: 1px solid transparent;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: all 0.3s linear;
    position: relative;
    z-index: 1;
    box-shadow: 0.8rem 0.8rem 0.3rem rgba(0,0,0, 0.85);
    text-decoration: none;
    text-align: center;
}

.step-btn.is-disable {
  opacity: 0.3;
  pointer-events: none;
}

JavaScript

/*
	на обоих джампах потушить кнопку до ввода мыла, типо пака юзер не ввёл мыло - кнопка не активна, только он ввёл что-то - кнопка активна.

ТИпо, если это не долго и не сложно (чтобы баги не вылазили)
*/


$(document).ready(function(){
	
  $("#email").keyup(function() {
  	var $email = $("#email").val();
  	console.log();
    $(this).css("background-color", "yellow");
    if($email != 0) {
        $('.submit-btn').removeClass('is-disable');
    } else {
        $('.submit-btn').addClass('is-disable');
    }
  });
});