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

<div className="w 1/3 bg muted rounded lg p 6 shadow md"> <div> <div> <div> <div className="space y 2"> <div className="flex items center space x 4"> <div className={`rounded full w 8 h 8 flex items center justify center font semibold ${ currentStep === 0 ? "bg primary text primary foreground" : "bg muted text muted foreground" }`} > 1 </div> <h3 className={`text lg font semibold ${currentStep === 0 ? "text primary" : ""}`}>Personal Info</h3> </div> <p className={`text muted foreground ${currentStep === 0 ? "text primary" : ""}`}> Enter your name, email, and phone number. </p> </div> </div> </div> <div> <div> <div className="space y 2"> <div className="flex items center space x 4"> <div className={`rounded full w 8 h 8 flex items center justify center font semibold ${ currentStep === 1 ? "bg primary text primary foreground" : "bg muted text muted foreground" }`} > 2 </div> <h3 className={`text lg font semibold ${currentStep === 1 ? "text primary" : ""}`}>Company Info</h3> </div> <p className={`text muted foreground ${currentStep === 1 ? "text primary" : ""}`}> Enter your company name, industry, and size. </p> </div> </div> </div> <div> <div> <div className="space y 2"> <div className="flex items center space x 4"> <div className={`rounded full w 8 h 8 flex items center justify center font semibold ${ currentStep === 2 ? "bg primary text primary foreground" : "bg muted text muted foreground" }`} > 3 </div> <h3 className={`text lg font semibold ${currentStep === 2 ? "text primary" : ""}`}>Account Info</h3> </div> <p className={`text muted foreground ${currentStep === 2 ? "text primary" : ""}`}> Create a username and password for your account. </p> </div> </div> <div className="mt 4 text center text sm"> Already have an account?{" "} <Link href="/login" className="underline">Sign In</Link> </div> </div> </div> </div> please give some good asthetic css changes in above code dont change functionality