Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme
Free Plus

Blok Harga CSS Tailwind

Terakhir diperbarui:

Blok harga Tailwind CSS khusus CSS yang dibuat dengan komponen kartu dan tombol. Salin-tempel tabel harga dengan tingkatan, daftar fitur, dan CTA. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Blok harga ini dibuat dengan komponen kartu dan varian tombol.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<h2 class="heading-6xl text-center">Pricing</h2>
<p class="para text-center">Check out our affordable pricing plans below and choose the one that suits you best. If you need a custom plan, please contact us.</p>
<div class="card card-outline w-88">
    <div class="card-content">
        <span class="badge badge-xs badge-warning">Most Popular</span>
        <div class="flex justify-between items-center">
            <h2 class="text-3xl font-bold">Startup</h2>
            <span class="text-xl">$49/mo</span>
        </div>
        <ul class="mt-6 flex flex-col gap-2 text-xs">
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
                <path d="M20 6 9 17l-5-5"></path>
                </svg>
                <span>25 websites</span>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
                <path d="M20 6 9 17l-5-5"></path>
                </svg>
                <span>150 templates</span>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
                <path d="M20 6 9 17l-5-5"></path>
                </svg>
                <span>Advanced eCommerce</span>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
                <path d="M20 6 9 17l-5-5"></path>
                </svg>
                <span>eCommerce features</span>
            </li>
            <li class="opacity-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
                <path d="M20 6 9 17l-5-5"></path>
                </svg>
                <span class="line-through">Unlimited storage space</span>
            </li>
            <li class="opacity-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
                <path d="M20 6 9 17l-5-5"></path>
                </svg>
                <span class="line-through">Priority support</span>
            </li>
        </ul>
        <div class="mt-6">
            <button type="button" class="btn btn-primary btn-block">Choose plan</button>
        </div>
    </div>
</div>
Sign in

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Harga yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP