Search

<form
  role="search"
  method="GET"
  action=""
  class="form-field | px-5 py-8 md:p-8 lg:p-10 rounded-bl-xl bg-blue-300 shadow-search"
>
  <div class="input--text">
    <div class="input-field">
      <input id="search" name="s" type="search" value="" placeholder="Vul hier uw onderwerp in…" />
      <button type="submit" class="button--primary </div> | px-2">
        <svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <!-- SVG content -->
        </svg>
        <span class="sr-only">Zoeken</span>
      </button>
    </div>
  </div>
</form>

<form
  role="search"
  method="GET"
  action=""
  class="form-field | px-5 py-8 md:p-8 lg:p-10 rounded-bl-xl bg-blue-300 shadow-search"
>
  <label for="search" class="input__label | text-lg mb-3">This is a title</label>
  <div class="input--text">
    <div class="input-field">
      <input id="search" name="s" type="search" value="" placeholder="Vul hier uw onderwerp in…" />
      <button type="submit" class="button--primary </div> | px-2">
        <svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
          <!-- SVG content -->
        </svg>
        <span class="sr-only">Zoeken</span>
      </button>
    </div>
  </div>
</form>