Animated Gradient Pricing Plan Card

<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>
    
    <style>
        @keyframes rotate {
            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }
    </style>

    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-3">
            <div class="h-10 w-10 rounded-xl border border-white/20 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex 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" data-lucide="sparkles" class="lucide lucide-sparkles lucide-spark-emerald-400"><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"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
            </div>
            <div>
                <h3 class="text-xl font-medium tracking-tight text-white">Starter</h3>
                <p class="text-xs text-neutral-500">Perfect for beginners</p>
            </div>
        </div>
        <div class="plan-radio 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 font-semibold tracking-tight text-white">$0</span>
            <span class="text-sm text-neutral-400">forever</span>
        </div>
        <p class="text-xs text-neutral-500 mt-1">No credit card required</p>
    </div>

    

    <ul class="space-y-3 text-sm text-neutral-300">
        <li class="flex items-start gap-3">
            <div style="display: flex; justify-content: center; align-items: center; width: 1rem; height: 1rem; background-color: hsl(266, 92%, 58%); border-radius: 50%;">
                <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"><path d="M20 6 9 17l-5-5"></path></svg>
            </div>
            Interactive lessons and quizzes
        </li>
        <li class="flex items-start gap-3">
            <div style="display: flex; justify-content: center; align-items: center; width: 1rem; height: 1rem; background-color: hsl(266, 92%, 58%); border-radius: 50%;">
                <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"><path d="M20 6 9 17l-5-5"></path></svg>
            </div>
            Daily practice and streaks
        </li>
        <li class="flex items-start gap-3">
            <div style="display: flex; justify-content: center; align-items: center; width: 1rem; height: 1rem; background-color: hsl(266, 92%, 58%); border-radius: 50%;">
                <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"><path d="M20 6 9 17l-5-5"></path></svg>
            </div>
            Community access
        </li>
        <li class="flex items-start gap-3">
            <div style="display: flex; justify-content: center; align-items: center; width: 1rem; height: 1rem; background-color: hsl(266, 92%, 58%); border-radius: 50%;">
                <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"><path d="M20 6 9 17l-5-5"></path></svg>
            </div>
            Basic AI fundamentals
        </li>
    </ul>
</div>