JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<center>
<div style="background: url(https://tiktakit.com/wp-content/uploads/2024/bgin.jpg) bottom right;padding:30px;border-radius:15px;width:100%">
      <p style="background: url(https://tiktakit.com/wp-content/uploads/2024/enve.png) no-repeat center;background-size: contain;width:100px;height:100px"></p>
    <p style="color:white;font-size:18px">הרשמו לקבלת עדכונים</p><br>
    <input id="input_field" type="email" class="sib-email-area" name="email" required="required">
    <input type="submit" class="sib-default-btn" value="שלח">
</div>
<br>
<div id="options" class="options">
<div class="Data">this is a test</div>
</div>
</center>

CSS

.options{
  display:none;
  width: 300px;
  height: 200px;

}

JavaScript

$(function () {
    var inputField = $('#input_field');
    var optionsResult = $('#options');
    
    // Get arbitrary element with id "my-element"
    var myElementToCheckIfClicksAreInsideOf = document.querySelector('#options');
    // Listen for click events on body
    document.body.addEventListener('click', function (event) {
        if (myElementToCheckIfClicksAreInsideOf.contains(event.target) || event.target.id !== 'input_field') {
            optionsResult.hide();
        }
    });

    inputField.focusin(function (e) {
        e.preventDefault();
        optionsResult.show();
    });
});