JSFiddle - React, Tailwind, and code Playground

by kizer

HTML

<div id="conjured_advocate_signup" class="conjured_flexbox background_image">
  <div class="conjured_content rounded shadow-3">
    <h3 class="template_advocate_signup_heading">Give $10 to a friend.<br>Get $10 for yourself.</h3>
    <p>It’s fast and easy. <br>Get your personallized code below.</p>
    <p id="conjured_save_advocate_error" class="conjured_error"
      data-invalid-input="Please enter your name and a valid email address."
      data-unknown-error="An error has occured. Please contact the administrator of this site for more information."
    >
    </p>
    <input id="conjured_referral_name" name="name" type="text" value="" placeholder="Your Name" autocomplete="name" />
    <input id="conjured_referral_email" name="email" type="text" value="" placeholder="Your Email" autocomplete="email" />
    <div class="template_advocate_signup_show_newsletter">
      <input id="conjured_accepts_marketing" checked="checked" name="accepts_marketing" type="checkbox" value="1" />
      <label for="conjured_accepts_marketing">Subscribe to our newsletter</label>
    </div>
    <button id="conjured_save_advocate" style="margin-top:25px" class="btn button template_advocate_signup_button">I'm in. Let's do it.</button>
  </div>
</div>