@vcl/vcl/date-picker/demo/example-time-seconds-minutes.html

The whole VCL in one package

<div class="date-picker" role="listbox" aria-multiselectable="false" style="width: 18em;">
  <div class="data-grid d-g-v-align-middle d-g-align-centered calendar cal-input">
    <div class="d-g-row">
      <div class="d-g-cell">
        <div class="toolbar flex row justify-between center" role="menubar" aria-level="1">
          <div class="button-dim"></div>
          <div class="cal-header-label">Second</div>
          <div class="button-dim"></div>
        </div>
      </div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">:0</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:1</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:2</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:3</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:4</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:5</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:6</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:7</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:8</div>
      <div class="d-g-cell cal-item selected" aria-selected="true" role="option" tabindex="0">:9</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">:10</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:11</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:12</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:13</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:14</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:15</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:16</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:17</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:18</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:19</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">:20</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:21</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:22</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:23</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:24</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:25</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:26</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:27</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:28</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:29</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">:30</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:31</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:32</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:33</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:34</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:35</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:36</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:37</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:38</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:39</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">:40</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:41</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:42</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:43</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:44</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:45</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:46</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:47</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:48</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:49</div>
    </div>
    <div class="d-g-row" role="row">
      <div class="d-g-cell cal-item" role="option" tabindex="0">:50</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:51</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:52</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:53</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:54</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:55</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:56</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:57</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:58</div>
      <div class="d-g-cell cal-item" role="option" tabindex="0">:59</div>
    </div>
  </div>
</div>