Component:

Pricing Product Light

Name: Pricing Product Light
Availability: InStock

Free

Tags: Pricing Page Section Content Sale Product Light

Colors:

Description:

This carefully crafted Pricing component is perfect for Product landing pages, featuring a Light design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@type: Pricing
@industry: Product
@style: Light
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-blue-100: #dbeafe;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;

  /* Container */
  --container-max-width: 80rem; /* max-w-7xl */
  --content-max-width: 48rem; /* max-w-3xl */
  --header-max-width: 42rem; /* max-w-2xl */
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Styles */
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* Component Styles */
.pricing-section {
  background-color: var(--color-gray-50);
  padding: var(--spacing-16) var(--spacing-4);
}

.pricing-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.pricing-header {
  text-align: center;
  max-width: var(--header-max-width);
  margin: 0 auto;
  margin-bottom: var(--spacing-10);
}

.pricing-title {
  font-size: 1.875rem;
  font-weight: 500;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-4);
}

.pricing-description {
  font-size: 1rem;
  color: var(--color-gray-600);
}

.billing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-12);
}

.billing-label {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.billing-discount {
  color: var(--color-blue-600);
}

.toggle-button {
  position: relative;
  display: inline-flex;
  height: 1.5rem;
  width: 2.75rem;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-white);
  transition: background-color 0.2s ease-in-out;
}

.toggle-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-blue-100);
}

.toggle-slider {
  pointer-events: none;
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  transform: translate(1px, 1px);
  border-radius: 9999px;
  background-color: var(--color-gray-800);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-in-out;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.pricing-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pricing-card--featured {
  border-color: var(--color-blue-600);
}

.pricing-card--featured:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.popular-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background-color: var(--color-blue-600);
  padding: var(--spacing-1) var(--spacing-4);
  font-size: 0.75rem;
  color: var(--color-white);
}

.plan-header {
  margin-bottom: var(--spacing-6);
}

.plan-name {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-gray-800);
}

.plan-description {
  margin-top: var(--spacing-2);
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.plan-price {
  margin-top: var(--spacing-4);
  display: flex;
  align-items: baseline;
}

.price-amount {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--color-gray-800);
}

.price-period {
  margin-left: var(--spacing-1);
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.feature-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-blue-600);
}

.feature-text {
  margin-left: var(--spacing-3);
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.plan-button {
  display: block;
  width: 100%;
  margin-top: var(--spacing-8);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: all 0.15s ease;
}

.plan-button--outline {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-800);
}

.plan-button--outline:hover {
  background-color: var(--color-gray-50);
}

.plan-button--primary {
  background-color: var(--color-blue-600);
  color: var(--color-white);
  border: none;
}

.plan-button--primary:hover {
  background-color: var(--color-blue-700);
}

.plan-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-blue-100);
}

.princing-faq-section {
  margin-top: var(--spacing-16);
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.princing-faq-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-gray-800);
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.princing-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.princing-faq-item {
  background-color: var(--color-white);
  border-radius: 0.5rem;
  padding: var(--spacing-6);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.princing-faq-question {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-2);
}

