Forms | SmookyDev curly jellyfish 22

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div
  class="form w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-5 px-6 bg-[#DFA16A] r flex flex-col items-center justify-center gap-3 transition-all duration-300"
>
  <p
    class="text-[#A15A3E] translate-x-[46%] -rotate-90 tracking-[20px] transition-all hover:translate-x-[50%] -translate-y-1/2 font-semibold text-2xl absolute right-0"
  >
    Welcome
  </p>

  <div class="capitalize">
    <p class="text-2xl text-[#7F3D27] pb-5">Create Your Account</p>
    <form action="" class="flex flex-col gap-3">
      <div class="flex flex-col items-start w-full">
        <label for="name" class="text-sm text-[#7F3D27] font-semibold"
          >Name</label
        >
        <input
          type="text"
          placeholder="Enter Your Name"
          class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
        />
      </div>

      <div class="flex flex-col items-start w-full">