<div className="h-screen bg-indigo-100 flex justify-center items-center">        <form className="w-blue-claymorphism w-full max-w-xs flex flex-col py-5 px-8" action="">           <label className="text-gray-700 font-bold py-2" htmlFor="">Email</label>           <input className="text-gray-700 shadow border rounded border-gray-300 focus:outline-none focus:shadow-outline py-1 px-3 mb-3" type="email" placeholder="Email"  />           <label className="text-gray-700 font-bold py-2" htmlFor="">Password</label>           <input className="text-gray-700 shadow border rounded border-gray-300 mb-3 py-1 px-3 focus:outline-none focus:shadow-outline" type="password" placeholder="********"  />        <div className="grid grid-cols-2 gap-3 place-content-between my-4">           <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded py-1 px-4 place-self-end" >              Sign In           </button>       <div className="text-sm text-blue-600 hover:text-blue-800 font-bold place-self-end">         Forgot Password?       </div>    </div>      <div className="grid grid-cols-2 place-content-between my-4">          <div className="text-slate-600 hover:text-blue-800 font-bold" >          Dont have an Account?       </div>         <div className="place-self-end">           <button className="bg-green-500 hover:bg-slate-700 text-white font-bold rounded py-1 px-3 text-white">            Sign Up             </button>          </div>        </div>     </form>  </div> 

/* Claymorphism */ .w-green-claymorphism, .w-blue-claymorphism, .w-red-claymorphism, .w-purple-claymorphism {     padding: 50px;     border-radius: 50px; }  .w-green-claymorphism {     background-color: hsl(120deg, 20%, 95%);     box-shadow:         34px 34px 68px hsl(120deg, 10%, 50%),         inset -8px -8px 16px hsl(120deg, 20%, 50%),         inset 0px 14px 28px hsl(120deg, 20%, 95%); }  .w-blue-claymorphism {     background-color: hsl(190deg, 20%, 95%);     box-shadow:         34px 34px 68px hsl(190deg, 10%, 50%),         inset -8px -8px 16px hsl(190deg, 20%, 50%),         inset 0px 14px 28px hsl(120deg, 20%, 95%); }  .w-red-claymorphism {     background-color: hsl(10deg, 20%, 95%);     box-shadow:         34px 34px 68px hsl(10deg, 10%, 50%),         inset -8px -8px 16px hsl(10deg, 20%, 50%),         inset 0px 14px 28px hsl(120deg, 20%, 95%); }  .w-purple-claymorphism {     background-color: hsl(300deg, 20%, 95%);     box-shadow:         34px 34px 68px hsl(300deg, 10%, 50%),         inset -8px -8px 16px hsl(300deg, 20%, 50%),         inset 0px 14px 28px hsl(120deg, 20%, 95%); }  

 <form className="w-blue-claymorphism ....."> . . . . </form>