.princing-faq-answer {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .pricing-section {
    padding: var(--spacing-24) var(--spacing-6);
  }

  .pricing-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pricing-section {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>

<section class="pricing-section" aria-labelledby="pricing-heading">
  <div class="pricing-container">
    <!-- Header -->
    <div class="pricing-header">
      <h2 id="pricing-heading" class="pricing-title">
        Choose the perfect plan for your needs
      </h2>
      <p class="pricing-description">
        All plans include a 14-day free trial. No credit card required.
      </p>
    </div>

    <!-- Toggle Annual/Monthly -->
    <div class="billing-toggle">
      <span class="billing-label">Monthly</span>
      <button 
        type="button" 
        class="toggle-button" 
        role="switch" 
        aria-checked="false" 
        id="billing-toggle"
      >
        <span class="toggle-slider" id="billing-toggle-button"></span>
      </button>
      <span class="billing-label">Annual <span class="billing-discount">(Save 20%)</span></span>
    </div>

    <!-- Pricing Cards -->
    <div class="pricing-grid">
      <!-- Basic Plan -->
      <div class="pricing-card">
        <div class="plan-header">
          <h3 class="plan-name">Basic</h3>
          <p class="plan-description">Perfect for individuals and small projects</p>
          <div class="plan-price">
            <span class="price-amount" id="basic-price">$19</span>
            <span class="price-period">/month</span>
          </div>
        </div>
        <ul class="feature-list">
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">1 product</span>
          </li>
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">Basic analytics</span>
          </li>
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">48-hour support response</span>
          </li>
        </ul>
        <a href="#" class="plan-button plan-button--outline" aria-label="Get started with Basic plan">Get started</a>
      </div>

      <!-- Professional Plan (Featured) -->
      <div class="pricing-card pricing-card--featured">
        <div class="popular-badge">Most popular</div>
        <div class="plan-header">
          <h3 class="plan-name">Professional</h3>
          <p class="plan-description">For growing businesses and teams</p>
          <div class="plan-price">
            <span class="price-amount" id="pro-price">$49</span>
            <span class="price-period">/month</span>
          </div>
        </div>
        <ul class="feature-list">
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">5 products</span>
          </li>
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">Advanced analytics</span>
          </li>
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">24-hour support response</span>
          </li>
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">API access</span>
          </li>
        </ul>
        <a href="#" class="plan-button plan-button--primary" aria-label="Get started with Professional plan">Get started</a>
      </div>

      <!-- Enterprise Plan -->
      <div class="pricing-card">
        <div class="plan-header">
          <h3 class="plan-name">Enterprise</h3>
          <p class="plan-description">Custom solutions for large organizations</p>
          <div class="plan-price">
            <span class="price-amount" id="enterprise-price">$99</span>
            <span class="price-period">/month</span>
          </div>
        </div>
        <ul class="feature-list">
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">Unlimited products</span>
          </li>
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">Custom analytics dashboard</span>
          </li>
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">Priority support</span>
          </li>
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">Dedicated account manager</span>
          </li>
          <li class="feature-item">
            <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="feature-text">Custom integrations</span>
          </li>
        </ul>
        <a href="#" class="plan-button plan-button--outline" aria-label="Contact sales for Enterprise plan">Contact sales</a>
      </div>
    </div>

    <!-- FAQ Section -->
    <div class="princing-faq-section">
      <h3 class="princing-faq-title">Frequently Asked Questions</h3>
      <div class="princing-faq-list">
        <div class="princing-faq-item">
          <h4 class="princing-faq-question">Can I switch plans later?</h4>
          <p class="princing-faq-answer">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p>
        </div>
        <div class="princing-faq-item">
          <h4 class="princing-faq-question">Is there a setup fee?</h4>
          <p class="princing-faq-answer">No, there are no setup fees or hidden costs. You only pay the advertised price for your selected plan.</p>
        </div>
        <div class="princing-faq-item">
          <h4 class="princing-faq-question">What payment methods do you accept?</h4>
          <p class="princing-faq-answer">We accept all major credit cards, PayPal, and bank transfers for annual plans.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const toggle = document.getElementById('billing-toggle');
  const toggleButton = document.getElementById('billing-toggle-button');
  const basicPrice = document.getElementById('basic-price');
  const proPrice = document.getElementById('pro-price');
  const enterprisePrice = document.getElementById('enterprise-price');
  
  let isAnnual = false;
  
  const prices = {
    monthly: {
      basic: '$19',
      pro: '$49',
      enterprise: '$99'
    },
    annual: {
      basic: '$15',
      pro: '$39',
      enterprise: '$79'
    }
  };
  
  toggle.addEventListener('click', function() {
    isAnnual = !isAnnual;
    toggleButton.style.transform = isAnnual ? 'translateX(100%)' : 'translateX(1px)';
    toggle.setAttribute('aria-checked', isAnnual);
    
    // Update prices
    basicPrice.textContent = isAnnual ? prices.annual.basic : prices.monthly.basic;
    proPrice.textContent = isAnnual ? prices.annual.pro : prices.monthly.pro;
    enterprisePrice.textContent = isAnnual ? prices.annual.enterprise : prices.monthly.enterprise;
  });
});
</script>


                <!--
