SYSTEM LOG: INITIALIZING...|
HOME / UI /

UI Component and Typography

Maret 08, 2026 | ERRSTEIN CALCULATING...
UI Component and Typography
Gambar Contoh
Caption Kiri Bawah

Semua Komponen dan Tipografi format penulisan pada situs ini dibuat sepenuhnya oleh Errstein.

Paragraf Tipografi

1. Paragraf Text Indent

Ini adalah paragraf dengan lekukan di awal baris. Sangat cocok digunakan pada artikel berformat esai atau sastra untuk menandakan pergantian gagasan.

<p class="p-indent">Ini adalah paragraf dengan lekukan di awal baris. Sangat cocok digunakan pada artikel berformat esai atau sastra untuk menandakan pergantian gagasan.</p>

Paragraph Drop Cap (Huruf Besar di Awal)

Desain minimalis monokrom tidak hanya sekadar membuang warna, melainkan menajamkan fokus pada konten. Huruf pertama paragraf ini diperbesar untuk menarik mata pembaca.

Format penulisan: 
<p class="p-dropcap">Desain minimalis monokrom tidak hanya sekadar membuang warna, melainkan menajamkan fokus pada konten. Huruf pertama paragraf ini diperbesar untuk menarik mata pembaca.</p>

Media Gambar

1. Image With Caption

Lihat gambar utama dan caption dibawahnya.

Format Penulisan: 
<figure class="ui-figure">
  <img src="URL_GAMBAR_ANDA" alt="Deskripsi Gambar" loading="lazy" />
  <figcaption class="ui-figcaption">Ini adalah teks deskripsi gambar</figcaption>
</figure>

2. Images Grid Layout (Banyak gambar tersusun rapi)

Gambar 1 Gambar 2 Gambar 3 Gambar 3 Gambar 3
Format Penulisan: 
<div class="img-grid">
  <img src="URL_GAMBAR_1" alt="Gambar 1" loading="lazy" />
  <img src="URL_GAMBAR_2" alt="Gambar 2" loading="lazy" />
  <img src="URL_GAMBAR_3" alt="Gambar 3" loading="lazy" />
</div>

3. Images Scroll Layout (Bisa digeser ke samping)

Gambar 1 Gambar 2 Gambar 3 Gambar 3 Gambar 3 Gambar 3
Format Penulisan: 
<div class="img-scroll">
  <img src="URL_GAMBAR_1" alt="Gambar 1" loading="lazy" />
  <img src="URL_GAMBAR_2" alt="Gambar 2" loading="lazy" />
  <img src="URL_GAMBAR_3" alt="Gambar 3" loading="lazy" />
</div>

4. Images Show All Function (Disembunyikan, klik untuk melihat semua)

View Gallery (5 Images)
Format Penulisan: 
<details class="ui-details">
  <summary>View Gallery (5 Images)</summary>
  <div class="ui-details-content img-grid">
    <img src="URL_GAMBAR_1" loading="lazy" />
    <img src="URL_GAMBAR_2" loading="lazy" />
  </div>
</details>

Tautan dan Tombol

1. Tautan External

Silakan baca referensi lengkapnya di Website Eksternal Ini . Format Penulisan: 
Silakan baca referensi lengkapnya di <a href="https://example.com" class="ext-link" target="_blank" rel="noopener noreferrer">Website Eksternal Ini <svg viewBox="0 0 24 24"><path d="M7 17L17 7M17 7H7M17 7V17"/></svg></a>.

2. Basic Tombol dan Tombol Transparan

Baca Selengkapnya → Pelajari Lebih Lanjut
Format Penulisan: 
<a href="#" class="ui-btn">Baca Selengkapnya &#8594;</a>
<a href="#" class="ui-btn ui-btn-outline">Pelajari Lebih Lanjut</a>.

3. Download Link

Download File (2MB)
Format Penulisan: 
<a href="URL_FILE" class="ui-btn" download>
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> 
  Download File (2MB)
</a>

Blok Peringatan dan Tabel

1. Big Blockquote

