JSFiddle - React, Tailwind, and code Playground

HTML

<div><div><span id="feedback_lnk" class="feedback-btn">Feedback <i class="fa fa-caret-up" id="up-down-arrow"></i></span></div>
	<div  id="user_feedback" style="">
		
		<div class="alert alert-success alert-dismissible alert-fed" style="display:none;">
			<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close" >×</a>
			 <?php if(lang('user-feedback')!=''){
						echo lang('user-feedback'); 
					}
			 ?>
		</div>
<!--		<button type="button" class="close cls-feedback"  aria-label="Close" >×</button>-->
<!--		 <h3 id="feed_head">Feedback </h3>-->

		<form id="feedback_frm" >
			 <label for="title" class="required control-label " required="true">Title</label>
		  <div>
			  <select class="form-control" id="title" name="title">
				  <option value="">Select</option>
				  <?php
					foreach($this->user->titles as $k=>$val){
						echo "<option value='".$k."'>".$val."</option>";
					}
				  ?>
				  
			  </select>
		  </div>
		  <label for="fname" class="required control-label " required="true">Full name</label>
		  <div>
		  <input type="text" class="form-control" id="fname" name="fname" placeholder="Your name..">
		  </div>
		  <label for="subject" class="required control-label " required="true">Subject</label>
		  <div>
		   <select class="form-control" id="subject" name="subject">
				  <option value="">Select</option>
				  <?php
					foreach($this->user->feedback_Subjects as $k=>$val){
						echo "<option value='".$val."'>".$val."</option>";
					}
				  ?>
				  <option value="custom" id="custom_subj">Custom</option>
			  </select>
		  </div>
		  <div style="display:none">
			  <input type="text" name="custm_subject" id="custm_subject" placeholder="Your subject..">
		  </div>

		  <label for="femail" class="required control-label " required="true">Email</label>
		  <div>
		  <input type="text" class="form-control" id="femail" name="femail" placeholder="Your email.."></div>
		  <label for="comments" class="required control-label "...

CSS

#user_feedback {
    color:black;
    background-color:#eee;
    text-align:justify;
    font-size: 0.917em;
    background-color: #f2f2f2;
    padding: 20px;
	width:27%;
	position: absolute;
	bottom:0;
	right:0px;
/*	display:none;*/
}

#user_feedback h3{
	color:black;
	padding-left:0px;
}
#feedback_frm input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}
#feedback_frm input[type=submit]:hover {
    background-color: #45a049;
}

JavaScript

$(document).ready(function ()
	{
  $(".cls-feedback,#feed_head").click(function(e){
			$("#feedback_lnk").click();
			//$("#user_feedback").css("opacity","0");
			$("#feedback_lnk").css("display","");
		});
		if( $("#user_feedback").css('display') == 'none') {
			
			 $("#feedback_lnk").css({"bottom":"0px","position":"fixed"});
		     $("#up-down-arrow").attr("class","fa fa-caret-up");
		}
		$("#feedback_lnk").click(function () {
	
			
			 if($("#feedback_lnk").css("bottom")=="540px"){
				 
				 $("#feedback_lnk").css({"bottom":"0px","position":"fixed"});
				 $("#up-down-arrow").attr("class","fa fa-caret-up");
				 
			 }else{
				// $("#user_feedback").animate({"bottom": "0px"});
				 $("#feedback_lnk").css({"bottom":"540px","position":"absolute"});
				 $("#up-down-arrow").attr("class","fa fa-caret-down");
				 //$("#user_feedback" ).css({"position":"absolute","display":"block"});
			 } $("#user_feedback" ).slideToggle();
			// $("#feedback_lnk").slideToggle( "slow" );
			if( $("#user_feedback").css('display') != 'none') {
			//	$("#feedback_lnk").css("display","none");
			}
			
		});
    });