Pricing Table with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind v3.4. 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

Tailwind v3.4 4.1k 13

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.

SHARIFUL ISLAM

1 year ago

3k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Horiizontal Pricing Card
Single pricing plan section

ReddRadar.com

1 year ago

1.1k
Feature, Showcase

Matti

1 year ago

1.6k
Responsive Features section

Piet Vriend

4 years ago

11.7k
Layout switcher with tailwindcss and alpinejs

Michael Andreuzza

2 years ago

1.5k
Service section

inbarajan P

2 years ago

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

Akram Khan

2 years ago

3.2k
Feature display cards (grid layout)

Ronald Otieno

2 years ago

3.6k
Pricing cards - with features list
Flexible Pricing Plans Cards

Anonymous

2 years ago

4.9k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Rathanak Phan

1 year ago

1.1k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Andreas Wagner

3 years ago

15.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.