"Kesederhanaan adalah bentuk tertinggi dari kecanggihan. Ketika Anda menghilangkan yang tidak perlu, yang tersisa hanyalah esensi."
Format penulisan: 
<blockquote class="ui-blockquote">
  "Kesederhanaan adalah bentuk tertinggi dari kecanggihan. Ketika Anda menghilangkan yang tidak perlu, yang tersisa hanyalah esensi."
</blockquote>

2. Note Block

Pastikan Anda telah mencadangkan (backup) template lama Anda sebelum memasang kode XML yang baru untuk menghindari kehilangan widget.
Format Penulisan: 
<div class="ui-note">
  Pastikan Anda telah mencadangkan (backup) template lama Anda sebelum memasang kode XML yang baru untuk menghindari kehilangan widget.
</div>

3. Alert Block

Tindakan ini tidak dapat dibatalkan. Menghapus database akan secara permanen menghancurkan semua data pelanggan Anda.
Format Penulisan: 
<div class="ui-alert">
  Tindakan ini tidak dapat dibatalkan. Menghapus database akan secara permanen menghancurkan semua data pelanggan Anda.
</div>

4. Table (Tabel Data Responsif)

Fitur Status Skor Performa
Lazy Load Image Aktif 100/100
Dynamic JSON-LD Terintegrasi Valid
Format penulisa: 
<div style="overflow-x: auto;">
  <table class="ui-table">
    <thead>
      <tr>
        <th>Fitur</th>
        <th>Status</th>
        <th>Skor Performa</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lazy Load Image</td>
        <td>Aktif</td>
        <td>100/100</td>
      </tr>
      <tr>
        <td>Dynamic JSON-LD</td>
        <td>Terintegrasi</td>
        <td>Valid</td>
      </tr>
    </tbody>
  </table>
</div>

5. Steps (Langkah-langkah)

  1. Buka Dashboard Blogger Anda

    Navigasi ke menu Tema lalu klik Edit HTML.

  2. Tempelkan Kode Baru

    Hapus semua kode lama dan paste kode yang baru disalin.

Format penulisan: 
<ol class="ui-steps">
  <li>Buka Dashboard Blogger Anda
    <p>Navigasi ke menu Tema lalu klik Edit HTML.</p>
  </li>
  <li>Tempelkan Kode Baru
    <p>Hapus semua kode lama dan paste kode yang baru disalin.</p>
  </li>
</ol>

Sintak Highligher & Hide Content

1. Basic Block

<!-- Contoh kode HTML -->
<div class="container">
   <h1>Hello World</h1>
</div>
Format penulisan: 
<pre class="ui-code"><code>&lt;!-- Contoh kode HTML --&gt;
&lt;div class="container"&gt;
   &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/div&gt;</code></pre>

2. Multi-tabs Code Block

<div id="app"></div>
#app { color: black; }
console.log("Ready");
Format penulisan: 
<div class="ui-tabs">
  <input type="radio" id="tab1" name="mytabs" checked="checked">
  <input type="radio" id="tab2" name="mytabs">
  <input type="radio" id="tab3" name="mytabs">
  
  <div class="tab-labels">
    <label for="tab1">HTML</label>
    <label for="tab2">CSS</label>
    <label for="tab3">JS</label>
  </div>
  
  <div class="tab-content tab-content-1">
    <pre class="ui-code" style="margin:0; border:none;"><code>&lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  <div class="tab-content tab-content-2">
    <pre class="ui-code" style="margin:0; border:none;"><code>#app { color: black; }</code></pre>
  </div>
  <div class="tab-content tab-content-3">
    <pre class="ui-code" style="margin:0; border:none;"><code>console.log("Ready");</code></pre>
  </div>
</div>

3. Spoiler / Accordion / FAQs in Microdata

Apakah template ini mendukung SEO secara native?

Ya, template ini dirancang dengan struktur tag H1-H6 yang ketat, meta tag otomatis, dan schema.org JSON-LD bawaan.

Bagaimana cara mengganti logo?

