<div class='image-thumb'>
  <img alt='#' src='#'/>
</div>

 
<!-- Blok Kode Default -->
<div class='code-block'>
  <pre><code>kode di sini...</code></pre>
</div>
 
<!-- Blok Kode HTML -->
<div class='code-block html'>
  <pre><code>kode di sini...</code></pre>
</div>
 
<!-- Blok Kode CSS -->
<div class='code-block css'>
  <pre><code>kode di sini...</code></pre>
</div>
 
<!-- Blok Kode JavaScript -->
<div class='code-block js'>
  <pre><code>kode di sini...</code></pre>
</div>

 
<div class="data-table">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nama Depan</th>
        <th scope="col">Nama Belakang</th>
        <th scope="col">Akun</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
    </tbody>
  </table>
</div>

 
<div class="alertbox alertbox-primary">Pesan runtime...</div>
<div class="alertbox alertbox-secondary">Pesan runtime...</div>
<div class="alertbox alertbox-success">Pesan runtime...</div>
<div class="alertbox alertbox-danger">Pesan runtime...</div>
<div class="alertbox alertbox-warning">Pesan runtime...</div>
<div class="alertbox alertbox-info">Pesan runtime...</div>
<div class="alertbox alertbox-light">Pesan runtime...</div>
<div class="alertbox alertbox-dark">Pesan runtime...</div>

 
<p>Fungsi <mark>formatTimestamp_hstry</mark> digunakan untuk memformat waktu (timestamp) ke beberapa jenis format, seperti:</p>
<ul>
  <li><strong>12-jam:</strong> Format waktu 12 jam, contoh: <mark>15/08/2024 02:30 PM</mark>.</li>
  <li><strong>24-jam:</strong> Format waktu 24 jam, contoh: <mark>15/08/2024 14:30</mark>.</li>
  <li><strong>timeago:</strong> Format waktu relatif, contoh: <mark>5 menit yang lalu</mark>.</li>
</ul>

 
<a class="btn" href="#">default()</a>
<a class="btn preview" href="#">preview()</a>
<a class="btn download" href="#">download()</a>
<a class="btn link" href="#">link()</a>
<a class="btn cart" href="#">cart()</a>
<a class="btn share" href="#">share()</a>
<a class="btn info" href="#">info()</a>

 
<!-- player Audio -->
<div class='media-player'>
  <audio class='player-component' controls>
    <source src='url_audio.mp3' type='audio/mp3'>
  </audio>
</div>

 
<!-- player Video -->
<div class='media-player'>
  <video preload='metadata' class='player-component' controls playsinline>
    <source src='url_video.mp4' type='video/mp4'>
    <track kind='captions' label='English' src='caption_en.vtt' srclang='en' default />
  </video>
</div>

 
<!-- player Media custom -->
<div class='media-player'>
  <div class='player-component' data-player-id='video_ID'>
  <!-- Konten dimuat oleh player custom -->
  </div>
</div>