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
Dó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.