JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<body>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur optio soluta nam sapiente ad fugiat cupiditate distinctio veniam consectetur nemo laborum consequatur corporis excepturi, quisquam esse repellat! Nobis, quibusdam, perferendis!

  <button class="btn cta-button" id="cta-engage">Engage your community</button>
    <div class="arrow-up no-top-margin"></div>
</div>
  <section class="engage-form-section gray-bg">
    <button type="button" class="close">&times;</button>
  <h2 class="h1 text-center">Fill up this form and we will get in touch with you</h2>
  <p class="text-center brand-color-1-text">(All fields are mandetory)</p>
  <div class="col-md-6 col-centered">
    <form class="form-horizontal">
      <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Name :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-field" id="name">
        </div>
      </div>
      <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email :</label>
        <div class="col-sm-10">
          <input type="email" class="form-control form-field" id="email">
        </div>
      </div>
      <div class="form-group">
        <label for="company" class="col-sm-2 control-label">Company :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-field" id="company">
        </div>
      </div>
      <div class="form-group">
        <label for="country" class="col-sm-2 control-label">Country :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-field" id="country">
        </div>
      </div>
      <div class="form-group">
        <label for="city" class="col-sm-2 control-label">City :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-field" id="city">
        </div>
      </div>
      <div class="form-group">
        <label for="msg"...

CSS

.arrow-up {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid yellow;
  margin-left: auto;
  margin-right: auto;
}
.arrow-up {
  display:none;
}
.engage-form-section {
  background-color:#ddd;
  padding:20px;
  display:none;
}
.btn2{
  background-color:#ddd;
  padding:20px;
  float:right;
}

JavaScript

$(document).ready(function(){
    $(".cta-button").click(function(){
        $(".arrow-up, .engage-form-section").slideDown("slow");
    });
  $(".close").click(function(){
        $(".arrow-up, .engage-form-section").slideUp("slow");
    });
  $(".btn2").click(function(){
        $(".arrow-up, .engage-form-section").slideUp("slow");
    });
});