Aplikasi Dzikir Qurani: Components Documentation

1. Tombol (Buttons)

Preview:

<a href="#" class="btn btn-primary"><i class="fa-solid fa-download"></i> Download</a>

<a href="#" class="btn btn-blue"><i class="fa-brands fa-facebook-f"></i> Facebook</a>
<a href="#" class="btn btn-red"><i class="fa-brands fa-youtube"></i> Youtube</a>
<a href="#" class="btn btn-black"><i class="fa-brands fa-tiktok"></i> Tiktok</a>

<a href="#" class="btn btn-outline">Lihat Demo</a>
<a href="#" class="btn btn-soft">Baca Selengkapnya</a>

2. Kotak Info (Alerts)

Preview:

Informasi:
Pastikan koneksi internet stabil saat mengunduh file ini.

Berhasil:
Data telah berhasil disimpan ke perangkat Anda.

Peringatan:
Jangan lupa backup data sebelum melakukan update.

Error:
Link download sudah kadaluarsa. Silakan lapor admin.

<div class="note note-info">
    <i class="fa-solid fa-circle-info"></i>
    <div><strong>Informasi:</strong><br>Tulis pesan info di sini.</div>
</div>

<div class="note note-success">
    <i class="fa-solid fa-circle-check"></i>
    <div><strong>Berhasil:</strong><br>Tulis pesan sukses di sini.</div>
</div>

<div class="note note-warn">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <div><strong>Peringatan:</strong><br>Tulis pesan warning di sini.</div>
</div>

<div class="note note-error">
    <i class="fa-solid fa-circle-xmark"></i>
    <div><strong>Error:</strong><br>Tulis pesan error di sini.</div>
</div>

3. Mac Style Code Box

Preview:

terminal

# Cara install dependency npm install tailwindcss npm run dev

<div class="mac-code">
    <div class="mac-header">
        <div class="mac-dot dot-r"></div><div class="mac-dot dot-y"></div><div class="mac-dot dot-g"></div>
        <div class="mac-title">script.js</div>
    </div>
    <div class="mac-content">
<span class="comment">/* Tulis komentar disini */</span>
console.log("Hello World");
    </div>
</div>

4. Spoiler / Accordion

Preview:

Apa password file RAR-nya?

Password untuk semua file adalah: www.namadomain.com

Bagaimana cara install?

1. Download file
2. Ekstrak
3. Install APK

<details class="acc-item">
    <summary>Judul Pertanyaan / Spoiler?</summary>
    <div>Tulis isi jawaban atau konten tersembunyi di sini. Bisa teks panjang atau gambar.</div>
</details>

5. List & Grid Layout

Preview:

Fitur Unggulan (Grid 1)

Tanpa Iklan Mengganggu
Support Mode Offline
Tampilan Dark Mode

Kekurangan (Grid 2)

Tidak support Android 4.0
Butuh RAM minimal 2GB

<div class="grid-2">
    <div>
        <h4 class="font-bold mb-2">Kelebihan</h4>
        <ul class="check-list">
            <li>Poin kelebihan 1</li>
            <li>Poin kelebihan 2</li>
        </ul>
    </div>
    
    <div>
        <h4 class="font-bold mb-2">Kekurangan</h4>
        <ul class="check-list cross-list">
            <li>Poin kekurangan 1</li>
            <li>Poin kekurangan 2</li>
        </ul>
    </div>
</div>

6. Tabel Data (Responsive)

Preview:

Fitur	Versi Free	Versi Pro
Mode Offline	Ya	Ya
Tanpa Iklan	Tidak	Ya
Tema Warna	1 Tema	10+ Tema

<div class="table-wrapper">
    <table class="custom-table">
        <thead>
            <tr>
                <th>Judul 1</th>
                <th>Judul 2</th>
                <th>Judul 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data Baris 1</td>
                <td>Data A</td>
                <td>Data B</td>
            </tr>
            <tr>
                <td>Data Baris 2</td>
                <td>Data C</td>
                <td>Data D</td>
            </tr>
        </tbody>
    </table>
</div>

7. Tutorial (Step by Step)

Preview:

Download Aplikasi

Unduh file APK melalui tombol download di bawah artikel ini.
Izinkan Instalasi

Masuk ke Pengaturan > Keamanan > Izinkan Sumber Tidak Dikenal.
Selesai

Buka aplikasi dan nikmati fitur lengkapnya.

<ul class="step-list">
    <li>
        <h4>Langkah 1: Judul</h4>
        <p>Penjelasan langkah pertama disini.</p>
    </li>
    <li>
        <h4>Langkah 2: Judul</h4>
        <p>Penjelasan langkah kedua disini.</p>
    </li>
    <li>
        <h4>Langkah 3: Judul</h4>
        <p>Penjelasan langkah ketiga disini.</p>
    </li>
