carbon-components/src/components/time-picker/time-picker.html

Carbon Components is a component library for IBM Cloud

<div class="bx--form-item">
  <label for="time-picker-1" class="bx--label">Select a time</label>
  <div class="bx--time-picker">
    <div class="bx--time-picker__input">
      <input id="time-picker-1" type="text" class="bx--time-picker__input-field" pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)"
        placeholder="hh:mm" maxlength="5" />
      <div class="bx--form-requirement">
        Invalid time.
      </div>
    </div>
    <div class="bx--time-picker__select bx--select bx--select--inline">
      <label for="select-id-1" class="bx--label bx--visually-hidden">Select AM/PM</label>
      <select id="select-id-1" class="bx--select-input">
        <option class="bx--select-option" value="AM">AM</option>
        <option class="bx--select-option" value="PM">PM</option>
      </select>
      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
        <path d="M10 0L5 5 0 0z"></path>
      </svg>
    </div>
    <div class="bx--time-picker__select bx--select bx--select--inline">
      <label for="select-id-2" class="bx--label bx--visually-hidden">Select timezone</label>
      <select id="select-id-2" class="bx--select-input">
        <option class="bx--select-option" value="option-1">Timezone 1</option>
        <option class="bx--select-option" value="option-2">Timezone 2</option>
        <option class="bx--select-option" value="option-3">Timezone 3</option>
      </select>
      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
        <path d="M10 0L5 5 0 0z"></path>
      </svg>
    </div>
  </div>
</div>