JSFiddle - React, Tailwind, and code Playground
by Maiki Nahara
HTML
<div>
<h6 class='discount-text'>Lamento que te vayas...
Ingresa tu correo electrónico para recibir un <b>10% de descuento</b> en tu primer compra!</h6>
<div id="optin-SOEeMjQl" data-type="inline"></div>
<link rel="stylesheet" type="text/css" href="https://optin.myperfit.com/res/css/maite/SOEeMjQl.css">
<script type="text/javascript" src="https://optin.myperfit.com/res/js/maite/SOEeMjQl.js"></script>
<!-- Optin - Fin -->
<!-- Estilos Personalizados - Inicio -->
<style>
h6.discount-text {
text-align: center;
font-family: 'Raleway', sans-serif !important;
letter-spacing: 2px !important;
font-weight: 400;
line-height: 1.4;
font-size: 12px;
}
div.p-body {
/* Color de fondo del formulario */
background-color: #FFFFFF;
font-family: 'Raleway', sans-serif !important;
font-weight: 400 !important;
line-height: 1.4 !important;
border: none !important;
}
.p-optin div.p-header,
.p-optin .p-body button,
button.p-open {
/* Color de fondo de encabezado y botón */
background: #00AEE8;
/* Color de texto de encabezado y botón */
color: #FFFFFF;
}
.p-optin .p-body button:hover,
button.p-open:hover {
/* Color hover de botón */
background: #00AEE8;
opacity: 0.8;
}
.p-optin div.p-body p,
.p-optin div.p-field label span,
.p-optin .p-body .p-success {
/* Color de texto del formulario */
color: #696969;
}
.p-submit {
background: #FFF !important;
color: #000 !important;
border: 1px solid #6E6E6E !important;
letter-spacing: 0.8px !important;
font-size: 12px !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important;
border-radius: 5px 5px 5px 5px !important;
padding: 12px 23px 12px 23px !important;
min-height: 47px !important;
width: 100% !important;
transition: all 0.5s ease
}
...