Form

<form style="display: flex; flex-direction: column; gap: 24px;">
  <h3>Create account</h3>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="exampleInputEmail" placeholder="default" required>
      <label for="exampleInputEmail" class="nj-form-item__label">Email</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--password">
    <div class="nj-form-item__field-wrapper">
      <input type="password" class="nj-form-item__field" id="examplePassword1" placeholder=" " required>
      <label for="examplePassword1" class="nj-form-item__label">Password</label>
      <button type="button" aria-pressed="false" class="nj-form-item__password-button nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary">
        <span class="nj-sr-only" data-password-button-label-show="Show password" data-password-button-label-hide="Hide password"></span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">visibility</span>
      </button>
      <p class="nj-sr-only nj-form-item__password-notice" aria-live="polite" aria-atomic="true" data-password-notice-is-visible="Password is visible" data-password-notice-is-hidden="Password is hidden"></p>
    </div>
    <div class="nj-form-item__subscript">Must be at least 14 characters long</div>
  </div>
  <div class="nj-checkbox">
    <label>
      <input type="checkbox"> I acknowledge ...
    </label>
  </div>
  <button class="nj-btn nj-btn--block" type="submit">Create account</button>
</form>

<form style="display: flex; flex-direction: column; gap: 24px;">
  <h3>Contact form</h3>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="contactFormInputEmail" placeholder="default" required>
      <label for="contactFormInputEmail" class="nj-form-item__label">Email</label>
    </div>
  </div>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="contactFormInputFirstName" placeholder="default">
      <label for="contactFormInputFirstName" class="nj-form-item__label">Firstname</label>
    </div>
  </div>
  <div class="nj-form-item">
    <div class="nj-form-item__field-wrapper">
      <input type="text" class="nj-form-item__field" id="contactFormInputLastName" placeholder="default">
      <label for="contactFormInputLastName" class="nj-form-item__label">Lastname</label>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--select nj-form-item--custom-list">
    <div class="nj-form-item__field-wrapper">
      <p hidden id="custom-select-instructions-1">Utiliser les flèches HAUT / BAS pour naviguer au sein de la liste de suggestion. Appuyer sur Entrée pour sélectionner une option. Sur des terminaux tactiles, utiliser le balayage pour naviguer et double tap pour sélectionner une option</p>
      <input class="nj-form-item__field" id="exampleSelectCustom" placeholder=" " readonly aria-hidden="true" tabindex="-1" />
      <label for="exampleSelectCustom" class="nj-form-item__label" aria-hidden="true">How did you hear about us?</label>
      <span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>

      <button
        class="nj-form-item__custom-list-button"
        type="button"
        aria-label="Example - Select a value"
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-describedby="custom-select-instructions-1"
        role="combobox"
      ></button>

      <ul
        role="listbox"
        hidden
        aria-label="Example"
        class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm"
        tabindex="-1"
      >
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item" value="test">Option 1</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Option 2</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Option 3</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Option 4</li>
        <li role="option" tabindex="-1" aria-selected="false" class="nj-list-group__item">Option 5</li>
      </ul>
    </div>
  </div>
  <div class="nj-form-item nj-form-item--textarea">
    <div class="nj-form-item__field-wrapper">
      <textarea class="nj-form-item__field" id="contactFormTextAreaFloat" placeholder="Comment"></textarea>
      <label for="contactFormTextAreaFloat" class="nj-form-item__label">Comment</label>
    </div>
  </div>
  <div class="d-flex">
    <button class="nj-btn" type="submit">Reach out</button>
  </div>
</form>