<div class="dialog drawer-start"
     id="dialog-example"
     aria-hidden="true"
     aria-labelledby="drawer-end-title"
     aria-describedby="drawer-end-description">
  <div class="dialog-overlay"
       data-a11y-dialog-hide></div>
  <div class="dialog-content drawer-content drawer-slide-start"
       role="document">
    <div class="mbs16 mbe24 mis16 mie16">
      <button data-a11y-dialog-hide
              class="close-button close-button-large dialog-close"
              aria-label="Close this dialog window">
        <svg class="close"
             viewBox="0 0 24 24"
             aria-hidden="true">
          <path fill="currentColor"
                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
        </svg>
      </button>

      <h1 id="drawer-end-title">Subscribe to our newsletter</h1>
      <p id="drawer-end-description">
        Fill in the form below to receive our newsletter!
      </p>
      <form class="dialog-form-demo">
        <label class="label"
               for="email">Email (required)</label>
        <input class="input input-rounded"
               type="email"
               name="EMAIL"
               id="email"
               placeholder="john.doe@gmail.com"
               required />
        <button class="btn btn-primary btn-rounded btn-block"
                type="submit"
                name="button">Sign up</button>
      </form>
    </div>
  </div>
</div>

<button type="button"
        class="btn btn-primary btn-bordered"
        data-a11y-dialog-show="dialog-example">
  Open drawer
</button>

