JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <i class="fa fa-plus" aria-hidden="true"></i>
</div>

<form id="form">
  <div>
    <input>
  </div>
  <div>
    <input>
  </div>
  <div>
    <input>
  </div>
</form>

CSS

.fa {
  font-size: 56px;
}

#form {
  display: none;
  padding: 20px;
  background: #ccc;
}

input {
  margin: 10px;
}

JavaScript

$('.fa').on('click', function() {
  $('#form').show();
})

$(document).on('click', function(e) {
  if (!$.contains(document.querySelector('#form'), e.target) && !$(e.target).hasClass('fa')) {
    $('#form').hide();
  }
})