JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="">
<input id="it" type="text" class="field-txt" placeholder="Type “PRESSKIT” to start the download.." />
</form>
<a href="test.zip" class="btn" download="download">Download Presskit</button>
CSS
.btn {
display:block;
float:left;
padding: 20px;
text-decoration: none;
text-align:center;
background-color: #eee;
color: #fff;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn.active {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
background-color: #34495e;
pointer-events: all;
}
input {
display: block;
float: left;
padding: 22px;
}
}
JavaScript
$('#t').on('keyup',function() {
var inpValu = $('input').val().toLowerCase();
if(inpValu=='presskit'){
$('.btn').addClass('active');
}else{
$('.btn').removeClass('active');
}
});