@type: Pricing
@industry: Product
@style: Light
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-50 py-16 sm:py-24" aria-labelledby="pricing-heading">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="text-center max-w-2xl mx-auto mb-10">
      <h2 id="pricing-heading" class="text-3xl font-medium text-gray-800 sm:text-4xl mb-4">
        Choose the perfect plan for your needs
      </h2>
      <p class="text-base text-gray-600">
        All plans include a 14-day free trial. No credit card required.
      </p>
    </div>

    <!-- Toggle Annual/Monthly -->
    <div class="flex justify-center items-center gap-4 mb-12">
      <span class="text-sm text-gray-600">Monthly</span>
      <button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border border-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-100 bg-white" role="switch" aria-checked="false" id="billing-toggle">
        <span class="translate-x-px translate-y-px pointer-events-none inline-block h-5 w-5 transform rounded-full bg-gray-800 shadow ring-0 transition duration-200 ease-in-out" id="billing-toggle-button"></span>
      </button>
      <span class="text-sm text-gray-600">Annual <span class="text-blue-600">(Save 20%)</span></span>
    </div>

    <!-- Pricing Cards -->
    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Basic Plan -->
      <div class="relative flex flex-col rounded-2xl bg-white border border-gray-200 p-8 shadow-sm hover:shadow transition duration-300">
        <div class="mb-6">
          <h3 class="text-xl font-normal text-gray-800">Basic</h3>
          <p class="mt-2 text-sm text-gray-600">Perfect for individuals and small projects</p>
          <div class="mt-4 flex items-baseline">
            <span class="text-4xl font-medium tracking-tight text-gray-800" id="basic-price">$19</span>
            <span class="ml-1 text-sm text-gray-600">/month</span>
          </div>
        </div>
        <ul role="list" class="space-y-4 flex-1">
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">1 product</span>
          </li>
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">Basic analytics</span>
          </li>
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">48-hour support response</span>
          </li>
        </ul>
        <a href="#" class="mt-8 block w-full rounded-lg border border-gray-200 bg-white px-6 py-3 text-center text-sm font-medium text-gray-800 hover:bg-gray-50 focus:ring-2 focus:ring-blue-100 transition duration-150" aria-label="Get started with Basic plan">Get started</a>
      </div>

      <!-- Professional Plan (Featured) -->
      <div class="relative flex flex-col rounded-2xl bg-white border border-blue-600 p-8 shadow-sm hover:shadow-md transition duration-300">
        <div class="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center rounded-full bg-blue-600 px-4 py-1 text-xs text-white">Most popular</div>
        <div class="mb-6">
          <h3 class="text-xl font-normal text-gray-800">Professional</h3>
          <p class="mt-2 text-sm text-gray-600">For growing businesses and teams</p>
          <div class="mt-4 flex items-baseline">
            <span class="text-4xl font-medium tracking-tight text-gray-800" id="pro-price">$49</span>
            <span class="ml-1 text-sm text-gray-600">/month</span>
          </div>
        </div>
        <ul role="list" class="space-y-4 flex-1">
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">5 products</span>
          </li>
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">Advanced analytics</span>
          </li>
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">24-hour support response</span>
          </li>
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">API access</span>
          </li>
        </ul>
        <a href="#" class="mt-8 block w-full rounded-lg bg-blue-600 px-6 py-3 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-100 transition duration-150" aria-label="Get started with Professional plan">Get started</a>
      </div>

      <!-- Enterprise Plan -->
      <div class="relative flex flex-col rounded-2xl bg-white border border-gray-200 p-8 shadow-sm hover:shadow transition duration-300">
        <div class="mb-6">
          <h3 class="text-xl font-normal text-gray-800">Enterprise</h3>
          <p class="mt-2 text-sm text-gray-600">Custom solutions for large organizations</p>
          <div class="mt-4 flex items-baseline">
            <span class="text-4xl font-medium tracking-tight text-gray-800" id="enterprise-price">$99</span>
            <span class="ml-1 text-sm text-gray-600">/month</span>
          </div>
        </div>
        <ul role="list" class="space-y-4 flex-1">
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">Unlimited products</span>
          </li>
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">Custom analytics dashboard</span>
          </li>
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">Priority support</span>
          </li>
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">Dedicated account manager</span>
          </li>
          <li class="flex items-center">
            <svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="ml-3 text-sm text-gray-600">Custom integrations</span>
          </li>
        </ul>
        <a href="#" class="mt-8 block w-full rounded-lg border border-gray-200 bg-white px-6 py-3 text-center text-sm font-medium text-gray-800 hover:bg-gray-50 focus:ring-2 focus:ring-blue-100 transition duration-150" aria-label="Contact sales for Enterprise plan">Contact sales</a>
      </div>
    </div>

    <!-- FAQ Section -->
    <div class="mt-16 max-w-3xl mx-auto">
      <h3 class="text-2xl font-medium text-gray-800 text-center mb-8">Frequently Asked Questions</h3>
      <div class="space-y-6">
        <div class="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
          <h4 class="text-lg font-normal text-gray-800 mb-2">Can I switch plans later?</h4>
          <p class="text-sm text-gray-600">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p>
        </div>
        <div class="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
          <h4 class="text-lg font-normal text-gray-800 mb-2">Is there a setup fee?</h4>
          <p class="text-sm text-gray-600">No, there are no setup fees or hidden costs. You only pay the advertised price for your selected plan.</p>
        </div>
        <div class="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
          <h4 class="text-lg font-normal text-gray-800 mb-2">What payment methods do you accept?</h4>
          <p class="text-sm text-gray-600">We accept all major credit cards, PayPal, and bank transfers for annual plans.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const toggle = document.getElementById('billing-toggle');
  const toggleButton = document.getElementById('billing-toggle-button');
  const basicPrice = document.getElementById('basic-price');
  const proPrice = document.getElementById('pro-price');
  const enterprisePrice = document.getElementById('enterprise-price');
  
  let isAnnual = false;
  
  const prices = {
    monthly: {
      basic: '$19',
      pro: '$49',
      enterprise: '$99'
    },
    annual: {
      basic: '$15',
      pro: '$39',
      enterprise: '$79'
    }
  };
  
  toggle.addEventListener('click', function() {
    isAnnual = !isAnnual;
    toggleButton.style.transform = isAnnual ? 'translateX(100%)' : 'translateX(0)';
    toggle.setAttribute('aria-checked', isAnnual);
    
    // Update prices
    basicPrice.textContent = isAnnual ? prices.annual.basic : prices.monthly.basic;
    proPrice.textContent = isAnnual ? prices.annual.pro : prices.monthly.pro;
    enterprisePrice.textContent = isAnnual ? prices.annual.enterprise : prices.monthly.enterprise;
  });
});
</script>

Pricing Product Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions