Register Box - Copy this React, Tailwind 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