JSFiddle - React, Tailwind, and code Playground

by Holton

HTML

<div id="feedbackP">
	<div id="feedbackButton">
		Отправьте нам сообщение
	</div>
	<script id="bx24_form_inline" data-skip-moving="true">
(function(w,d,u,b){w['Bitrix24FormObject']=b;w[b] = w[b] || function(){arguments[0].ref=u;
(w[b].forms=w[b].forms||[]).push(arguments[0])};
if(w[b]['forms']) return;
var s=d.createElement('script');s.async=1;s.src=u+'?'+(1*new Date());
var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
})(window,document,'https://asg.bitrix24.kz/bitrix/js/crm/form_loader.js','b24form');

b24form({"id":"5","lang":"ru","sec":"tphm5m","type":"inline"});
</script>
</div>

CSS

#feedbackP{
	width : 400px;
	height : 600px;
	position : fixed; /* фиксируем позицию в окне */
	z-index : 50;
	/* сдвигаем панель вправо вниз: */
	top : 100%; 
	left : 100%;
	/* выдвигаем краешек: */	
	margin-top : -25px;
	margin-left : -130px;
	border : 2px solid;
	border-radius: 10px;
	padding: 5px;
	
	/*задаем эффект движения: */
	-moz-transition:margin 0.3s linear;	
	-o-transition:margin 0.3s linear;	
	-webkit-transition:margin 0.3s linear;	
	-ms-transition:margin 0.3s linear;	
	transition:margin 0.3s linear;	
}
#feedbackP:hover{	 
	/* выдвигаем панель на всеобщее обозрение: */	
	margin-top : -572px;
	margin-left : -400px;
	/*задаем эффект движения: */	
	-moz-transition:margin 0.3s linear;	
	-o-transition:margin 0.3s linear;	
	-webkit-transition:margin 0.3s linear;	
	-ms-transition:margin 0.3s linear;	
	transition:margin 0.3s linear;	
}

/*Делаем заголовок панели, как уголок папки с бумагами: */
#feedbackButton{
	font-weight : bold;
	margin-left : 10px;
	margin-top : -6px;
	border : 1px solid #717277;
	border-radius : 0px 0px 10px 10px;
	text-align : center;
	width : 350px;
	margin-bottom : 5px;
	color : #FFFFFF;
	background : #717277;
}

#feedBackIframe{
	width : 390px;
	height : 540px;
	border : 1px solid;
}