Multi Step Form - Copy this React, Tailwind Component to your project

after he clicks on next step we will show the modal {step === "phone" && ( <div className="space-y-6"> {/* Conditional alert based on whether the user has sent the message */} <div className="bg-yellow-100 text-yellow-800 p-4 rounded-md shadow-md"> <p className="text-center font-medium"> {t('you_need_first')} "join detail-handsome" {t('to')} +14155238886 </p> <div className="mt-4 text-center"> <button onClick={() => setStep("join")} className="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500" > {t('return_back')} </button> </div> </div> <div className="text-center"> <h2 className="text-3xl font-bold text-gray-900">{t('phone_verification')}</h2> <p className="mt-2 text-gray-600">{t('enter_your_phone')}</p> </div> <div> <div className="relative"> <FiPhone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" /> <input type="tel" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} placeholder="+1234567890" className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" /> </div> {error && <p className="mt-2 text-sm text-red-600">{error}</p>} <button onClick={() => handlePhoneSubmit(phoneNumber)} disabled={loading} className="mt-4 w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50" > {loading ? <BiLoader className="animate-spin h-5 w-5" /> : t('send_code')} </button> </div> </div> )}