Preview:
   <form onSubmit={newsletterHandler} className="w-100">
                <div className="d-flex flex-column flex-lg-row justify-content-between w-100">
                  <div className=" pe-lg-5 w-100">
                    <label className="font-xsm w-100">
                      Name <br />
                      <input
                        onChange={(e) =>
                          setFormData({ ...formData, name: e.target.value })
                        }
                        value={formData.name}
                        className="w-100"
                        type="text"
                        name="Name"
                      />
                    </label>
                  </div>
                  <div className="mt-3 mt-lg-0 w-100">
                    <label className="font-xsm w-100">
                      Email <br />
                      <input
                        onChange={(e) =>
                          setFormData({ ...formData, email: e.target.value })
                        }
                        value={formData.email}
                        className="w-100"
                        type="email"
                        name="Email"
                      />
                    </label>
                  </div>
                </div>
                <div className="d-flex flex-column flex-lg-row justify-content-between mt-3 mt-lg-4 pt-lg-2">
                  <div className="pe-lg-5 w-100">
                    <label className="font-xsm w-100">
                      Mobile <br />
                      <input
                        onChange={(e) =>
                          setFormData({ ...formData, mobile: e.target.value })
                        }
                        value={formData.mobile}
                        className="w-100"
                        type="Number"
                        name="Mobile"
                      />
                    </label>
                  </div>
                  <div className="mt-3 mt-lg-0 w-100">
                    <label className="font-xsm w-100">
                      Your Subject <br />
                      <input
                        onChange={(e) =>
                          setFormData({ ...formData, subject: e.target.value })
                        }
                        value={formData.subject}
                        className="w-100"
                        type="text"
                        name="Your Subject"
                      />
                    </label>
                  </div>
                </div>
                <label className="font-xsm w-100 color-blue mt-4 pt-lg-2">
                  Message
                  <textarea
                    onChange={(e) =>
                      setFormData({ ...formData, message: e.target.value })
                    }
                    value={formData.message}
                    className="w-100  mt-2 mb-2 "
                    rows={5}
                    type="text"
                    name="Message"
                    placeholder="Type your message here "
                  ></textarea>
                </label>

                <button
                  type="submit"
                  className="font-normal fw-bold mt-4 color-white mb-2 mb-lg-0"
                >
                  Send Message
                </button>
              </form>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter