CTA Button with Floating Labels

<div class="lg:col-span-4 flex flex-col lg:items-end lg:pl-10 z-20 relative items-start"
  style="animation: slideBlurIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both">
  <!-- Floating Label -->
  <div
    class="mb-8 hidden lg:block transform -rotate-6 origin-bottom-left hover:rotate-0 transition-transform duration-300">
    <div class="bg-white text-black px-5 py-2 rounded-2xl text-sm font-bold shadow-lg relative">
      Online languagelearning school
      <div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-white transform rotate-45"></div>
    </div>
  </div>

  <p class="lg:hidden text-lg font-medium text-neutral-400 mb-6">Online language learning school</p>

  <button class="group flex items-center gap-3 pl-4 pr-6 py-3 rounded-full transition-all duration-300 hover:-translate-y-1 bg-[#FF4F18] text-white hover:bg-[#E04515] shadow-[0_0_20px_rgba(255,79,24,0.3)]">
         <div class="w-8 h-8 rounded-full flex items-center justify-center bg-black text-white group-hover:bg-white group-hover:text-black transition-colors duration-300">
            <iconify-icon icon="solar:bolt-linear" width="18" height="18"></iconify-icon>
         </div>
         <span class="text-sm font-semibold">Start Now</span>
      </button>

  <!-- Small Bubble Element -->
  <div
    class="inline-block transform hover:rotate-0 transition-transform text-xs font-bold text-black bg-white rounded-xl mt-8 pt-1.5 pr-3 pb-1.5 pl-3 relative shadow-lg rotate-3">
    뭐해<div class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-white transform rotate-45"></div>
  </div>
</div>