Animated Karaoke Heading with Tailwind

<section class="sm:py-24 grid-corners pt-16 pb-16 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(10)" id="contact">
      <div class="grid-corners-bottom"></div>
      <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div class="animate-slide-left">
            <h2 class="sm:text-4xl karaoke-container text-3xl font-semibold tracking-tight" data-karaoke-wrapped="true" data-karaoke-animated="true" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(10) &gt; div:nth-of-type(2) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; h2:nth-of-type(1)">
              <span class="karaoke-word"></span>
              <span class="karaoke-word" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(10) &gt; div:nth-of-type(2) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; h2:nth-of-type(1) &gt; span:nth-of-type(2)">Get</span>
              <span class="karaoke-word">in</span>
              <span class="karaoke-word">touch</span>
              <span class="karaoke-word"></span>
            </h2>
            <p class="mt-3 text-neutral-300 karaoke-container" data-karaoke-wrapped="true" data-karaoke-animated="true">
              <span class="karaoke-word"></span>
              <span class="karaoke-word">Share</span>
              <span class="karaoke-word">your</span>
              <span class="karaoke-word">vision</span>
              <span class="karaoke-word">and</span>
              <span class="karaoke-word">we'll</span>
              <span class="karaoke-word">help</span>
              <span class="karaoke-word">you</span>
              <span class="karaoke-word">build</span>
              <span class="karaoke-word">it</span>
              <span class="karaoke-word">with</span>
              <span class="karaoke-word">the</span>
              <span class="karaoke-word">perfect</span>
              <span class="karaoke-word">solution.</span>
              <span class="karaoke-word"></span>
            </p>
            <div class="mt-6 space-y-4 text-sm">
              <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail h-5 w-5 text-lime-300"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
                hello@synthesize.dev
              </div>
              <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin h-5 w-5 text-lime-300"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
                Global · Remote First
              </div>
            </div>
          </div>
          <form class="animate-slide-right rounded-2xl border border-white/10 bg-white/[0.02] p-6 space-y-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div class="">
                <label class="text-xs text-neutral-400">First name</label>
                <input type="text" class="mt-1 w-full rounded-lg bg-black/50 px-3 py-2 text-sm ring-1 ring-white/10 focus:ring-2 focus:ring-lime-300/40 focus:outline-none transition" placeholder="Alex">
              </div>
              <div class="">
                <label class="text-xs text-neutral-400">Last name</label>
                <input type="text" class="mt-1 w-full rounded-lg bg-black/50 px-3 py-2 text-sm ring-1 ring-white/10 focus:ring-2 focus:ring-lime-300/40 focus:outline-none transition" placeholder="Chen">
              </div>
            </div>
            <div class="">
              <label class="text-xs text-neutral-400">Email address</label>
              <input type="email" class="mt-1 w-full rounded-lg bg-black/50 px-3 py-2 text-sm ring-1 ring-white/10 focus:ring-2 focus:ring-lime-300/40 focus:outline-none transition" placeholder="alex@company.com">
            </div>
            <div class="">
              <label class="text-xs text-neutral-400">
                Tell us about your project
              </label>
              <textarea rows="4" class="focus:ring-2 focus:ring-lime-300/40 focus:outline-none transition resize-none text-sm bg-black/50 w-full rounded-lg ring-white/10 ring-1 mt-1 pt-2 pr-3 pb-2 pl-3" placeholder="I'm building an app that..."></textarea>
            </div>
            <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-full bg-lime-400 px-5 py-3 text-neutral-950 font-medium hover:bg-lime-300 transition">
              Send message
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send h-4 w-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
            </button>
          </form>
        </div>
      </div>
    </section>