<section x-data="{ toggle: false }" class="py-12 lg:py-24">
<div class="container mx-auto px-4">
<div class="max-w-2xl mx-auto text-center mb-14 md:mb-20">
<h1 class="font-heading text-5xl sm:text-6xl mb-6">Pricing</h1>
<p class="text-lg text-gray-700">Our pricing plans are simple and designed to cater to households and companies of various sizes. Choose a plan that suits your needs and budget.</p>
</div>
<div class="flex md:flex-row flex-col mb-12 items-start md:items-center justify-end">
<div>
<div class="flex justify-center items-center">
<div class="relative flex h-5 px-0.5 items-center justify-between transition duration-200 ease-linear rounded-full bg-gray-200 shadow">
<a x-on:click.prevent="toggle = !toggle" class="inline-block w-4 h-4 bg-white rounded-full" :class="{'bg-white': !toggle, 'bg-transparent': toggle }" href="#"></a>
<a x-on:click.prevent="toggle = !toggle" class="inline-block w-4 h-4 rounded-full" :class="{'bg-transparent': !toggle, 'bg-white': toggle }" href="#"></a>
</div>
<span :class="{'hidden': toggle}" class="ml-4 font-medium">Monthly</span>
<span :class="{'hidden': !toggle}" class="hidden ml-4 font-medium">Annually</span>
</div>
</div>
<span class="inline-block mt-5 md:mt-0 md:ml-6 px-2 text-sm leading-6 text-teal-800 font-medium bg-lime-50 rounded-full">SAVE 15% with annual billing</span>
</div>
<div class="max-w-sm mx-auto lg:max-w-none">
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
<div>
<div class="mb-10 p-8 shadow-md rounded-2xl">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H48C52.4183 0 56 3.58172 56 8V48C56 52.4183 52.4183 56 48 56H8C3.58172 56 0 52.4183 0 48V8Z" fill="#BEF264"></path>
<path d="M23.3333 12.4445C22.7441 12.4445 22.2055 12.7773 21.942 13.3043L14.1642 28.8599C13.9231 29.3421 13.9489 29.9148 14.2323 30.3734C14.5158 30.832 15.0164 31.1111 15.5556 31.1111H21.341L18.7131 41.6227C18.5461 42.2907 18.8381 42.989 19.4309 43.3392C20.0237 43.6895 20.7762 43.6084 21.2807 43.1399L43.0585 22.9177C43.5272 22.4824 43.6817 21.8046 43.4479 21.2092C43.2141 20.6138 42.6397 20.2222 42 20.2222H35.4141L38.6672 14.8003C38.9555 14.3198 38.9631 13.7213 38.687 13.2336C38.4109 12.7459 37.8938 12.4445 37.3333 12.4445H23.3333Z" fill="white"></path>
<mask id="mask0_210_186" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="12" width="30" height="32">
<path d="M23.3333 12.4445C22.7441 12.4445 22.2055 12.7773 21.942 13.3043L14.1642 28.8599C13.9231 29.3421 13.9489 29.9148 14.2323 30.3734C14.5158 30.832 15.0164 31.1111 15.5556 31.1111H21.341L18.7131 41.6227C18.5461 42.2907 18.8381 42.989 19.4309 43.3392C20.0237 43.6895 20.7762 43.6084 21.2807 43.1399L43.0585 22.9177C43.5272 22.4824 43.6817 21.8046 43.4479 21.2092C43.2141 20.6138 42.6397 20.2222 42 20.2222H35.4141L38.6672 14.8003C38.9555 14.3198 38.9631 13.7213 38.687 13.2336C38.4109 12.7459 37.8938 12.4445 37.3333 12.4445H23.3333Z" fill="#022C22"></path>
</mask>
<g mask="url(#mask0_210_186)">
<rect x="9.33325" y="31.1111" width="35.7778" height="15.5556" fill="#022C22"></rect>
</g>
</svg>
<span class="block text-2xl font-medium mt-8 mb-4">Premium</span>
<div class="flex items-center mb-6">
<span :class="{'hidden': toggle}" class="text-6xl">$59</span>
<span :class="{'hidden': !toggle}" class="hidden text-6xl">$129</span>
<span :class="{'hidden': toggle}" class="ml-4 text-xl font-medium text-gray-700 ">per month</span>
<span :class="{'hidden': !toggle}" class="hidden ml-4 text-xl font-medium text-gray-700 ">per annually</span>
</div>
<p class="text-lg mb-8">For small households or businesses with moderate energy consumption</p>
<a href="#" class="inline-flex group w-full py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">
<span class="mr-2">Get started</span>
<span class="transform group-hover:translate-x-1 transition-transform duration-200">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.25 10H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.5 4.75L15.75 10L10.5 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</a>
</div>
<div>
<span class="block text-xl font-medium mb-6">What’s included</span>
<ul>
<li class="flex mb-4 items-center">
<span class="flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#022C22"></rect>
<path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="ml-3">Fixed amount of renewable energy supply</span>
</li>
<li class="flex mb-4 items-center">
<span class="flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#022C22"></rect>
<path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="ml-3">Installation support for chosen energy type</span>
</li>
<li class="flex items-center">
<span class="flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#022C22"></rect>
<path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="ml-3">Basic customer support included</span>
</li>
</ul>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
<div>
<div class="mb-10 p-8 shadow-md rounded-2xl">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H48C52.4183 0 56 3.58172 56 8V48C56 52.4183 52.4183 56 48 56H8C3.58172 56 0 52.4183 0 48V8Z" fill="#BEF264"></path>
<path d="M23.3333 12.4445C22.7441 12.4445 22.2055 12.7773 21.942 13.3043L14.1642 28.8599C13.9231 29.3421 13.9489 29.9148 14.2323 30.3734C14.5158 30.832 15.0164 31.1111 15.5556 31.1111H21.341L18.7131 41.6227C18.5461 42.2907 18.8381 42.989 19.4309 43.3392C20.0237 43.6895 20.7762 43.6084 21.2807 43.1399L43.0585 22.9177C43.5272 22.4824 43.6817 21.8046 43.4479 21.2092C43.2141 20.6138 42.6397 20.2222 42 20.2222H35.4141L38.6672 14.8003C38.9555 14.3198 38.9631 13.7213 38.687 13.2336C38.4109 12.7459 37.8938 12.4445 37.3333 12.4445H23.3333Z" fill="white"></path>
<mask id="mask0_210_215" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="12" width="30" height="32">
<path d="M23.3333 12.4445C22.7441 12.4445 22.2055 12.7773 21.942 13.3043L14.1642 28.8599C13.9231 29.3421 13.9489 29.9148 14.2323 30.3734C14.5158 30.832 15.0164 31.1111 15.5556 31.1111H21.341L18.7131 41.6227C18.5461 42.2907 18.8381 42.989 19.4309 43.3392C20.0237 43.6895 20.7762 43.6084 21.2807 43.1399L43.0585 22.9177C43.5272 22.4824 43.6817 21.8046 43.4479 21.2092C43.2141 20.6138 42.6397 20.2222 42 20.2222H35.4141L38.6672 14.8003C38.9555 14.3198 38.9631 13.7213 38.687 13.2336C38.4109 12.7459 37.8938 12.4445 37.3333 12.4445H23.3333Z" fill="#022C22"></path>
</mask>
<g mask="url(#mask0_210_215)">
<rect x="9.33337" y="25.6667" width="36.1667" height="21" fill="#022C22"></rect>
</g>
</svg>
<span class="block text-2xl font-medium mt-8 mb-4">Basic</span>
<div class="flex items-center mb-6">
<span :class="{'hidden': toggle}" class="text-6xl">$29</span>
<span :class="{'hidden': !toggle}" class="hidden text-6xl">$99</span>
<span :class="{'hidden': toggle}" class="ml-4 text-xl font-medium text-gray-700 ">per month</span>
<span :class="{'hidden': !toggle}" class="hidden ml-4 text-xl font-medium text-gray-700 ">per annually</span>
</div>
<p class="text-lg mb-8">For small households or businesses with moderate energy consumption</p>
<a href="#" class="inline-flex group w-full py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">
<span class="mr-2">Get started</span>
<span class="transform group-hover:translate-x-1 transition-transform duration-200">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.25 10H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.5 4.75L15.75 10L10.5 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</a>
</div>
<div>
<span class="block text-xl font-medium mb-6">What’s included</span>
<ul>
<li class="flex mb-4 items-center">
<span class="flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#022C22"></rect>
<path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="ml-3">Increased renewable energy allocation</span>
</li>
<li class="flex mb-4 items-center">
<span class="flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#022C22"></rect>
<path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="ml-3">Installation support for chosen energy type</span>
</li>
<li class="flex items-center">
<span class="flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#022C22"></rect>
<path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="ml-3">24/7 priority customer support</span>
</li>
</ul>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 px-4">
<div>
<div class="mb-10 p-8 bg-teal-900 shadow-md rounded-2xl">
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8C0 3.58172 3.58172 0 8 0H48C52.4183 0 56 3.58172 56 8V48C56 52.4183 52.4183 56 48 56H8C3.58172 56 0 52.4183 0 48V8Z" fill="#BEF264"></path>
<path d="M23.3333 12.4445C22.7441 12.4445 22.2055 12.7773 21.942 13.3043L14.1642 28.8599C13.9231 29.3421 13.9489 29.9148 14.2323 30.3734C14.5158 30.832 15.0164 31.1111 15.5556 31.1111H21.341L18.7131 41.6227C18.5461 42.2907 18.8381 42.989 19.4309 43.3392C20.0237 43.6895 20.7762 43.6084 21.2807 43.1399L43.0585 22.9177C43.5272 22.4824 43.6817 21.8046 43.4479 21.2092C43.2141 20.6138 42.6397 20.2222 42 20.2222H35.4141L38.6672 14.8003C38.9555 14.3198 38.9631 13.7213 38.687 13.2336C38.4109 12.7459 37.8938 12.4445 37.3333 12.4445H23.3333Z" fill="#F5FAF9"></path>
<mask id="mask0_210_244" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="12" width="30" height="32">
<path d="M23.3333 12.4445C22.7441 12.4445 22.2055 12.7773 21.942 13.3043L14.1642 28.8599C13.9231 29.3421 13.9489 29.9148 14.2323 30.3734C14.5158 30.832 15.0164 31.1111 15.5556 31.1111H21.341L18.7131 41.6227C18.5461 42.2907 18.8381 42.989 19.4309 43.3392C20.0237 43.6895 20.7762 43.6084 21.2807 43.1399L43.0585 22.9177C43.5272 22.4824 43.6817 21.8046 43.4479 21.2092C43.2141 20.6138 42.6397 20.2222 42 20.2222H35.4141L38.6672 14.8003C38.9555 14.3198 38.9631 13.7213 38.687 13.2336C38.4109 12.7459 37.8938 12.4445 37.3333 12.4445H23.3333Z" fill="#022C22"></path>
</mask>
<g mask="url(#mask0_210_244)">
<rect x="9.33337" y="12.8334" width="36.1667" height="33.8333" fill="#022C22"></rect>
</g>
</svg>
<span class="block text-2xl font-medium text-white mt-8 mb-4">Basic</span>
<span class="block text-6xl text-white mb-6">Custom</span>
<p class="text-lg text-white opacity-80 mb-8">Tailored for businesses with significant energy demands</p>
<a href="#" class="inline-flex group w-full py-4 px-6 items-center justify-center text-lg font-medium text-black border border-lime-500 hover:border-white bg-lime-500 hover:bg-white rounded-full transition duration-200">
<span class="mr-2">Get started</span>
<span class="transform group-hover:translate-x-1 transition-transform duration-200">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.25 10H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.5 4.75L15.75 10L10.5 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</a>
</div>
<div>
<span class="block text-xl font-medium mb-6">What’s included</span>
<ul>
<li class="flex mb-4 items-center">
<span class="flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#022C22"></rect>
<path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="ml-3">Customizable subscription options</span>
</li>
<li class="flex mb-4 items-center">
<span class="flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#022C22"></rect>
<path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="ml-3">Dedicated technical support and assistance</span>
</li>
<li class="flex items-center">
<span class="flex-shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" rx="10" fill="#022C22"></rect>
<path d="M14.8 6.40002L8.19995 13L5.19995 10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="ml-3">Advanced analytics and 24/7 priority support</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