Anda bisa mengubah nama situs langsung melalui setelan dasar Blogger.

Format penulisan: 
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="ui-details">
  <details>
    <summary itemprop="name">Apakah template ini mendukung SEO secara native?</summary>
    <div class="ui-details-content" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <p itemprop="text">Ya, template ini dirancang dengan struktur tag H1-H6 yang ketat, meta tag otomatis, dan schema.org JSON-LD bawaan.</p>
    </div>
  </details>
</div>

<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" class="ui-details">
  <details>
    <summary itemprop="name">Bagaimana cara mengganti logo?</summary>
    <div class="ui-details-content" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <p itemprop="text">Anda bisa mengubah nama situs langsung melalui setelan dasar Blogger.</p>
    </div>
  </details>
</div>

4. Terminal Windows

npm install next react react-dom

added 13 packages, and audited 14 packages in 2s
found 0 vulnerabilities

npm run dev

ready - started server on http://localhost:3000

Format penulisan: 
<div class="ui-terminal">
  <div class="ui-terminal-header">
    <div class="ui-terminal-dot"></div>
    <div class="ui-terminal-dot"></div>
    <div class="ui-terminal-dot"></div>
  </div>
  <p class="cmd">npm install next react react-dom</p>
  <p class="output">added 13 packages, and audited 14 packages in 2s<br>found 0 vulnerabilities</p>
  <p class="cmd">npm run dev</p>
  <p class="output">ready - started server on http://localhost:3000</p>
</div>

Navigasi Content

1. Manual Table of Contents

DAFTAR ISI
Format penulisan: 
<div class="toc-container">
  <details open>
    <summary>DAFTAR ISI</summary>
    <ul class="toc-list">
      <li><a href="#bab1">1. Pendahuluan</a></li>
      <li><a href="#bab2">2. Analisis Masalah</a>
        <ul>
          <li class="toc-h3"><a href="#subbab2">2.1 Akar Penyebab</a></li>
        </ul>
      </li>
      <li><a href="#bab3">3. Kesimpulan</a></li>
    </ul>
  </details>
</div>

2. Manual Related Posts

BACA JUGA:
Format penulisan 
<div class="ui-manual-related">
  <div class="ui-manual-related-title">BACA JUGA:</div>
  <ul>
    <li><a href="URL_ARTIKEL_1">Masa Depan AI dalam Desain Produk</a></li>
    <li><a href="URL_ARTIKEL_2">Memahami Hierarki Visual dalam Tipografi</a></li>
  </ul>
</div>

3. Fast YouTube Embed

Format penulisan: 
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_VIDEO_ANDA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
</div>

Conten Supports

1. Key Takeaways

KEY TAKEAWAYS
  • Desain monokrom memaksa kreator untuk berfokus pada hierarki tipografi.
  • Penggunaan ruang negatif (whitespace) adalah elemen desain yang paling krusial.
  • Kecepatan loading website adalah faktor SEO terpenting di tahun ini.
Format penulisan: 
<div class="ui-takeaways">
  <div class="ui-takeaways-title">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg> 
    KEY TAKEAWAYS
  </div>
  <ul>
    <li>Desain monokrom memaksa kreator untuk berfokus pada hierarki tipografi.</li>
    <li>Penggunaan ruang negatif (whitespace) adalah elemen desain yang paling krusial.</li>
    <li>Kecepatan loading website adalah faktor SEO terpenting di tahun ini.</li>
  </ul>
</div>

2. Pros and Cons

KELEBIHAN
  • Skor PageSpeed mencapai 100/100
  • Desain tidak lekang oleh waktu (Timeless)
  • Fokus penuh pada konten artikel
KEKURANGAN
  • Kurang cocok untuk web portofolio ilustrasi
  • Membutuhkan pemahaman tipografi yang kuat
  • Gambar harus berkualitas tinggi
