A growing set of elements using daisyUI, Tailwind, and Alpine.js
Ready to copy and paste tailwind and Alpine.js components with 30+ themes for any project. Based on the awesome windstatic and modded for daisyUI. Switch themes above to see them all!
Copied!
Pricing
If you could kick the person in the pants responsible for most of your trouble, you wouldn't sit for a month
Basic plan
Suitable for those that want to grow steadily.
$ 15.00
per month
-
Connect unlimited websites -
15 bank accounts -
Track 200 credit cards -
Analytics support -
Export 24 months data
Basic plan
Suitable for those that want to grow steadily.
$ 15.00
per month
-
Connect unlimited websites -
15 bank accounts -
Track 200 credit cards -
Analytics support -
Export 24 months data
Advanced plan Popular
Suitable for those that want to grow.
$ 35.00
per month
-
Connect unlimited websites -
15 bank accounts -
Track 200 credit cards -
Analytics support -
Export 24 months data
<section aria-labelledby="pricing" id="pricing">
<div x-data="{annual: false}" class="items-center px-8 py-12 mx-auto md:px-12 lg:px-16 xl:px-12 2xl:max-w-7xl">
<div class="max-w-xl mx-auto space-y-2 text-center lg:max-w-none">
<div class="justify-center w-full text-center lg:p-10 max-auto">
<div class="justify-center w-full mx-auto">
<p class="mt-8 text-5xl font-medium tracking-tighter">
Pricing
</p>
<p class="max-w-xl mx-auto mt-4 text-lg tracking-tight">
If you could kick the person in the pants responsible for most of your
trouble, you wouldn't sit for a month
</p>
</div>
</div>
<div class="relative z-0 inline-flex overflow-hidden border-2 border-primary divide-x divide-primary rounded-full mt-12"> <button class="block w-full px-8 py-2 text-sm font-medium transition rounded-l-full" :class="annual == false ? 'bg-primary text-primary-content' : ''" @click="annual = false" type="button">
Monthly
</button> <button class="block w-full px-8 py-2 text-sm font-medium transition rounded-r-full" :class="annual == true ? 'bg-primary text-primary-content' : ''" @click="annual = true" type="button">
Annual
</button> </div>
</div>
<div class="relative my-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 max-w-7xl lg:mx-auto xl:grid-cols-3">
<div>
<div class="grid items-center justify-center w-full grid-cols-1 p-6 bg-base-200 lg:p-8 rounded-t-3xl">
<div>
<h2 class="text-lg text-base-content">Basic plan</h2>
<p class="mt-4 text-sm text-base-content">
Suitable for those that want to grow steadily.
</p>
</div>
<div class="flex-col mt-8">
<p class="text-5xl font-light tracking-tight text-base-content">
$
<span x-text="annual ? '8.00' : '15.00'">15.00</span>
</p>
<p class="text-sm text-base-content">
per month
<span x-show="annual" style="display: none;">
(billed annually)
</span>
</p>
</div>
</div>
<div class="px-6 pb-8 bg-base-200 border-t rounded-b-3xl">
<div class="grid grid-cols-1 lg:gap-12">
<ul role="list" class="flex flex-col order-last mt-10 text-sm text-base-content gap-y-3">
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Connect unlimited websites </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> 15 bank accounts </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Track 200 credit cards </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Analytics support </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Export 24 months data </span> </li>
</ul>
</div>
<div class="flex"> <a class="items-center justify-center w-full px-6 py-2.5 mt-8 text-center text-primary-content duration-200 bg-primary border-2 border-primary rounded-full nline-flex hover:bg-transparent hover:border-primary hover:text-primary focus:outline-none focus-visible:outline-black text-sm focus-visible:ring-black" aria-label="Big fish tier" href="/register">
Subscribe
</a> </div>
</div>
</div>
<div>
<div class="grid items-center justify-center w-full grid-cols-1 p-6 bg-base-200 lg:p-8 rounded-t-3xl">
<div>
<h2 class="text-lg text-base-content">Basic plan</h2>
<p class="mt-4 text-sm text-base-content">
Suitable for those that want to grow steadily.
</p>
</div>
<div class="flex-col mt-8">
<p class="text-5xl font-light tracking-tight text-base-content">
$
<span x-text="annual ? '12.00' : '15.00'">15.00</span>
</p>
<p class="text-sm text-base-content">
per month
<span x-show="annual" style="display: none;">
(billed annually)
</span>
</p>
</div>
</div>
<div class="px-6 pb-8 bg-base-200 border-t rounded-b-3xl">
<div class="grid grid-cols-1 lg:gap-12">
<ul role="list" class="flex flex-col order-last mt-10 text-sm text-base-content gap-y-3">
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Connect unlimited websites </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> 15 bank accounts </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Track 200 credit cards </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Analytics support </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Export 24 months data </span> </li>
</ul>
</div>
<div class="flex"> <a class="items-center justify-center w-full px-6 py-2.5 mt-8 text-center text-primary-content duration-200 bg-primary border-2 border-primary rounded-full inline-flex hover:bg-transparent hover:border-primary hover:text-primary focus:outline-none focus-visible:outline-black text-sm focus-visible:ring-black" aria-label="Big fish tier" href="/register">
Subscribe
</a> </div>
</div>
</div>
<div>
<div class="grid items-center justify-center w-full grid-cols-1 p-6 bg-primary lg:p-8 rounded-t-3xl">
<div>
<h2 class="text-lg text-primary-content">
Advanced plan
<span class="inline-flex items-center ml-3 px-2.5 py-0.5 rounded-xl text-xs font-medium bg-secondary text-secondary-content">
Popular
</span>
</h2>
<p class="mt-4 text-sm text-primary-content">
Suitable for those that want to grow.
</p>
</div>
<div class="flex-col mt-8">
<p class="text-5xl font-light tracking-tight text-primary-content">
$
<span x-text="annual ? '28.00' : '35.00'">35.00</span>
</p>
<p class="text-sm text-primary-content">
per month
<span x-show="annual" style="display: none;">
(billed annually)
</span>
</p>
</div>
</div>
<div class="px-6 pb-8 bg-primary border-t rounded-b-3xl border-primary-content">
<div class="grid grid-cols-1 lg:gap-12">
<ul role="list" class="flex flex-col order-last mt-10 text-sm text-primary-content gap-y-3">
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Connect unlimited websites </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> 15 bank accounts </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Track 200 credit cards </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Analytics support </span> </li>
<li class="flex items-center"> <ion-icon class="w-4 h-4 md hydrated" name="checkmark-outline" role="img" aria-label="checkmark outline"></ion-icon> <span class="ml-4"> Export 24 months data </span> </li>
</ul>
</div>
<div class="flex"> <a class="items-center justify-center w-full px-6 py-2.5 mt-8 text-center text-base-content duration-200 bg-base-200 border-2 border-base-200 rounded-full inline-flex hover:bg-transparent hover:border-white hover:text-white focus:outline-none focus-visible:outline-white text-sm focus-visible:ring-white" aria-label="Indie hacker tier" href="/register">
Subscribe
</a> </div>
</div>
</div>
</div>
</div>
</section> Copied!
I am a short heading
If you could kick the person in the pants responsible for most of your trouble, you wouldn't sit for a month
<section>
<div class="items-center px-8 py-12 mx-auto max-w-7xl lg:px-16 md:px-12 lg:py-24">
<div class="justify-center w-full text-center lg:p-10 max-auto">
<div class="justify-center w-full mx-auto">
<p class="mt-8 text-5xl font-medium tracking-tighter">
I am a short heading
</p>
<p class="max-w-xl mx-auto mt-4 text-lg tracking-tight">
If you could kick the person in the pants responsible for most of your
trouble, you wouldn't sit for a month
</p>
</div>
<div class="flex flex-col items-center justify-center max-w-xl gap-3 mx-auto mt-10 lg:flex-row"> <a href="" class="items-center justify-center w-full px-6 py-2.5 text-center text-primary-content duration-200 bg-primary hover:bg-transparent hover:border-primary hover:text-primary border-2 border-primary rounded-full inline-flex focus:outline-none lg:w-auto focus-visible:outline-black text-sm focus-visible:ring-black">
Button
</a> <a href="" class="inline-flex items-center justify-center text-sm font-semibold text-primary duration-200 link link-hover focus:outline-none focus-visible:outline-gray-600">
Learn more →
</a> </div>
</div>
</div>
</section> Copied!
I am a short heading
Whether you're a beginner or an experienced programmer, our SaaS product offers the tools you need to be successful.
Developer experience
Plus, our platform is constantly evolving to meet the changing
needs of the tech industry, ensuring you'll always be ahead.
Designers go-to app
Plus, our platform is constantly evolving to meet the changing
needs of the tech industry, ensuring you'll always be ahead.
Easy onboarding
Plus, our platform is constantly evolving to meet the changing
needs of the tech industry, ensuring you'll always be ahead.
<section>
<div class="items-center w-full px-5 py-24 mx-auto md:px-12 lg:px-16 max-w-7xl">
<div class="text-left">
<div class="items-center mx-auto lg:inline-flex">
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-24">
<div>
<p class="text-2xl font-medium tracking-tight sm:text-4xl">
I am a short heading
</p>
</div>
<div class="lg:ml-auto">
<p class="mt-4 text-lg tracking-tight lg:mt-0">
Whether you're a beginner or an experienced programmer, our SaaS
product offers the tools you need to be successful.
</p>
</div>
</div>
</div>
</div>
<div class="relative items-center w-full mx-auto mt-12"> <img class="object-cover object-center w-full" src="rectangle1.svg" class="" alt=""> </div>
<div>
<div class="pt-12 mx-auto lg:max-w-7xl">
<dl class="grid grid-cols-1 gap-6 space-y-0 lg:gap-24 lg:grid-cols-3">
<div>
<div>
<p class="text-lg font-medium leading-6">
Developer experience
</p>
</div>
<div class="mt-2 text-base ">
Plus, our platform is constantly evolving to meet the changing
needs of the tech industry, ensuring you'll always be ahead.
</div>
</div>
<div>
<div>
<p class="text-lg font-medium leading-6">
Designers go-to app
</p>
</div>
<div class="mt-2 text-base ">
Plus, our platform is constantly evolving to meet the changing
needs of the tech industry, ensuring you'll always be ahead.
</div>
</div>
<div>
<div>
<p class="text-lg font-medium leading-6">
Easy onboarding
</p>
</div>
<div class="mt-2 text-base ">
Plus, our platform is constantly evolving to meet the changing
needs of the tech industry, ensuring you'll always be ahead.
</div>
</div>
</dl>
</div>
</div>
</div>
</section>