JSFiddle - React, Tailwind, and code Playground

by Zakaria Acharki

HTML

<div class="wrapper">
  <div class="headcard">
    <h4>Brand Name</h4>
    <a href="#" class="button">Join Now </a>
  </div>

  <!--this is hidden by default-->
  <div class="slidethis">

    <div class="firstdiv">
      Click here to open the form
    </div>

    <div class="seconddiv">
      <form>
        <a href="#" class="close_icon">X</a>
        <input placeholder="name" />
        <input placeholder="email" />
      </form>
      <!--close pop up-->
      <div class="popup">
        Closing will clear the form data. Do you want ot close?
        <br/>
        <input type="button" class='confirm' value="Yes" />
        <input type="button" class='confirm' value="No" />
      </div>
    </div>


  </div>
</div>

CSS

.wrapper {
  background: #9ac366;
  display: inline-block;
}

.headcard {
  display: inline-block;
  text-align: center;
  padding: 3% 30px;
  float: left;
}

.slidethis {
  background: #b67fd8;
  padding: 20px 0;
  width: 70%;
  vertical-align: top;
  position: relative;
  height: 228px;
  display: none;
  position: relative
}

.firstdiv,
.seconddiv {
  width: 200px;
  border: #888 solid 2px;
  padding: 20px;
}

.close_icon {
  background: #333;
  color: #fff;
  padding: 4px;
  float: right;
  margin-top: -20px;
  text-decoration: none
}

.popup {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #e4e4e4;
  text-align: center;
  padding-top: 5%;
  display: none
}

JavaScript

//slide open the main panel
$(".button").click(function(e) {
  e.preventDefault();
  $(this).hide();
  $(".slidethis").fadeIn(800).css("display", "inline-block");
  $(".wrapper").css("display", "block");
});

$(".seconddiv").hide();
//forstdiv click 
$(".firstdiv").click(function() {
  $(this).hide();
  $(".seconddiv").show();
});

//Close button 
$(".close_icon").click(function() {
  $(".popup").show();
});

    //Confirm buttons
    $("body").on("click", ".confirm", function() {
      $(".popup").hide();

      if ($(this).val() == 'No') {
        $('form input').val("");
      } else {
        $(".seconddiv,.slidethis").hide();
        $(".firstdiv,.button").show();
        $(".wrapper").css("display", "inline-block");
      }
    });