Format penulisan: 
<div class="ui-pros-cons">
  <div class="ui-pros">
    <div class="ui-pros-title">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
      KELEBIHAN
    </div>
    <ul>
      <li>Skor PageSpeed mencapai 100/100</li>
      <li>Desain tidak lekang oleh waktu (Timeless)</li>
      <li>Fokus penuh pada konten artikel</li>
    </ul>
  </div>
  <div class="ui-cons">
    <div class="ui-cons-title">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
      KEKURANGAN
    </div>
    <ul>
      <li>Kurang cocok untuk web portofolio ilustrasi</li>
      <li>Membutuhkan pemahaman tipografi yang kuat</li>
      <li>Gambar harus berkualitas tinggi</li>
    </ul>
  </div>
</div>

3. Custom SVG Checklist

  • Konfigurasi DNS domain Anda ke server Google.
  • Hapus seluruh kode widget bawaan template lama.
  • Verifikasi kepemilikan di Google Search Console.
Format penulisan: 
<ul class="ui-checklist">
  <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg> Konfigurasi DNS domain Anda ke server Google.</li>
  <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg> Hapus seluruh kode widget bawaan template lama.</li>
  <li><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg> Verifikasi kepemilikan di Google Search Console.</li>
</ul>

Chartsheet

1. Big Statistic

84%
Peningkatan konversi setelah redesain UI
Format penulisan: 
<div class="ui-stat">
  <div class="ui-stat-number">84%</div>
  <div class="ui-stat-label">Peningkatan konversi setelah redesain UI</div>
</div>

2. Timeline

Q1 2024
Rilis Versi Alpha: Peluncuran sistem inti ke pengguna terbatas untuk uji coba tertutup.
Q3 2024
Skalabilitas Server: Migrasi database ke infrastruktur global untuk menangani trafik 1 juta pengunjung harian.
Q1 2025
Rilis Publik: Pembukaan akses global untuk semua kreator di seluruh dunia.
Format penulisan: 
<div class="ui-timeline">
  <div class="ui-timeline-item">
    <div class="ui-timeline-date">Q1 2024</div>
    <div class="ui-timeline-content">
      <strong>Rilis Versi Alpha:</strong> Peluncuran sistem inti ke pengguna terbatas untuk uji coba tertutup.
    </div>
  </div>
  <div class="ui-timeline-item">
    <div class="ui-timeline-date">Q3 2024</div>
    <div class="ui-timeline-content">
      <strong>Skalabilitas Server:</strong> Migrasi database ke infrastruktur global untuk menangani trafik 1 juta pengunjung harian.
    </div>
  </div>
  <div class="ui-timeline-item">
    <div class="ui-timeline-date">Q1 2025</div>
    <div class="ui-timeline-content">
      <strong>Rilis Publik:</strong> Pembukaan akses global untuk semua kreator di seluruh dunia.
    </div>
  </div>
</div>

3. Bar Chart

Market Share Browser 2026
Chrome
65%
Safari
18%
Edge
10%
Lainnya
7%
Format penulisan: 
Bar Chart Horizontal (Cocok untuk perbandingan data/survei)

<div class="ui-chart-wrap">
  <div class="ui-chart-title">Market Share Browser 2026</div>
  <div class="ui-bar-chart">
    
    <div class="bar-item">
      <div class="bar-label">Chrome</div>
      <div class="bar-track"><div class="bar-fill" style="width: 65%;"></div></div>
      <div class="bar-value">65%</div>
    </div>
    
    <div class="bar-item">
      <div class="bar-label">Safari</div>
      <div class="bar-track"><div class="bar-fill" style="width: 18%;"></div></div>
      <div class="bar-value">18%</div>
    </div>
    
    <div class="bar-item">
      <div class="bar-label">Edge</div>
      <div class="bar-track"><div class="bar-fill" style="width: 10%;"></div></div>
      <div class="bar-value">10%</div>
    </div>
    
    <div class="bar-item">
      <div class="bar-label">Lainnya</div>
      <div class="bar-track"><div class="bar-fill" style="width: 7%;"></div></div>
      <div class="bar-value">7%</div>
    </div>

  </div>
</div>

4. Column Chart Vertical

