Image

HTML Text

<div class="bg-gray-100">
   <div class="max-w-xl mx-auto p-5 sm:p-10 sm:pb-5 text-center">
      <h1 class="text-bold text-2xl text-[#16a8ff] pb-4 tracking-tight">Stay up to date with the latest <br>from the blog</h1>
      <h3 class="text-md text-gray-600 tracking-tight mb-8">Give us your email. We'll do the rest.</h3>
      <div class="w-full mt-2 rounded-full mb-4">
         
Error: Contact form not found.
      </div>
   </div>
</div>

Contact 7

<div class="block">
    <div class="max-w-2xl block">
    [email* your-email class:w-full class:bg-gray-100 class:border-blue class:py-2 class:px-5 class:text-base class:text-grey-dark class:mb-4 placeholder "Email Address"] </div>
[submit class:btn-blue class:text-white class:text-base class:font-semibold class:tracking-wide class:py-2 class:px-8 class:w-full "SUBSCRIBE"]
<p class="text-sm text-gray-500">We'll only send you awesome content. Never spam.</p>
</div>

CSS Code

.fab-container .wpcf7-form input {
appearance: none;
   outline: none;
   border: none;
}

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

.fab-container .border-blue {
   border: 1px solid #16a8ff !important;
}

.fab-container.btn-blue {
    background-color: #16a8ff !important;
}

.fab-container .btn-blue:hover {
   background-color: #1192df !important;
}