Three-Tier Gradient Pricing Table (Tailwind)

<div class="flex justify-center">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-5xl">
              <!-- Starter Plan -->
              <div class="relative hover:bg-white/[0.04] transition-all duration-300 group rounded-2xl pt-6 pr-6 pb-6 pl-6" style="width: 19rem; background-color: hsla(240, 15%, 9%, 1); box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.10) inset; border: 1px solid rgba(255, 255, 255, 0.1);">
                <div class="flex items-center justify-between mb-6">
                  <div class="flex items-center gap-3">
                    <div class="h-10 w-10 flex bg-neutral-50/10 border-white/20 border rounded-xl items-center justify-center">
                      <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" class="w-[20px] h-[20px]" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><path d="M18 21a8 8 0 0 0-16 0" class=""></path><circle cx="10" cy="8" r="5" class=""></circle><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3" class=""></path></svg>
                    </div>
                    <div class="">
                      <h3 class="text-xl font-medium text-white tracking-tight" style="">Starter</h3>
                      <p class="text-xs text-neutral-500" style="">Perfect for beginners</p>
                    </div>
                  </div>
                  <div class="h-5 w-5 rounded-full border-2 border-white/30"></div>
                </div>

                <div class="mb-6">
                  <div class="flex items-baseline gap-2">
                    <span class="text-4xl text-white font-geist font-light tracking-tighter" style="">$0</span>
                    <span class="text-sm text-neutral-400" style="">/month</span>
                  </div>
                  <p class="text-xs text-neutral-500 mt-1" style="">No credit card required</p>
                </div>

                <ul class="space-y-3 text-sm text-neutral-300 mb-8">
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-blue-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[12px] h-[12px]" data-icon-replaced="true" style="width: 12px; height: 12px; color: rgb(212, 212, 212);"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    5 AI generations per day
                  </li>
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-blue-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    Basic editing tools
                  </li>
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-blue-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    1GB cloud storage
                  </li>
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-blue-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    Community support
                  </li>
                </ul>

                <button class="w-full inline-flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/5 px-6 py-3 text-sm font-semibold text-white/90 hover:bg-white/10 hover:border-white/20 transition-all duration-200" style="">
                  Get Started Free
                </button>
              </div>

              <!-- Pro Plan (Featured with Pink Glow) -->
              <div class="relative hover:bg-white/[0.04] transition-all duration-300 group rounded-2xl pt-6 pr-6 pb-6 pl-6" style="width: 19rem; background-color: hsla(240, 15%, 9%, 1); background-image: radial-gradient(at 88% 40%, hsla(240, 15%, 9%, 1) 0px, transparent 85%), radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%), radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%), radial-gradient(at 0% 64%, hsla(263, 93%, 56%, 1) 0px, transparent 85%), radial-gradient(at 41% 94%, hsla(284, 100%, 84%, 1) 0px, transparent 85%), radial-gradient(at 100% 99%, hsla(306, 100%, 57%, 1) 0px, transparent 85%); box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;">
                <div style="overflow: hidden; pointer-events: none; position: absolute; z-index: -10; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 2px); height: calc(100% + 2px); background-image: linear-gradient(0deg, hsl(0, 0%, 100%) -50%, hsl(0, 0%, 40%) 100%); border-radius: 1rem;">
                  <div style="content: ''; pointer-events: none; position: fixed; z-index: 200; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); transform-origin: left; width: 200%; height: 10rem; background-image: linear-gradient(0deg, hsla(0, 0%, 100%, 0) 0%, hsl(277, 95%, 60%) 40%, hsl(277, 95%, 60%) 60%, hsla(0, 0%, 40%, 0) 100%); animation: rotate 8s linear infinite;"></div>
                </div>
                
                <div class="flex items-center justify-between mb-6">
                  <div class="flex items-center gap-3">
                    <div class="h-10 w-10 flex bg-neutral-50/10 border-white/20 border rounded-xl items-center justify-center">
                      <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" class="w-[20px] h-[20px]" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
                    </div>
                    <div class="">
                      <h3 class="text-xl font-medium text-white tracking-tight" style="">Pro</h3>
                      <p class="text-xs text-neutral-500" style="">Perfect for professionals</p>
                    </div>
                  </div>
                  <div class="h-5 w-5 rounded-full border-2 border-white/30"></div>
                </div>

                <div class="mb-6">
                  <div class="flex items-baseline gap-2">
                    <span class="text-4xl text-white font-geist font-light tracking-tighter" style="">$19</span>
                    <span class="text-sm text-neutral-400" style="">/month</span>
                  </div>
                  <p class="text-xs text-neutral-500 mt-1" style="">14-day free trial</p>
                </div>

                <ul class="space-y-3 text-sm text-neutral-300 mb-8">
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-purple-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    Unlimited AI generations
                  </li>
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-purple-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    Advanced editing tools
                  </li>
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-purple-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    100GB cloud storage
                  </li>
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-purple-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    Priority support
                  </li>
                </ul>

                <button class="w-full inline-flex gap-2 hover:from-purple-700 hover:to-pink-700 transition-all duration-200 text-sm font-semibold text-white bg-gradient-to-br from-[#4d22b3] to-[#d357fe] rounded-xl pt-3 pr-6 pb-3 pl-6 shadow-lg items-center justify-center" style="">
                  Start Free Trial
                </button>
              </div>

              <!-- Enterprise Plan -->
              <div class="relative hover:bg-white/[0.04] transition-all duration-300 group rounded-2xl pt-6 pr-6 pb-6 pl-6" style="width: 19rem; background-color: hsla(240, 15%, 9%, 1); box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.10) inset; border: 1px solid rgba(255, 255, 255, 0.1);">
                <div class="flex items-center justify-between mb-6">
                  <div class="flex items-center gap-3">
                    <div class="h-10 w-10 flex bg-neutral-50/10 border-white/20 border rounded-xl items-center justify-center">
                      <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" class="w-[20px] h-[20px]" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><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>
                    </div>
                    <div class="">
                      <h3 class="text-xl font-medium text-white tracking-tight" style="">Enterprise</h3>
                      <p class="text-xs text-neutral-500" style="">For large teams</p>
                    </div>
                  </div>
                  <div class="h-5 w-5 rounded-full border-2 border-white/30"></div>
                </div>

                <div class="mb-6">
                  <div class="flex items-baseline gap-2">
                    <span class="text-4xl text-white font-geist font-light tracking-tighter" style="">$99</span>
                    <span class="text-sm text-neutral-400" style="">/month</span>
                  </div>
                  <p class="text-xs text-neutral-500 mt-1" style="">Custom pricing available</p>
                </div>

                <ul class="space-y-3 text-sm text-neutral-300 mb-8">
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-orange-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    Everything in Pro
                  </li>
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-orange-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    Unlimited team members
                  </li>
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-orange-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    1TB cloud storage
                  </li>
                  <li class="flex items-start gap-3" style="">
                    <div class="flex justify-center items-center w-4 h-4 bg-orange-600 rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="hsl(240, 15%, 9%)" stroke="hsl(240, 15%, 9%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    </div>
                    24/7 dedicated support
                  </li>
                </ul>

                <button class="w-full inline-flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/5 px-6 py-3 text-sm font-semibold text-white/90 hover:bg-white/10 hover:border-white/20 transition-all duration-200" style="">
                  Contact Sales
                </button>
              </div>
            </div></div>