Pertumbuhan Pengguna (Juta)
10
2023
45
2024
70
2025
95
2026
Format penulisan: 
<div class="ui-chart-wrap">
  <div class="ui-chart-title">Pertumbuhan Pengguna (Juta)</div>
  <div class="ui-col-chart">
    
    <div class="col-item">
      <div class="col-value">10</div>
      <div class="col-fill" style="height: 10%;"></div>
      <div class="col-label">2023</div>
    </div>
    
    <div class="col-item">
      <div class="col-value">45</div>
      <div class="col-fill" style="height: 45%;"></div>
      <div class="col-label">2024</div>
    </div>
    
    <div class="col-item">
      <div class="col-value">70</div>
      <div class="col-fill" style="height: 70%;"></div>
      <div class="col-label">2025</div>
    </div>
    
    <div class="col-item">
      <div class="col-value">95</div>
      <div class="col-fill" style="height: 95%;"></div>
      <div class="col-label">2026</div>
    </div>

  </div>
</div>

4. Line Chart

Gunakan HTML ini di dalam Artikel: HTML
Number of extras seen
20 15 10 5 0 Median
Format penulisan: 
<div class="ui-line-chart-container">
  <div class="ui-chart-title">Number of extras seen</div>
  <svg class="ui-line-chart" viewBox="0 0 400 250">
    <line class="lc-grid" x1="40" y1="40" x2="380" y2="40" />
    <line class="lc-grid" x1="40" y1="90" x2="380" y2="90" />
    <line class="lc-grid" x1="40" y1="140" x2="380" y2="140" />
    <line class="lc-grid" x1="40" y1="190" x2="380" y2="190" />

    <text class="lc-text" x="30" y="45" text-anchor="end">20</text>
    <text class="lc-text" x="30" y="95" text-anchor="end">15</text>
    <text class="lc-text" x="30" y="145" text-anchor="end">10</text>
    <text class="lc-text" x="30" y="195" text-anchor="end">5</text>
    <text class="lc-text" x="30" y="245" text-anchor="end">0</text>

    <line class="lc-axis" x1="40" y1="240" x2="380" y2="240" />
    <line class="lc-axis" x1="40" y1="20" x2="40" y2="240" />

    <line class="lc-median" x1="40" y1="120" x2="380" y2="120" />
    <text x="45" y="115" font-family="monospace" font-size="10" fill="#ff5500">Median</text>

    <polyline class="lc-line" points="50,80 90,160 130,100 170,130 210,180 250,50 290,140 330,190 370,110" />

    <circle class="lc-dot" cx="50" cy="80" r="4" />
    <circle class="lc-dot" cx="90" cy="160" r="4" />
    <circle class="lc-dot" cx="130" cy="100" r="4" />
    <circle class="lc-dot" cx="170" cy="130" r="4" />
    <circle class="lc-dot" cx="210" cy="180" r="4" />
    <circle class="lc-dot" cx="250" cy="50" r="4" />
    <circle class="lc-dot" cx="290" cy="140" r="4" />
    <circle class="lc-dot" cx="330" cy="190" r="4" />
    <circle class="lc-dot" cx="370" cy="110" r="4" />
  </svg>
</div>

Cheat Sheet HTML

1. Inline Badges / Status Pills

Errstein v2.0 BARU kini dilengkapi dengan fitur integrasi database BETA yang lebih cepat.

Format penulisan: 
<p>
  Errstein v2.0 <span class="ui-badge filled">BARU</span> kini dilengkapi dengan fitur integrasi database <span class="ui-badge">BETA</span> yang lebih cepat.
</p>

2. Folder / File Tree

  • 📂 my-project
    • 📂 public
      • 📄 favicon.ico
      • 📄 logo.svg
    • 📂 src
      • 📄 index.js
      • 📄 style.css
    • 📄 package.json
    • 📄 README.md
