JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<input id="add_contact" 
type="button"  value="New" >


<div id="justforpositonnew_contact" hidden>
	<input type="email" id="new_contact" placeholder="Email" >
  <input type="button" id="add" >
	</div>

CSS

#add_contact{
position: absolute;
right:0;
padding:17px;padding-right:50px;width:50px;border:1px solid #D1D2F3;
font-size:20px;color:blue;
border-radius : 50px;  
background-position:right center; outline:0;
}
#add{
position: relative;
right:0;
padding:17px;padding-right:50px;width:20px;border:1px solid #D1D2F3;
font-size:20px;
border-radius : 50px;  
background-position:right center; outline:0;
background-image:url("http://dummyimage.com/15x15/de1417/de1417.png");
background-repeat:no-repeat;
}

#new_contact{
position: absolute;
right:0;
padding:17px;padding-right:50px;width:200px;border:1px solid #D1D2F3;
font-size:20px;color:blue;
border-radius : 50px;
background-position:right center; outline:0;
/* background-image:url("/resources/images/search.ico");
background-repeat:no-repeat;
background-position:right center; outline:0; */
}
#justforpositonnew_contact{
	position: absolute;
	left : 400px;
}

JavaScript

var re = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
$(function(){

$("#new_contact").on('keyup', function (e) {	
			
	    $("#add").click(function (){ 
      
      if(re.test($("#new_contact").val())){
      $('#new_contact').css('border', '1px solid green');     
      }
      else {
      $('#new_contact').css('border', '1px solid red');
      }
	    });	
	//search this value $(this).val()
	
});



$("#add_contact").click(function(){
$("#add_contact").hide();
$("#justforpositonnew_contact").show();
});

});

$(window).click(function() {
$('#new_contact, #add, #add_contact').click(function(event){
	    event.stopPropagation();
	});
$("#add_contact").show();
$("#justforpositonnew_contact").hide();

});