An animated (ie. cartoon-like) subscription UI with React, Typescript and TailwindCSS

Subscribe.tsx

import React, { FC, InputHTMLAttributes } from 'react'


const Subscribe = () => {
  return (
    <main className="w-screen h-screen flex justify-center items-center">
        <div 
            className=" w-[410px] h-[350px] duration-700 rounded-lg hover:bg-fuchsia-300 hover:shadow-subscribeCard group focus-within:bg-red-300 focus-within:shadow-subscribeCard p-4 space-y-8"
        >
            <div className='flex justify-between'>
                <Input width="w-[48%]" placeholder='First Name'/>
                <Input width="w-[48%]" placeholder='Last Name'/>
            </div>
            <Input width="w-[60%]" type="date"/>
            <Input width="w-[80%]" type="email" placeholder='Email Addr'/>
            <Input type="select"/>
            <div className="w-full flex justify-center">
                <button className="hover:shadow-subscribeInput group-hover:bg-pink-500 border-white border-[1px] text-sm hover:scale-105 active:scale-90 duration-300 text-white bg-purple-600 px-5 py-[4px] rounded-md">Submit</button>
            </div>
        </div>  
    </main>
  )
}

const Input:FC<InputHTMLAttributes<HTMLInputElement>>  = ({name, width, placeholder,...spread}) =>{
    return(
        <div className={`${width} relative flex items-center`} >
            <input
                name={name}
                id={name}
                className=" w-full border-[1px] border-black peer  rounded-md px-2 pt-3 pb-1 text-gray-700 focus:outline-none text-sm focus:border-gray-500  transition-all duration-700 hover:shadow-subscribeInput focus:shadow-subscribeInput"
                {...spread}
            />
            <label placeholder="" className="absolute block after:-z-10 text-sm peer-[&:not(placeholder-shown)]:mb-[35px] peer-[&:not(placeholder-shown)]:scale-90 peer-[&:not(placeholder-shown)]:ml-2 after:content-[''] after:mt-[7.8px] after:h-[2.5px] after:-left-1 after:absolute after:w-[80px] after:bg-white ml-2 peer-focus:mb-[35px] peer-focus:scale-90 peer-focus:ml-1 transition-all duration-700 peer-focus:text-gray-500" htmlFor={name}>{placeholder}</label>

        </div>
    )
}

export default Subscribe

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layouts/**/*.{js,ts,jsx,tsx}",

  ],
  theme: {
    extend: {
      colors:{
        primary:{
          DEFAULT:"#GO AND STEAL SOMEONE ELSES PRIMARY COLOR"
        }
      },
      boxShadow:{
        subscribeCard: "10px 10px black",
        subscribeInput: "6px 6px black",

      }
    },
  },
  plugins: [],
}