Format penulisan: 
<div class="ui-file-tree">
  <ul>
    <li><span class="tree-folder">📂 my-project</span>
      <ul>
        <li><span class="tree-folder">📂 public</span>
          <ul>
            <li><span class="tree-file">📄 favicon.ico</span></li>
            <li><span class="tree-file">📄 logo.svg</span></li>
          </ul>
        </li>
        <li><span class="tree-folder">📂 src</span>
          <ul>
            <li><span class="tree-file">📄 index.js</span></li>
            <li><span class="tree-file">📄 style.css</span></li>
          </ul>
        </li>
        <li><span class="tree-file">📄 package.json</span></li>
        <li><span class="tree-file">📄 README.md</span></li>
      </ul>
    </li>
  </ul>
</div>

3. Editorial Pull Quote

"Desain antarmuka bukanlah tentang apa yang Anda tambahkan, melainkan tentang apa yang berani Anda buang."
Avatar Errstein — Lead Designer
Format penulisan: 
<div class="ui-pull-quote">
  <div class="ui-pull-quote-text">
    "Desain antarmuka bukanlah tentang apa yang Anda tambahkan, melainkan tentang apa yang berani Anda buang."
  </div>
  <div class="ui-pull-quote-author">
    <img src="URL_FOTO_ANDA" class="ui-pq-avatar" alt="Avatar" />
    <span class="ui-pq-name">Errstein — Lead Designer</span>
  </div>
</div>

4. SaaS Pricing Cards

Starter
$15
Per Bulan
  • 1 Pengguna
  • 5GB Penyimpanan
  • Support Email
Pilih Starter
Professional
$49
Per Bulan
  • 5 Pengguna
  • 50GB Penyimpanan
  • Support Prioritas 24/7
  • API Access
Pilih Pro
Format penulisan: 
<div class="ui-pricing-wrap">
  <div class="ui-pricing-card">
    <div class="pricing-name">Starter</div>
    <div class="pricing-price">$15</div>
    <span class="pricing-period">Per Bulan</span>
    <ul class="pricing-features">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 1 Pengguna</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 5GB Penyimpanan</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Support Email</li>
    </ul>
    <a href="#" class="ui-btn ui-btn-outline">Pilih Starter</a>
  </div>

  <div class="ui-pricing-card featured">
    <div class="pricing-name">Professional</div>
    <div class="pricing-price">$49</div>
    <span class="pricing-period">Per Bulan</span>
    <ul class="pricing-features">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 5 Pengguna</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 50GB Penyimpanan</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Support Prioritas 24/7</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> API Access</li>
    </ul>
    <a href="#" class="ui-btn">Pilih Pro</a>
  </div>
</div>

5. Feature Comparison Table

Fitur Utama Kompetitor A Errstein
Kecepatan Memuat (LCP) 1.5 Detik 0.4 Detik
Otomatisasi Mode Gelap
Optimasi Native SEO
Format penulisan: 
<div style="overflow-x: auto;">
  <table class="ui-compare-table">
    <thead>
      <tr>
        <th style="text-align: left;">Fitur Utama</th>
        <th>Kompetitor A</th>
        <th>Errstein</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Kecepatan Memuat (LCP)</td>
        <td>1.5 Detik</td>
        <td><strong>0.4 Detik</strong></td>
      </tr>
      <tr>
        <td>Otomatisasi Mode Gelap</td>
        <td><svg class="compare-cross" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></td>
        <td><svg class="compare-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6L9 17l-5-5"/></svg></td>
      </tr>
      <tr>
        <td>Optimasi Native SEO</td>
        <td><svg class="compare-cross" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></td>
        <td><svg class="compare-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6L9 17l-5-5"/></svg></td>
      </tr>
    </tbody>
  </table>
</div>
E
AUTHOR // SYS_ADMIN
Errstein
Errstein adalah tech-analyst independen yang membedah tren Artificial Intelligence, ekosistem SaaS, dan dinamika teknologi sosial. Memadukan pemikiran analitis dengan estetika antarmuka minimalis, menghadirkan kurasi dan insight tajam untuk para builder dan tech-enthusiast.
YOU MAY ALSO LIKE
COMMENTS

Join our Newsletter