Tailwind Feature Card with Code Window

<section
  class="relative overflow-hidden group hover:border-zinc-700/60 transition-all duration-500 animate-slide-in-1 flex flex-col bg-zinc-900/50 border-zinc-800/50 border rounded-3xl backdrop-blur-sm max-w-2xl">
  <!-- Subtle accent glow -->


  <!-- Code Window -->
  <div class="md:p-8 flex-1 flex flex-col pt-6 pr-6 pb-6 pl-6">
    <div class="relative rounded-2xl border border-zinc-800/60 bg-zinc-950/80 backdrop-blur-sm flex-1">
      <!-- window controls -->
      <div class="flex items-center gap-2.5 px-5 py-4 border-b border-zinc-800/40">
        <div class="flex gap-2">
          <span class="h-3 w-3 rounded-full bg-zinc-600"></span>
          <span class="h-3 w-3 rounded-full bg-zinc-600"></span>
          <span class="h-3 w-3 rounded-full bg-zinc-600"></span>
        </div>
        <div class="flex-1 text-center">
          <span class="text-zinc-500 text-sm font-geist tracking-tight" style="">budget-analyzer.py</span>
        </div>
      </div>

      <div class="p-5 md:p-6 flex-1 flex items-center">
        <pre class="text-[13px] md:text-[14px] leading-7 text-zinc-300 overflow-x-auto w-full font-geist tracking-tight"
          style=""><span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">1</span><span class="text-emerald-400 font-geist tracking-tight" style="">import</span> pandas <span class="text-emerald-400 font-geist tracking-tight" style="">as</span> pd
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">2</span><span class="text-emerald-400 font-geist tracking-tight" style="">from</span> ai_models <span class="text-emerald-400 font-geist tracking-tight" style="">import</span> BudgetPredictor
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">3</span>
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">4</span><span class="text-emerald-400 font-geist tracking-tight" style="">class</span> <span class="text-white font-geist tracking-tight" style="">BudgetAnalyzer</span>:
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">5</span>    <span class="text-emerald-400 font-geist tracking-tight" style="">def</span> <span class="text-white font-geist tracking-tight" style="">analyze_spending</span>(<span class="text-orange-400 font-geist tracking-tight" style="">self</span>, data):
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">6</span>        predictions = <span class="text-orange-400 font-geist tracking-tight" style="">self</span>.model.<span class="text-white font-geist tracking-tight" style="">predict</span>(data)
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">7</span>        insights = <span class="text-orange-400 font-geist tracking-tight" style="">self</span>.<span class="text-white font-geist tracking-tight" style="">generate_insights</span>(predictions)
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">8</span>        <span class="text-emerald-400 font-geist tracking-tight" style="">return</span> {
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">9</span>            <span class="text-blue-400 font-geist tracking-tight" style="">'forecast'</span>: predictions,
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">10</span>            <span class="text-blue-400 font-geist tracking-tight" style="">'recommendations'</span>: insights
<span class="text-zinc-600 select-none w-8 inline-block font-geist tracking-tight" style="">11</span>        }</pre>
      </div>

      <!-- Subtle inner glow -->
      <div class="absolute inset-0 ring-inset ring-white/5 ring-1 rounded-2xl"></div>
    </div>
  </div>

  <!-- Text content -->
  <div class="md:px-8 md:pb-10 pr-6 pb-8 pl-6">
    <div class="flex items-center gap-3 mb-4">

      <h3 class="text-2xl md:text-3xl text-white font-bricolage font-light tracking-tighter" style="">Smart Analysis
      </h3>
    </div>
    <p class="text-zinc-400 leading-relaxed text-lg font-geist tracking-tight" style="">
      Advanced machine learning algorithms analyze your spending patterns, identify cost-saving opportunities, and
      provide intelligent budget recommendations tailored to your financial goals.
    </p>
  </div>
</section>