JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha256-P93G0oq6PBPWTP1IR8Mz/0jHHUpaWL0aBJTKauisG7Q=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha256-PZLhE6wwMbg4AB3d35ZdBF9HD/dI/y4RazA3iRDurss=" crossorigin="anonymous" />


<div id="myModal" class="white-popup mfp-hide">
<p>osmnan</p>
</div>


   <a class="popup-with-form cta_button cta-nostyled" href="#myModal">Open form</a>

CSS

.white-popup {
  position: relative;
  background: #FFF;
  padding: 50px;
  width: auto;
  max-width: 70%;
  margin: 30px auto;
  background-color: #303030;
  text-align: left;
}
.white-popup h2 {
  text-align: left;
  color: #ffffff;
  font-size: 26px;
  margin-bottom: 20px;
}
div.white-popup a, div.white-popup p, div.white-popup span {
  color: #ffffff;
}
div.white-popup a {
  color: #dc622a;
}
div.white-popup .popup-accept a { 
  color: #ffffff;
  min-width: 100px;
}
div.white-popup .popup-accept a:first-child{
  margin-right: 16px;
}
div.white-popup input.hs-button.primary.large{
  background-image: none!important;
  background-color: #9b1120!important;
  border: solid 1.5px #9b1120!important;
  box-shadow: none!important;
}
@media (max-width: 767px){ 
  .white-popup {
    max-width: 90%;
  }
}

JavaScript

$(document).ready(function() {
	$('.popup-with-form').magnificPopup({
		type: 'inline',
		preloader: false,
		focus: '#name',

		// When elemened is focused, some mobile browsers in some cases zoom in
		// It looks not nice, so we disable it:
		callbacks: {
			beforeOpen: function() {
				if($(window).width() < 700) {
					this.st.focus = false;
				} else {
					this.st.focus = '#name';
				}
			}
		}
	});
});