Cargando
Cargando
Biblioteca de componentes construidos con Tailwind CSS para el tema institucional de la Universidad Pedagógica Nacional
upn-50
#b09eff
upn-100
#9686f9
upn-300
#6359c5
upn-500
#001C7C
upn-700
#000660
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
text-6xl (Display)
text-5xl
text-4xl
text-3xl
text-2xl
text-xl
text-lg
Texto destacado o lead paragraph
text-base
Texto normal del cuerpo del documento
text-sm
Texto pequeño para metadatos
font-normal - Peso normal (400)
font-medium - Peso medio (500)
font-semibold - Semi negrita (600)
font-bold - Negrita (700)
font-extrabold - Extra negrita (800)
Sistema de iconos basado en Phosphor Icons. Para usar un icono, agrega la clase ph ph-{nombre}.
<i class="ph ph-house"></i>
Catálogo completo en: phosphoricons.com
<button class="btn btn-primary">Texto</button>
<span class="badge badge-primary">Texto</span>
Este es un ejemplo de card básico con imagen, título y descripción.
Pasa el cursor sobre esta tarjeta para ver el efecto de elevación.
Leer más →Tarjeta con icono decorativo en la parte superior.
<div class="card">
<div class="card-body">...</div>
</div>
<input type="text" class="input">
Este es un mensaje informativo para el usuario.
La operación se completó correctamente.
Revisa esta información antes de continuar.
Ocurrió un error al procesar tu solicitud.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">...</div>
p-4 - Padding de 1remm-4 - Margin de 1remgap-4 - Gap de 1remspace-y-4 - Espacio verticalflex - Display flexitems-center - Align items centerjustify-between - Justify space betweenflex-col - Dirección columnarounded - Border radiusrounded-lg - Border radius largeborder - Border 1pxshadow-md - Box shadow mediumsm: - ≥640pxmd: - ≥768pxlg: - ≥1024pxxl: - ≥1280px
<div class="modal" id="modal">
<div class="modal-content">
<div class="modal-header">...</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
<div class="dropdown">
<button>Trigger</button>
<div class="dropdown-menu">...</div>
</div>
Contenido del Tab 1
Contenido del Tab 2
Contenido del Tab 3
<div class="tabs">
<button class="tab active">Tab 1</button>
</div>
Contenido de la sección 1.
Contenido de la sección 2.
<div class="accordion-item">
<button class="accordion-header">...</button>
<div class="accordion-content">...</div>
</div>
<nav class="pagination">
<button class="pagination-item active">1</button>
</nav>
| Programa | Facultad | Modalidad | Duración |
|---|---|---|---|
| Licenciatura en Pedagogía | Educación | Presencial | 8 semestres |
| Licenciatura en Matemáticas | Ciencia y Tecnología | Presencial | 10 semestres |
| Maestría en Educación | Educación | Virtual | 4 semestres |
<table class="table">...</table>
<div class="toast toast-success">
<div class="toast-content">...</div>
</div>
<div class="tooltip">
<button>Hover</button>
<span class="tooltip-content">Tooltip</span>
</div>
Default (75%)
Success (100%)
Warning (50%)
Danger (25%)
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
Contenido superior
Contenido inferior
<div class="divider"></div>
<div class="divider-text"><span>Text</span></div>
<div class="avatar avatar-md">
<img src="..." alt="Avatar">
</div>
<div class="list-group">
<div class="list-group-item active">...</div>
</div>
<div class="spinner"></div>
<div class="spinner-dots"><span></span><span></span><span></span></div>
<div class="spinner-bars"><span></span> ... </div>
<div class="spinner-pulse"></div>
<div class="spinner-ring"></div>
<div class="stepper">
<div class="step completed">...</div>
</div>
Se funda la Universidad Pedagógica Nacional
Apertura de nuevas facultades
Implementación de campus virtual
<div class="timeline">
<div class="timeline-item">...</div>
</div>
<div class="stat">
<div class="stat-value">5,000+</div>
<div class="stat-label">Estudiantes</div>
</div>
<div class="skeleton h-32"></div>
<div class="skeleton-text"></div>
No encontramos ningún programa que coincida con tu búsqueda.
<div class="empty-state">
<i class="ph ph-icon empty-state-icon"></i>
<h3 class="empty-state-title">...</h3>
</div>
Arrastra archivos aquí
o haz clic para seleccionar
<div class="file-upload">...</div>
"La UPN me dio las herramientas necesarias para convertirme en el educador que siempre quise ser."
Egresada - Licenciatura en Pedagogía
<div class="quote">
<p class="quote-text">...</p>
<p class="quote-author">...</p>
</div>
<div class="rating">
<i class="ph ph-star rating-star"></i>
</div>
<span class="chip">
Texto
<i class="ph ph-x chip-close"></i>
</span>
Desplázate hacia abajo para ver el botón
<div class="back-to-top">
<i class="ph ph-arrow-up"></i>
</div>
<div class="search-box">
<i class="ph ph-magnifying-glass search-icon"></i>
<input class="search-input">
</div>
<div class="video-player">
<div class="video-overlay">
<div class="video-play-btn">...</div>
</div>
</div>
Social Share Buttons
<button class="social-btn social-btn-facebook">
<i class="ph ph-facebook-logo"></i>
</button>