React Tailwind UI Components

*{ margin: 0; padding: 0; box sizing: border box; text decoration: none; font family: 'Roboto', sans serif; } body{ background image: linear gradient(to bottom, #000, #4B0082); background size: cover; background repeat: no repeat; background position: center; background attachment: fixed; } main{ width: 100%; padding: 20px; margin: auto; margin top: 100px; } .contenedor__todo{ width: 100%; max width: 800px; margin: auto; position: relative; } .caja__trasera{ width: 100%; padding: 10px 20px; display: flex; justify content: center; webkit backdrop filter: blur(10px); backdrop filter: blur(10px); background color: rgba(255, 255, 255, 0.5) } .caja__trasera div{ margin: 100px 40px; color: white; transition: all 500ms; } .caja__trasera div p, .caja__trasera button{ margin top: 30px; } .caja__trasera div h3{ font weight: 400; font size: 26px; } .caja__trasera div p{ font size: 16px; font weight: 300; } .caja__trasera button{ padding: 10px 40px; border: 2px solid #fff; font size: 14px; background: transparent; font weight: 600; cursor: pointer; color: white; outline: none; transition: all 300ms; } .caja__trasera button:hover{ background: #fff; color: #46A2FD; } /*Formularios*/ .contenedor__login register{ display: flex; align items: center; width: 100%; max width: 380px; position: relative; top: 185px; left: 10px; /*La transicion va despues del codigo JS*/ transition: left 500ms cubic bezier(0.175, 0.885, 0.320, 1.275); } .contenedor__login register form{ width: 100%; padding: 80px 20px; background: white; position: absolute; border radius: 20px; } .contenedor__login register form h2{ font size: 30px; text align: center; margin bottom: 20px; color: #46A2FD; } .contenedor__login register form input{ width: 100%; margin top: 20px; padding: 10px; border: none; background: #F2F2F2; font size: 16px; outline: none; } .contenedor__login register form button{ padding: 10px 40px; margin top: 40px; border: none; font size: 14px; background: #46A2FD; font weight: 600; cursor: pointer; color: white; outline: none; } .form select { width: 100%; margin top: 20px; padding: 10px; border: none; background: #F2F2F2; font size: 16px; outline: none; appearance: none; /* Remove default select appearance */ background image: url(../images/arrow down.png); /* Replace with your arrow image */ background repeat: no repeat; background position: right 10px center; background size: 20px; cursor: pointer; } .form select option { color: #46A2FD; /* Change option color to match button color */ } .formulario__login{ opacity: 1; display: block; } .formulario__register{ display: none; }