We often encounter this pricing table widget on websites that provide services or products such as landing pages or online stores that function to display the prices of the services and products we sell.
by using this widget enough to influence customer decisions in buying products or services that we offer. Of course this method will benefit us as business owners.
The current one only has 1 card and has 3 options with tab features, with a tab model like this so that if your website is accessed via mobile it will be better because it doesn't take up much space.
ok for those of you who want to try it, let's see how below.
Pricing Table Widget With Tab Model
please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin>
/*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)}and place the html below where you want to display the pricing table widget, usually most people put it above the footer, or it can be on a post page or a static page, it's up to you to be free.
<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, so many pricing table widgets with tab models that I can share this time, hopefully it will be useful and thank you for visiting.