This commit is contained in:
Andras Bacsai
2023-08-24 17:41:11 +02:00
parent 6f14e127a3
commit 9ef3218bb5
5 changed files with 20 additions and 14 deletions

View File

@@ -5,15 +5,15 @@
<div class="px-6 mx-auto lg:px-8">
<div class="flex justify-center mt-5">
<fieldset
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-full gap-x-1 ring-1 ring-inset ring-coolgray-500">
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-full gap-x-1 ">
<legend class="sr-only">Payment frequency</legend>
<label class="cursor-pointer rounded-full px-2.5 py-1"
<label class="cursor-pointer rounded px-2.5 py-1"
:class="selected === 'monthly' ? 'bg-coollabs-100 text-white' : ''">
<input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
class="sr-only">
<span>Monthly</span>
</label>
<label class="cursor-pointer rounded-full px-2.5 py-1"
<label class="cursor-pointer rounded px-2.5 py-1"
:class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''">
<input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
class="sr-only">
@@ -22,11 +22,11 @@
</fieldset>
</div>
<div x-show="selected === 'monthly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
<div>Save <span class="font-bold text-warning">10% </span> annually with the yearly plan.
<div>Save <span class="font-bold text-warning">1 month</span> annually with the yearly plans.
</div>
</div>
<div x-show="selected === 'yearly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
<div>Congratulations! 🎉 You are saving money with this choice!
<div>
</div>
</div>
<div class="flow-root mt-12">