JSFiddle - React, Tailwind, and code Playground

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" value="Yes" /> <input type="button" 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();
	});