For people who are starting out in the water saving business
For experienced water savers who'd like to push their limits
For all the professionals who'd like to educate others, too
<!-- basic -->
<div class="max-w-[320px] md:max-w-[990px] mx-auto">
<!-- beginner savers -->
<div class="md:flex justify-between space-y-4 md:space-y-0 md:space-x-4 rtl:space-x-reverse">
<div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
<h3 class="text-xl lg:text-2xl">Beginner Savers</h3>
<div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
<p class="text-[15px]">For people who are starting out in the water saving business</p>
<div class="my-7 p-2.5 text-center text-lg group-hover:text-primary"><strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$19</strong> / monthly</div>
<ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
<li class="flex justify-center items-center">
<svg> ... </svg> Free water saving e-book
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> Free access to forums
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> Beginners tips
</li>
</ul>
<a href="#" target="_self" class="btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50">Buy Now</a>
</div>
<!-- advanced savers -->
<div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
<h3 class="text-xl lg:text-2xl">Advanced Savers</h3>
<div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
<p class="text-[15px] ">For experienced water savers who'd like to push their limits</p>
<div class="my-7 p-2.5 text-center text-lg group-hover:text-primary"><strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$29</strong> / monthly</div>
<ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
<li class="flex justify-center items-center">
<svg> ... </svg> Free water saving e-book
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> Free access to forums
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> Advanced saving tips
</li>
</ul>
<a href="#" target="_self" class="btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50">Buy Now</a>
</div>
<!-- pro savers -->
<div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
<h3 class="text-xl lg:text-2xl">Pro Savers</h3>
<div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
<p class="text-[15px] ">For all the professionals who'd like to educate others, too</p>
<div class="my-7 p-2.5 text-center text-lg group-hover:text-primary"><strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$79</strong> / monthly</div>
<ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
<li class="flex justify-center items-center">
<svg> ... </svg> Access to all books
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> Unlimited board topics
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> Beginners tips
</li>
</ul>
<a href="#" target="_self" class="btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50">Buy Now</a>
</div>
</div>
</div>
cPanel/WHM included. Intel Xeon E3 with guaranteed 2GB RAM.
cPanel/WHM included. Intel Xeon E5 with guaranteed 4GB RAM.
cPanel/WHM included. Intel Xeon E5 with guaranteed 8GB RAM.
<!-- toggle -->
<div class="max-w-[320px] md:max-w-[1140px] mx-auto dark:text-white-dark">
<!-- switch -->
<div class="mt-5 md:mt-10 text-center flex justify-center space-x-4 rtl:space-x-reverse font-semibold text-base">
<span :class="!yearlyPrice ? 'text-primary' : 'text-white-dark'">Monthly</span>
<label class="w-12 h-6 relative mb-0 cursor-pointer">
<input id="custom_switch_checkbox1" type="checkbox" class="custom_switch absolute ltr:left-0 rtl:right-0 top-0 w-full h-full opacity-0 z-10 cursor-pointer peer" x-model="yearlyPrice" />
<span for="custom_switch_checkbox1" class="outline_checkbox bg-icon border-2 border-[#ebedf2] dark:border-white-dark block h-full rounded-full before:absolute before:left-1 before:bg-[#ebedf2] dark:before:bg-white-dark before:bottom-1 before:w-4 before:h-4 before:rounded-full before:bg-[url(/assets/images/close.svg)] before:bg-no-repeat before:bg-center peer-checked:before:left-7 peer-checked:before:bg-[url(/assets/images/checked.svg)] peer-checked:border-primary peer-checked:before:bg-primary before:transition-all before:duration-300"></span>
</label>
<span class="relative" :class="yearlyPrice ? 'text-primary' : 'text-white-dark'">Yearly <span class="badge bg-success rounded-full absolute ltr:left-full rtl:right-full whitespace-nowrap ltr:ml-2 rtl:mr-2 my-auto hidden">20% Off</span></span>
</div>
<!-- cloud hosting -->
<div class="md:flex space-y-4 md:space-y-0 mt-5 md:mt-16 text-white-dark">
<div class="p-4 lg:p-9 border ltr:md:border-r-0 rtl:md:border-l-0 border-[#e0e6ed] dark:border-[#1b2e4b] rounded-md ltr:md:rounded-r-none rtl:md:rounded-l-none transition-all duration-300 hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]">
<h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Cloud Hosting</h3>
<p>cPanel/WHM included. Intel Xeon E3 with guaranteed 2GB RAM.</p>
<div class="my-7 p-2.5 text-center text-lg"><strong class="text-[#3b3f5c] dark:text-white-light text-xl lg:text-3xl">$25</strong> / monthly</div>
<div class="mb-6">
<strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">Cloud Hosting Features</strong>
<ul class="space-y-3">
<li>Single Domain</li>
<li>50 GB SSD</li>
<li>1 TB Premium Bandwidth</li>
</ul>
</div>
<button type="button" class="btn btn-dark w-full">Buy Now</button>
</div>
<!-- vps hosting -->
<div class="relative p-4 pt-14 lg:p-9 border border-[#e0e6ed] dark:border-[#1b2e4b] transition-all duration-300 rounded-t-md">
<div class="absolute top-0 md:-top-[30px] inset-x-0 bg-primary text-white h-10 flex items-center justify-center text-base rounded-t-md">Most Popular</div>
<h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">VPS Hosting</h3>
<p>cPanel/WHM included. Intel Xeon E5 with guaranteed 4GB RAM.</p>
<div class="my-7 p-2.5 text-center text-lg"><strong class="text-primary text-xl lg:text-4xl">$70</strong> / monthly</div>
<div class="mb-6">
<strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">VPS Hosting Features</strong>
<ul class="space-y-3">
<li>5 Domains</li>
<li>100 GB SSD</li>
<li>2 TB Premium Bandwidth</li>
</ul>
</div>
<button type="button" class="btn btn-primary w-full">Buy Now</button>
</div>
<!-- business hosting -->
<div class="p-4 lg:p-9 border ltr:md:border-l-0 rtl:md:border-r-0 border-[#e0e6ed] dark:border-[#1b2e4b] rounded-md ltr:md:rounded-l-none rtl:md:rounded-r-none transition-all duration-300 hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]">
<h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Business Hosting</h3>
<p>cPanel/WHM included. Intel Xeon E5 with guaranteed 8GB RAM.</p>
<div class="my-7 p-2.5 text-center text-lg"><strong class="text-[#3b3f5c] dark:text-white-light text-xl lg:text-3xl">$115</strong> / monthly</div>
<div class="mb-6">
<strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">Business Hosting Features</strong>
<ul class="space-y-3">
<li>Unlimited Domains</li>
<li>1 TB SSD</li>
<li>5 TB Premium Bandwidth</li>
</ul>
</div>
<button type="button" class="btn btn-dark w-full">Buy Now</button>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<!-- animated -->
<div class="max-w-[1140px] mx-auto mt-20 dark:text-white-dark">
<!-- freelancer -->
<div class="md:flex justify-between space-y-14 md:space-y-0 md:space-x-4 rtl:space-x-reverse">
<div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
<span class="bg-white dark:bg-[#0e1726] text-[#3b3f5c] dark:text-white-light border-2 border-primary w-[70px] h-[70px] lg:w-[100px] lg:h-[100px] rounded flex justify-center items-center text-xl lg:text-3xl font-bold -mt-[30px] shadow-[0_0_15px_1px_rgba(113,106,202,0.20)] transition-all duration-300 group-hover:-translate-y-[10px]">$49</span>
<h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Freelancer</h3>
<p class="text-[15px] ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="p-5">
<ul class="space-y-2.5 mb-5 font-semibold">
<li>Support forum</li>
<li>Free hosting</li>
<li>2 hours of support</li>
<li>5GB of storage space</li>
</ul>
<a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a>
</div>
</div>
<!-- small business -->
<div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
<span class="bg-white dark:bg-[#0e1726] text-[#3b3f5c] dark:text-white-light border-2 border-primary w-[70px] h-[70px] lg:w-[100px] lg:h-[100px] rounded flex justify-center items-center text-xl lg:text-3xl font-bold -mt-[30px] shadow-[0_0_15px_1px_rgba(113,106,202,0.20)] transition-all duration-300 group-hover:-translate-y-[10px]">$89</span>
<h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Small business</h3>
<p class="text-[15px] ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="p-5">
<ul class="space-y-2.5 mb-5 font-semibold">
<li>Unlimited calls</li>
<li>Free hosting</li>
<li>10 hours of support</li>
<li>10GB of storage space</li>
</ul>
<a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a>
</div>
</div>
<!-- larger business -->
<div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
<span class="bg-white dark:bg-[#0e1726] text-[#3b3f5c] dark:text-white-light border-2 border-primary w-[70px] h-[70px] lg:w-[100px] lg:h-[100px] rounded flex justify-center items-center text-xl lg:text-3xl font-bold -mt-[30px] shadow-[0_0_15px_1px_rgba(113,106,202,0.20)] transition-all duration-300 group-hover:-translate-y-[10px]">$129</span>
<h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Larger business</h3>
<p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="p-5">
<ul class="space-y-2.5 mb-5 font-semibold">
<li>Unlimited calls</li>
<li>Free hosting</li>
<li>Unlimited hours of support</li>
<li>1TB of storage space</li>
</ul>
<a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a>
</div>
</div>
</div>
</div>