Styled Paper - Copy this React, Mui Component to your project

Const RegisterBox = styled.div` background: linear gradient(145deg, #ffffff, #f0f0f0); width: 30%; height: fit content; border radius: 1rem; display: flex; flex direction: column; align items: center; padding: 2rem; gap: 2rem; box shadow: 0px 8px 20px rgba(0, 0, 0, 0.1), inset 0px 2px 4px rgba(255, 255, 255, 0.7); animation: fadeIn 0.5s ease in out; @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } h2 { margin: 0; font size: 2rem; color: #695ae0; font weight: bold; text shadow: 1px 1px 5px rgba(105, 90, 224, 0.4); } div { width: 90%; display: flex; flex direction: column; align items: flex start; gap: 0.8rem; label { text transform: capitalize; color: #7b7b7b; font weight: 600; font size: 1rem; } input { width: 100%; padding: 0.8rem; border: 1px solid #d9d9d9; border radius: 0.6rem; font size: 1rem; box shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; &:focus { outline: none; border color: #695ae0; box shadow: 0 0 4px rgba(105, 90, 224, 0.5); } } } button { width: 100%; background: linear gradient(135deg, #695ae0, #957de0); border: none; padding: 0.8rem; border radius: 0.8rem; color: white; font weight: bold; font size: 1rem; cursor: pointer; transition: all 0.3s ease; box shadow: 0px 4px 10px rgba(105, 90, 224, 0.3); &:hover { background: linear gradient(135deg, #574dc8, #695ae0); box shadow: 0px 6px 15px rgba(105, 90, 224, 0.5); } &:active { transform: scale(0.98); } } @media only screen and (max width: 700px) { width: 90%; gap: 1.5rem; padding: 1.5rem; } `; make this attractive