JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<script src="https://cdn.shopify.com/s/files/1/0283/0798/0341/t/8/assets/stick-to-me.js"></script>


<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<form action="https://facebook.us14.list-manage.com/subscribe/post?u=db40c343b16b0af0b777d7db4&id=2631affdd7" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
    <div id="mc_embed_signup_scroll">
	<h2>Werde Teil der bonmedico Community &amp; erhalte 15 % auf Deinen ersten Einkauf!</h2>

<div class="mc-field-group">
	<input type="text" value="" name="FNAME" class="required" placeholder="Vorname" id="mce-FNAME">
</div>

<div class="mc-field-group">
	<input type="text" value="" name="LNAME" class="required" placeholder="Nachname" id="mce-LNAME">
</div>

<div class="mc-field-group">
	<input type="email" value="" name="EMAIL" class="required email" placeholder="Email-Adresse" id="mce-EMAIL">
</div>

<div class="mc-field-group input-group">
    <strong> </strong>
    <ul>
<li>
<label for="mce-group[7316]-7316-0"><input type="checkbox" value="1" name="group[7316][1]" id="mce-group[7316]-7316-0" class="required"> Ich stimme zu, Benachrichtigungen von bonmedico zu erhalten. Ich habe die <a href="https://bonmedico.com/pages/datenschutz" target="_blank">Datenschutzerklärung</a> gelesen</label>
</li>
</ul>
</div>

	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_db40c343b16b0af0b777d7db4_2631affdd7" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit"...

CSS

.stick_block_layer {
	background-color: #6BAAD9;
	opacity: 0.3;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

.stick_popup {
	/*height: 200px;*/
	width: 30%;
    top: 25%;
    right: 35%;
    position: fixed;
    z-index: 9999;
  	border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(50,50,50,0.5);
	-moz-box-shadow: 0px 0px 15px rgba(50,50,50,0.5);
	-webkit-box-shadow: 0px 0px 15px rgba(50,50,50,0.5);
	background: #f2f2f2;
	-webkit-animation: zoomin 0.7s;
	animation: zoomin 0.7s;
}


@media screen and (max-width: 640px) {
  .stick_popup {
       right: 0 !important;
        width: 100% !important;
  }
}

.stick_content {
	padding: 20px;
}

.stick_close {
	cursor: pointer;
	position: relative;
	top: 0px;
	left: 0px;
	float: right;
	font-family: Arial;
	font-size: 17px;
	background-color: #d1d1d1;
	color: #4c4c4c;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
}

/* 
CSS3 animation keyframes.
*/
@-webkit-keyframes zoomin {

	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}

	50% {
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);
		transform: scale(1.04);
		opacity: 1;
	}
  
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}
@-ms-keyframes zoomin {

	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}

	50% {
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);
		transform: scale(1.04);
		opacity: 1;
	}
  
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	
}
@keyframes zoomin {

	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 0;
	}

	50% {
		-webkit-transform: scale(1.04);
		-ms-transform: scale(1.04);
		transform:...

JavaScript

$.noConflict();
 $.stickToMe({
  layer: '#stickLayer',
  fadespeed: 400,
  trigger: ['top'],
  maxtime : 0,
  mintime : 0,
  delay: 0,
  interval: 0,
  maxamount : 1,
	cookie : false,
  bgclickclose : true,
  escclose : true,
  onleave : function (e) {},
  disableleftscroll : true  // chrome disable   
});