SH
Santiago Hernandez

Responsive Help Dropdown - Copy this Html, Tailwind Component to your project

Quiero que me ayuds a hacer un boton de ayuda olo va a tener el icono que va a estar ubicado en el borde derecho de la pantalla centrado y va a estar fijo quiero, v a estar pegado quiero que tenga como una forma y animacion llamativa quiero que sea el fondo negro y el icono en blanco que sea responsive quiero algo moderno /* Estilos del chatbot */ .cChatbot { position: fixed; right: 20px; bottom: 0; width: 100%; max-width: 360px; height: auto; border-radius: 12px; box-shadow: 0px 0px 10px rgba(49, 49, 49, 0.4); background: #F4F4F4; display: none; cursor: pointer; z-index: 110; } .cChatbot .cChatbotHeader { display: flex; justify-content: space-between; align-items: center; background: #000000; border-radius: 12px 12px 0 0; padding: 13px 30px; color: #fff; } .cChatbot .cChatbotHeader i { font-size: 25px; cursor: pointer; } .cChatbotContent { padding: 20px; display: flex; flex-direction: column; gap: 10px; } .contact-option { display: flex; align-items: center; background: #fff; border-radius: 8px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); padding: 10px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .contact-option i { font-size: 20px; margin-right: 10px; } .container-contact__info p{ font-weight: 400; text-align: start; font-size: 16px; margin-bottom: 10px; } .contact-option span { margin-left: 30px; font-size: 17px; font-weight: 500; } /* Animación al pasar el cursor */ .contact-option:hover { background: #f0f0f0; transform: scale(1.02); } /* Ajuste para pantallas grandes */ @media only screen and (min-width: 960px) { .cChat { font-size: 23px; font-weight: 600; width: 180px; rotate: -90deg; right: -114PX; /*CAMBIOS EN EL TAMAÑO DEL MENU LATERAL*/ text-align: center; } } .contact-option__whatssap { width: 30px; } .contact-option__asistente-virtual { width: 30px; } .cChatbotHeader__tittle { font-weight: 500; font-family: "Oswald", sans-serif; font-size: 20px; } .contact__element-1 { text-rendering: var(--dark-color-lighten); }

Prompt
Component Preview

About

Responsive Help Dropdown - A fixed, centered help icon on the right side of the screen, fully responsive for all devices. Built with H. Download instantly!

Share

Last updated 1 month ago