JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<section>
  <div class="container-fluid text-center">
    <div class="newsletter p-5">
      <form>
        <h2>Sign up to our newsletter</h2>
        <p>Recieve the lastest news and offers by signing up today.</p>
        <div class="form-group text-center">
          <label for="input-name" class="sr-only">Your Name:</label>
          <input type="text" class="form-control text-center" placeholder="firstname lastname" id="input-name">
        </div>
        <div class="form-group text-center">
          <label for="input-email" class="sr-only">Your Email:</label>
          <input type="email" class="form-control text-center" placeholder="[email protected]" id="input-email">
        </div>
        <div class="form-check">
          <label class="form-check-label">
              <input type="checkbox" class="form-check-input" id="input-terms" value="terms">
              I have read and accept the <a href="#" data-toggle="modal" data-target="#modal"> terms and conditions.</a> 
            </label>
        </div>
        <div>
          <small class="form-text">You can unsubscribe from the mailing list at anytime</small>
          <button type="submit" class="m-1 btn btn-dark">SIGN UP</button>
        </div>
      </form>
      <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et...

CSS

form {
    width: 50%;
    margin: 0 auto;
    text-align:center;
}