Two-Plan Pricing Section with Tailwind CSS

<section class="w-full max-w-6xl mr-auto ml-auto pt-6 pr-4 pb-6 pl-4">
  <div class="grid md:grid-cols-2 gap-6 items-stretch">
    <!-- Solo Card -->
    <article
      class="relative bg-white rounded-2xl shadow-sm ring-1 ring-black/5 p-6 overflow-hidden transition hover:shadow-lg">


      <div class="flex items-center justify-between">
        <div class="text-sm font-medium text-gray-600 tracking-tight">Solo Creator</div>
        <div class="text-xs uppercase text-gray-500 flex items-center gap-1.5">
          <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-3.5 h-3.5"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
              </span>
          Popular
        </div>
      </div>

      <div class="mt-3">
        <h2 class="text-2xl sm:text-3xl md:text-2xl font-semibold tracking-tight">Designed for independent makers</h2>
        <p class="text-sm text-gray-600 mt-1">Everything you need to ship fast and look professional.</p>
      </div>

      <div class="mt-5 flex items-baseline gap-2">
        <span id="priceAValue" class="text-5xl font-semibold tracking-tight">$29</span>
        <span id="priceADuration" class="text-sm text-gray-600" aria-live="polite">/mo</span>
      </div>

      <div class="mt-4 flex items-center gap-3">
        <button class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-white shadow-sm hover:bg-black transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/40" aria-label="Start Solo plan">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket w-4 h-4"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class=""></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" class=""></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path></svg>
              <span class="font-medium">Start Solo</span>
            </button>
        <button class="inline-flex items-center gap-2 px-4 py-3 rounded-xl bg-white text-gray-900 ring-1 ring-black/10 hover:bg-gray-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20" aria-label="View features">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="list-checks" class="lucide lucide-list-checks w-4 h-4"><path d="m3 17 2 2 4-4" class=""></path><path d="m3 7 2 2 4-4" class=""></path><path d="M13 6h8" class=""></path><path d="M13 12h8" class=""></path><path d="M13 18h8" class=""></path></svg>
              <span class="text-sm font-medium">View features</span>
            </button>
      </div>

      <div class="mt-5 h-px bg-gray-100"></div>

      <ul class="mt-4 space-y-2.5 text-gray-800 text-sm">
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          For solo creators, freelancers &amp; consultants
        </li>
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Web editor, mockups &amp; asset library (5,000+ items)
        </li>
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Unlimited drafts &amp; 10 active projects
        </li>
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          AI assist for copy &amp; layout (200 credits/mo)
        </li>
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 text-emerald-600 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Email support 24/7
        </li>
      </ul>
    </article>

    <!-- Team Card -->
    <article
      class="relative overflow-hidden ring-1 ring-black/5 text-white bg-gray-900 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/046f0e74-64ae-4e71-ae2d-67940e33e9bc_1600w.jpg)] bg-cover rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-sm"
      style="">
      <div class="flex items-center justify-between">
        <div class="text-sm font-medium/relaxed" style="opacity:.95;">Scale Team</div>
        <span class="inline-flex items-center gap-1 text-xs uppercase border border-white/70 rounded px-2 py-1" aria-label="Top pick" style="opacity:.95;">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="crown" class="lucide lucide-crown w-3.5 h-3.5"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" class=""></path><path d="M5 21h14" class=""></path></svg>
              Most Popular
            </span>
      </div>

      <div class="mt-3">
        <h2 class="text-2xl sm:text-3xl md:text-2xl font-semibold tracking-tight">Built for teams and agencies</h2>
        <p class="text-sm text-white/85 mt-1">Collaboration, permissions, and performance at scale.</p>
      </div>

      <div class="mt-5 flex items-baseline gap-2">
        <span id="priceBValue" class="text-5xl font-semibold tracking-tight">$79</span>
        <span id="priceBDuration" class="text-sm text-white/90" aria-live="polite">/seat/mo</span>
      </div>

      <div class="mt-4 flex items-center gap-3">
        <button class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-black text-white shadow-sm hover:bg-gray-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60" aria-label="Start Team plan">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-4 h-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
              <span class="font-medium">Start Team</span>
            </button>
        <button class="inline-flex gap-2 ring-1 ring-white/20 hover:bg-white/15 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 text-white bg-white/10 rounded-xl pt-3 pr-4 pb-3 pl-4 backdrop-blur-lg items-center" aria-label="Talk to sales">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="messages-square" class="lucide lucide-messages-square w-4 h-4"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" class=""></path><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1" class=""></path></svg>
              <span class="text-sm font-medium">Talk to sales</span>
            </button>
      </div>

      <div class="mt-5 h-px bg-white/50"></div>

      <ul class="mt-4 space-y-2.5 text-white text-sm">
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Everything in Solo
        </li>
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Unlimited projects &amp; shared libraries
        </li>
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Roles, permissions &amp; version history
        </li>
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          SSO/SAML, audit logs &amp; API access
        </li>
        <li class="flex items-start gap-2.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
            class="lucide lucide-check w-4.5 h-4.5 mt-0.5">
            <path d="M20 6 9 17l-5-5" class=""></path>
          </svg>
          Priority support &amp; 99.9% SLA
        </li>
      </ul>
    </article>
  </div>

  <p class="text-center text-gray-600 text-sm mt-5" id="note">
    Prices in USD. Tax excluded where applicable. Discounts auto-applied to yearly billing.
  </p>

  <!-- Download HTML button -->

</section>