</ul>

8. Kartu Aplikasi (App Card)

Preview:

Dzikir & Doa Premium

Versi 2.0 • 15 MB • Android 10+ Download APK

<div class="app-card">
    <div class="app-icon-box">
        <i class="fa-solid fa-kaaba"></i>
    </div>
    <div class="app-info">
        <h4>Nama Aplikasi</h4>
        <span class="app-meta">Versi 1.0 • Size MB</span>
        <a href="#" class="app-btn">Download</a>
    </div>
</div>

9. Video YouTube (Responsive)

Preview:

<div class="video-wrapper">
    <iframe src="https://www.youtube.com/embed/ID_VIDEO_DISINI" allowfullscreen></iframe>
</div>

10. Teks Arab & Artinya (Basic)

Gunakan ini untuk menulis potongan ayat atau doa di tengah paragraf.

Preview:

رَبِّ زِدْنِي عِلْمًا

Robbi zidnii 'ilmaa "Ya Tuhanku, tambahkanlah kepadaku ilmu pengetahuan."

<div class="arabic-text">PASTE_ARAB_DISINI</div>
<span class="latin-text">Tulis latin disini...</span>
<span class="translation-text">"Tulis terjemahan disini..."</span>

11. Kotak Dalil / Hadits

Gunakan ini untuk mengutip Hadits atau Ayat Al-Qur'an lengkap dengan sumbernya.

Preview:

مَنْ دَلَّ عَلَى خَيْرٍ فَلَهُ مِثْلُ أَجْرِ فَاعِلِهِ

"Barangsiapa yang menunjuki kepada kebaikan maka dia akan mendapatkan pahala seperti pahala orang yang mengerjakannya."

HR. Muslim No. 1893

<div class="dalil-box">
    <div class="arabic-text">PASTE_ARAB_DISINI</div>
    <div class="translation-text">"Tulis terjemahan disini..."</div>
    <div class="dalil-source"><i class="fa-solid fa-book-open mr-1"></i> Sumber (misal: HR. Muslim)</div>
</div>

12. Kartu Doa (Doa Card)

Tampilan estetik khusus untuk kumpulan doa-doa pendek.

Preview:

Doa Sapu Jagat

رَبَّنَا آتِنَا فِي الدُّنْيَا حَسَنَةً وَفِي الْآخِرَةِ حَسَنَةً وَقِنَا عَذَابَ النَّارِ

Rabbana atina fiddunya hasanah wa fil akhirati hasanah, waqina adzabannar.

"Ya Tuhan kami, berilah kami kebaikan di dunia dan kebaikan di akhirat dan peliharalah kami dari siksa neraka."

<div class="doa-card">
    <span class="doa-title">JUDUL DOA</span>
    <div class="arabic-text arabic-center">PASTE_ARAB_DISINI</div>
    <div class="latin-text">Tulis latin disini...</div>
    <div class="translation-text">"Tulis terjemahan disini..."</div>
</div>

Components Documentation

Components Documentation

1. Tombol (Buttons)

2. Kotak Info (Alerts)

3. Mac Style Code Box

4. Spoiler / Accordion

5. List & Grid Layout

Fitur Unggulan (Grid 1)

Kekurangan (Grid 2)

6. Tabel Data (Responsive)

7. Tutorial (Step by Step)

Download Aplikasi

Izinkan Instalasi

Selesai

8. Kartu Aplikasi (App Card)

Dzikir & Doa Premium

9. Video YouTube (Responsive)

10. Teks Arab & Artinya (Basic)

11. Kotak Dalil / Hadits

12. Kartu Doa (Doa Card)

Komentar

Tulis Komentar

Components Documentation

1. Tombol (Buttons)

2. Kotak Info (Alerts)

3. Mac Style Code Box

4. Spoiler / Accordion

5. List & Grid Layout

Fitur Unggulan (Grid 1)

Kekurangan (Grid 2)

6. Tabel Data (Responsive)

7. Tutorial (Step by Step)

Download Aplikasi

Izinkan Instalasi

Selesai

8. Kartu Aplikasi (App Card)

Dzikir & Doa Premium

9. Video YouTube (Responsive)

10. Teks Arab & Artinya (Basic)

11. Kotak Dalil / Hadits

12. Kartu Doa (Doa Card)

Artikel Terkait

Komentar

Tulis Komentar

Tafsir Ayat

Install Aplikasi

Daftar Isi

Tampilan

Support Pengembangan