Image

Html Text

<div class="max-w-full mx-auto">
    <div class="lg:flex-shrink-0 p-5 sm:p-12 text-center order-first lg:order-last">
       <h1 class="text-bold text-2xl text-pink-400 py-4">BEFORE YOU GO...</h1>
       <h3 class="text-5xl text-bold mb-5">Hey, wait!</h3>
       <p class="text-grey-500 text-md">Enter you email and get sale coupon code</p>
       <div class="w-full mt-2 rounded-full mb-4">
           
Error: Contact form not found.
       </div>
    </div>
</div>

Contact Form 7

<div class="max-w-sm mx-auto p-1 pr-0 block">
    <div class="md:w-1/2 pr-2 mr-2 mb-6">
    [email* your-email class:w-full class:bg-grey-300 class:border class:py-2 class:px-5 class:text-base class:text-grey-dark placeholder "Your Email"] </div>
[submit class:bg-pink-300 class:text-white class:text-base class:font-semibold class:tracking-wide class:py-2 class:px-10 class:rounded class:w-full "Get My Coupon"]
</div>

CSS Code

.fab-container .wpcf7-form input {
  appearance: none;
  outline: none;
  border: 1px solid #dee2e6;
}

.fab-container .wpcf7-form .wpcf7-submit {
   color:white;
   font-weight: 600;
   width: 100%;
}

.jconfirm-fab-modal-497 .featured-img-container {
    max-width: 280px;
}
.jconfirm-fab-modal-497 .featured-img-container img {
    height: 100% !important;
}

@media (max-width: 639px) {
  .jconfirm-fab-modal-497 .featured-img-container {
    max-width: 100%;
    width: 100%;
  }
    
  .jconfirm-fab-modal-497 .featured-img-container img {
   max-height: 280px;
   width: 100%; 
  }
}