JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" class="email" value="email" />
<input type="button" class="phone" value="phone" />
<div id="email-popup" >E-MAIL</div>
<div id="phone-popup" >PHONE</div>
CSS
#phone-popup, #email-popup {height: 200px; width: 200px; background: red; position: absolute; top: 200px; left: 200px; display: none;}
JavaScript
$(".email").click(function(e){
e.stopPropagation();
$("#email-popup").show("fast");
});
$(".phone").click(function(e){
e.stopPropagation();
$("#phone-popup").show("fast");
});
$(document).click(function(e) {
if (!(e.target.id === 'email-popup' || e.target.id === 'phone-popup')) {
$("#email-popup, #phone-popup").hide("fast");
}
});