widget pricing table model tab

membuat widget pricing table model tab dengan html dan css

Hallo semua pada kesempatan kali ini saya akan membagikan sebuah widget pricing table dengan model tab.

widget pricing table ini biasanya sering kita jumpai di website - website yang menyediakan jasa atau produk seperti landing page maupun toko online yang berfungsi untuk menampilkan harga jasa maupun produk yang kita jual.

dengan menggunakan widget ini cukup memengaruhi keputusan pelanggan dalam membeli produk atau jasa yang kita tawarkan. tentu cara ini akan menguntungkan kita sebagai pemilik bisnis.

pada postingan sebelumnya saya juga sudah pernah membagikan widget serupa yaitu material design widget pricing table hanya berbeda style aja sama yang akan saya bagikan kali ini.

jika widget sebelumnya memiliki 3 card, maka yang sekarang ini hanya memiliki 1 card saja dan memiliki 3 pilihan opsi dengan fitur tab, dengan model tab seperti ini sehingga jika website kalian di akses melalui mobile akan lebih bagus karena tidak memakan banyak tempat.

ok buat kalian yang ingin mencobanya mari simak caranya di bawah ini.

Widget Pricing Table Dengan Model Tab

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/*pricing table*/
.tableWrap{position:relative;width:350px;background:#fff;border-radius:16px;padding:30px;box-shadow:3px 5px 30px 5px rgba(46,56,77,.1);margin:auto}
.tableWrap .tab{height:55px;display:flex;align-items:center;border:1px solid #ccc;border-radius:30px;position:relative}
.tab label{height:100%;z-index:2;width:30%;display:flex;cursor:pointer;font-size:15px;position:relative;align-items:center;justify-content:center;transition:color 0.3s ease}
#tab-1:checked ~ .tab .tab-1,#tab-2:checked ~ .tab .tab-2,#tab-3:checked ~ .tab .tab-3{color:#fefefe}
.tab label:nth-child(2){width: 40%}
.tab .tabSlider{position:absolute;height:85%;border-radius:inherit;background:#f89000;opacity:.8;transition:all 0.3s ease}
#tab-1:checked ~ .tab .tabSlider{left: 0%;width: 90px;transform: translateX(5%)}
#tab-2:checked ~ .tab .tabSlider{left: 50%;width: 120px;transform: translateX(-50%)}
#tab-3:checked ~ .tab .tabSlider{left: 100%;width: 95px;transform: translateX(-105%)}
.tableWrap input[type='radio']{display: none}
.tableCard{overflow: hidden}
.tableCard .tableCards{display:flex;width:300%}
.tableCards .tableS{width:33.4%}
.tableCards .tableRow-1{transition: all 0.3s ease}
#tab-1:checked ~ .tableCard .tableCards .tableRow-1{margin-left: 0%}
#tab-2:checked ~ .tableCard .tableCards .tableRow-1{margin-left: -33.4%}
#tab-3:checked ~ .tableCard .tableCards .tableRow-1{margin-left: -66.8%}
.tableS .tableDetail{margin:20px 0;text-align:center;padding-bottom:25px;border-bottom:1px solid #e6e6e6}
.tableDetail .tableHarga{font-size:55px;font-weight:600;position:relative}
.tableDetail .tableHarga:before,.tableDetail .tableHarga:after{position:absolute;font-weight:400}
.tableDetail .tableHarga:before{content:'Rp';left:-30px;top:17px;font-size:20px}
.tableDetail .tableHarga:after{content:'rb';right:-27px;bottom:12px;font-size:23px;font-weight:600}
.tableDetail p{font-size:18px;margin-top:5px}
.tableS .tableContent li{display:flex;font-size:15px;list-style:none;margin-bottom:10px;align-items:center}
.tableContent li svg{flex-shrink:0;height:20px;margin-right:10px;margin-top:4px;stroke:#f89000;fill:none;}
.tableContent li span{margin-left:10px}
.tableWrap .buttonx{width:90%;border-radius:25px;border:1px #ccc solid;outline:none;height:50px;font-size:18px;color:#444;cursor:pointer;margin:20px 25px 20px 10px;background:transparent;transition:transform 0.3s ease;align-items:center}
.tableWrap .buttonx:hover{transform:scale(0.98);border:1px #f89000 solid;color:#f89000;outline:none}

/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .tableWrap{background-color:#1e1e1e;color:#fefefe}
.darkMode .tableWrap .tab,.darkMode .tableS .tableDetail,.darkMode .tableWrap .buttonx{border-color:rgba(255,255,255,.1)}

dan letakkan html di bawah ini di mana kalian ingin menampilkan widget pricing tablenya, biasanya si kebanyakan orang meletakkanya di atas footer , atau bisa juga di halaman post maupun halaman statis terserah kalian aja bebas.

<div class='tableWrap'>
<input id='tab-1' name='tabSlider' type='radio'/>
<input checked='' id='tab-2' name='tabSlider' type='radio'/>
<input id='tab-3' name='tabSlider' type='radio'/>
<div class='tab'>
<label for='tab-1' class='tab-1'>Free</label>
<label for='tab-2' class='tab-2'>Personal</label>
<label for='tab-3' class='tab-3'>Developer</label>
<div class='tabSlider'></div>
</div>
<div class='tableCard'>
<div class='tableCards'>
<div class='tableS tableRow-1'>
<div class='tableDetail'>
<span class='tableHarga'>0</span>
<p>Pemakaian Pribadi</p>
</div>
<ul class='tableContent'>
<li>
<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Lisensi</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Support</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg><span>Hapus Cridit Link</span></li>
</ul>
<button class='buttonx'>Dapatkan Sekarang</button>
</div>

<div class='tableS'>
<div class='tableDetail'>
<span class='tableHarga'>100</span>
<p>Pemakain Pribadi</p>
</div>
<ul class='tableContent'><li>
<svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Max 3 Domain</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Support 1 Bulan</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Hapus Cridit Link</span></li>
</ul>
<button class='buttonx'>Dapatkan Sekarang</button>
</div>
        
<div class='tableS'>
<div class='tableDetail'>
<span class='tableHarga'>1.500</span>
<p>Jual Kembali</p>
</div>
<ul class='tableContent'>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Unlimited Lisensi</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Support 12 Bulan</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Hapus Cridit Link</span></li>
</ul>
<button class='buttonx'>Dapatkan Sekarang</button>
</div>
</div>
</div>
</div>

ok sekian widget pricing table dengan model tab yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

referensi:
www.codingnepalweb.com/pricing-card-with-sliding-animation-css