Home
Michael Andreuzza
Pricing Table with Tailwind CSS and Alpinejs

Pricing Table with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us,Service rates, Subscription plans

Feature showcase Pricing

Author Michael Andreuzza

2.4k

11

Fork Fullscreen

<script defer="" src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section x-data="{annual: false}" class="relative flex flex-col overflow-hidden overflow-y-auto h-svh items-center justify-center bg-zinc-950">
  <img class="absolute w-full h-full lg:w-auto lg:h-auto" src="https://tutorials.lexingtonthemes.com/images/blueBlob.svg" alt="alt text"> 
 <div class="relative items-center px-8 py-12 mx-auto md:px-12  max-w-7xl">
  
  <div class="md:max-w-sm mx-auto">
   
   <div class="inline-flex w-full border rounded-full mt-6 overflow-hidden border-white/20 p-0.5 z-0">
     <button class="font-medium rounded-full transition h-12 w-full py-2 block px-8 text-xs bg-black/50 text-white" :class="{ '  bg-black/50  text-white': !annual, ' text-white': annual }" @click="annual = false" type="button">
     Monthly
    </button>  <button class="font-medium rounded-full transition h-12 w-full py-2 block px-8 text-xs border-white text-white" :class="{ '  bg-black/50  text-white': annual, ' text-white': !annual }" @click="annual = true" type="button">
     Annual
    </button>
   </div>
  </div>
  
  <div class="grid grid-cols-1 gap-2 mt-12 lg:grid-cols-3">
   <div class="flex flex-col justify-between p-8 shadow-2xl  rounded-3xl bg-black/20 backdrop-blur-3xl backdrop-blur-3xl shadow-gray-900/50">
    <div>
     <div class="flex flex-col justify-between gap-3">
      <p class="text-xl font-medium tracking-tight text-white"> Starter Pack </p>
      <p class="text-white"> <span class="text-2xl tracking-tight"> <span x-show="!annual">$15</span> <span x-show="annual" style="display: none;">$8</span> </span> <span class="text-base font-medium">
        /m
        <span x-show="annual" style="display: none;">
         (billed annually)
        </span> </span> </p>
     </div>
     <p class="mt-8 text-xs text-white/80">This plan is ideal for individual users and hobbyists who are looking for essential functionalities to support their projects.</p>
     <ul class="flex flex-col order-last mt-8 text-sm text-white gap-y-3">
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> 5 mb/PDF </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> 75 pages/PDF </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> 10 messages/Day </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> Up to 3 PDFs </li>
      <li class="inline-flex items-center gap-2 opacity-50"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M10 10l4 4m0 -4l-4 4"></path>
       </svg> Gpt-3.5-turbo model </li>
      <li class="inline-flex items-center gap-2 opacity-50"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M10 10l4 4m0 -4l-4 4"></path>
       </svg> Test mode </li>
      <li class="inline-flex items-center gap-2 opacity-50"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M10 10l4 4m0 -4l-4 4"></path>
       </svg> Doc summary </li>
     </ul>
    </div>
    <div class="flex mt-6"> <a href="#_" title="Starter Pack" aria-label="get started" class="flex items-center justify-center w-full  h-12 px-4 py-2 text-base font-medium transition-all duration-200 rounded-xl text-white bg-black/50 hover:bg-black/20 ">
      Get started
     </a> </div>
   </div>
   <div class="flex flex-col justify-between p-8 shadow-2xl  rounded-3xl bg-black/50 backdrop-blur-3xl backdrop-blur-3xl shadow-gray-900/50">
    <div>
     <div class="flex flex-col justify-between gap-3">
      <p class="text-xl font-medium tracking-tight text-white"> Silver Surfer </p>
      <p class="text-white"> <span class="text-2xl tracking-tight"> <span x-show="!annual">$25</span> <span x-show="annual" style="display: none;">$20</span> </span> <span class="text-base font-medium">
        /m
        <span x-show="annual" style="display: none;">
         (billed annually)
        </span> </span> </p>
     </div>
     <p class="mt-8 text-xs text-white/80">If you're a small business or a startup, this plan is designed to cater to your needs. It offers a balance of essential features.</p>
     <ul class="flex flex-col order-last mt-8 text-sm text-white gap-y-3">
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> 10 mb/PDF </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> 150 pages/PDF </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> 25 messages/Day </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> Up to 5 PDFs </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> Gpt-3.5-turbo model </li>
      <li class="inline-flex items-center gap-2 opacity-50"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M10 10l4 4m0 -4l-4 4"></path>
       </svg> Test mode </li>
      <li class="inline-flex items-center gap-2 opacity-50"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M10 10l4 4m0 -4l-4 4"></path>
       </svg> Doc summary </li>
     </ul>
    </div>
    <div class="flex mt-6"> <a href="#_" title="Silver Surfer" aria-label="get started" class="flex items-center justify-center w-full  h-12 px-4 py-2 text-base font-medium transition-all duration-200 rounded-xl text-black bg-white hover:bg-white/5 hover:text-white ">
      Get started
     </a> </div>
   </div>
   <div class="flex flex-col justify-between p-8 shadow-2xl  rounded-3xl bg-black/20 backdrop-blur-3xl backdrop-blur-3xl shadow-gray-900/50">
    <div>
     <div class="flex flex-col justify-between gap-3">
      <p class="text-xl font-medium tracking-tight text-white"> Golden Unicorn </p>
      <p class="text-white"> <span class="text-2xl tracking-tight"> <span x-show="!annual">$50</span> <span x-show="annual" style="display: none;">$40</span> </span> <span class="text-base font-medium">
        /m
        <span x-show="annual" style="display: none;">
         (billed annually)
        </span> </span> </p>
     </div>
     <p class="mt-8 text-xs text-white/80">Tailored for medium-sized businesses, this plan offers advanced tools and features to support your growing demands.</p>
     <ul class="flex flex-col order-last mt-8 text-sm text-white gap-y-3">
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> 32 mb/PDF </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> 1500 pages/PDF </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> 1000 messages/Day </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> Up to 50 PDFs </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> Gpt-3.5-turbo-16k model </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> Test mode </li>
      <li class="inline-flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l2 2l4 -4"></path>
       </svg> Doc summary </li>
     </ul>
    </div>
    <div class="flex mt-6"> <a href="#_" title="Golden Unicorn" aria-label="get started" class="flex items-center justify-center w-full  h-12 px-4 py-2 text-base font-medium transition-all duration-200 rounded-xl text-white bg-black/50 hover:bg-black/20 ">
      Get started
     </a> </div>
   </div>
  </div> 
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8 ">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to create an interactive pricing table with Astro, Tailwind CSS, and Alpine.js
      </p>
      <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/how-to-create-interactive-pricing-table-astro-tailwind-alpine/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/pricing-table/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</section>

Resources1× 0.5× 0.25×Rerun

Related Examples

Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

2 months ago

752
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

11 months ago

2.7k
Subscription Plan Section
Clean and modern Subscription Plan section

Author:
Nikolai

1 year ago

2k
Pricing card with CTA

Author:
Laurits

2 years ago

9k
Responsive Features Section

Author:
ᴀʀ!ᴀ

1 week ago

58
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

15.3k
Facts
Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color. [VIEW-NOTICE] If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

Author:
Matti

4 months ago

805
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

9 months ago

1.6k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

8.9k
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

8 months ago

1.5k
Horizontal pricing card

Author:
Anonymous

1 month ago

72
Pricing section with tailwind css

Author:
Task Master

2 years ago

10.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1