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.7k

12

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

4 months ago

1.2k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

4.4k
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

16.1k
Facts
A simple facts overview

Author:
Matti

6 months ago

808
Pricing cards in pair

Author:
Anonymous

1 year ago

7.1k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

9.6k
Hotel rooms
A simple room overview

Author:
Matti

5 months ago

842
Pricing card
basic pricing card with single price

Author:
Amit Pachange

1 year ago

10.3k
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

2.2k
Card
Card

Author:
Aman kumar

1 year ago

1.1k
Pricing cards in pair

Author:
Nour Haider

2 years ago

13k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

2 years ago

13.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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