Contenido del panel
HTML + CSSFiltros
Pestañas tipo carpeta
La pestaña activa se eleva y se une al panel de abajo, como la solapa de una carpeta de papel.
Ajustes
16px
1x
Código
<div class="uv-ftk"><div class="tb"><button class="on">Resumen</button><button>Detalles</button><button>Notas</button></div><div class="pn">Contenido del panel</div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Ver todos: FiltrosDónde usarlo
Va bien en páginas con mucho contenido detrás de cada pestaña. La ficha de producto de una ferretería online, con Descripción, Especificaciones y Envío, o la de un cliente en un CRM pequeño. Como pestaña y panel se leen como una sola pieza, nadie duda de qué va con qué. Son las clásicas pestañas tipo carpeta en CSS.
El efecto depende de que pestaña y panel compartan exactamente el mismo fondo, así que cámbialos a la vez. Tiene un aire algo clásico, que suma en herramientas de trabajo y resta en una marca desenfadada.