Portfolio Tailwind v4

Component Portfolio

Todos los tokens de diseño viven en tailwind/theme.css y se cargan desde application.css.

Estructura de archivos

app/assets/stylesheets/
├── application.css          ← punto de entrada
└── tailwind/
    ├── theme.css             ← tokens de diseño
    ├── base.css              ← reset y estilos globales
    ├── components.css        ← clases .btn, .card…
    └── utilities.css         ← utilidades custom

Buttons

.btn · .btn-primary · .btn-secondary · .btn-accent · .btn-outline · .btn-ghost · .btn-danger

Variantes

sobre fondo oscuro

Tamaños

.btn-lg

.btn

.btn-sm

.btn-xs

.btn-icon

Estados

Typography

font-display · font-body · font-mono — tokens en --font-* de theme.css

Tipografía

font-display

The quick brown fox

jumps over the lazy dog

font-body

La fuente de cuerpo se define en --font-body dentro de theme.css. Cambia el valor y se aplica a toda la UI automáticamente.

font-mono

font-mono @theme { --font-body: "Inter", system-ui, sans-serif; }

Forms

.input · .label · .form-group · .switch · .radio-group · .radio-item

Inputs

Nombre

Con error Este campo es obligatorio

Deshabilitado

Mensaje

País

Acepto los términos

<div class="form-group">
  <label class="label">Nombre</label>
  <input class="input" type="text" placeholder="Ej. María García" />
</div>

<div class="form-group">
  <label class="label">Con error</label>
  <input class="input input-error" type="text" />
  <span class="text-xs text-danger mt-1">Este campo es obligatorio</span>
</div>

Switch .switch · .switch-sm · .switch-lg

Activado Desactivado Deshabilitado

Tamaños

Small Default Large

Casos de uso

Notificaciones por email

Recibe alertas cuando alguien te menciona

Modo oscuro

Cambia la apariencia de la interfaz

Actualizaciones automáticas

Instala actualizaciones en segundo plano

<!-- Switch básico -->
<label class="switch-wrap">
  <input type="checkbox" class="switch-input" checked />
  <span class="switch"></span>
  <span class="switch-label">Activado</span>
</label>

<!-- Switch pequeño -->
<label class="switch-wrap">
  <input type="checkbox" class="switch-input" />
  <span class="switch switch-sm"></span>
  <span class="switch-label">Desactivado</span>
</label>

Radio buttons .radio-group · .radio-item · .radio-card

Radio inline

Básico Pro Enterprise

Radio con descripción

Público

Cualquier persona puede ver este proyecto

Solo equipo

Solo los miembros del equipo tienen acceso

Privado

Solo tú puedes ver y editar este proyecto

Radio cards

Mensual 29€/mes Anual 19€/mes Lifetime 299€ único

<!-- Radio inline -->
<div class="radio-group radio-group-inline">
  <label class="radio-item">
    <input type="radio" name="plan" class="radio-input" checked />
    <span class="radio-circle"></span>
    <span class="text-sm text-neutral-700">Básico</span>
  </label>
</div>

<!-- Radio card -->
<label class="radio-card">
  <input type="radio" name="billing" class="radio-input" />
  <span class="radio-card-inner">
    <span class="radio-card-check">✓</span>
    <span class="text-sm font-semibold">Anual</span>
    <span class="text-xs text-neutral-500">19€/mes</span>
  </span>
</label>

Cards

.card · .card-header · .card-body · .card-footer

Variantes de card

Nuevo

Card básica

Una tarjeta sencilla sin cabecera ni pie de página.

Header / Footer Activo

Usa --color-border del tema para separar secciones.

Ana Martínez

Diseñadora de producto

Badges

.badge · .badge-brand · .badge-success · .badge-danger…

Variantes

Brand Accent ✓ Activo ✕ Error ⚠ Aviso ℹ Info Neutro

Alerts

.alert · .alert-success · .alert-danger · .alert-warning · .alert-info

Alertas

Cambios guardadosTu perfil se ha actualizado correctamente.

Error de validaciónRevisa los campos marcados en rojo.

AtenciónTu sesión expirará en 10 minutos.

InformaciónHay una nueva versión disponible.

Avatars

.avatar · .avatar-sm · .avatar-md · .avatar-lg · .avatar-xl

Avatares

Grupo

8 colaboradores

Tabs

.tabs · .tab · .tab-active

Panel de Resumen. Color activo desde --color-brand-*.

Tooltips

.tooltip-wrap · .tooltip — CSS puro, sin JS

Tooltips

Skeleton

Skeleton Loader

.skeleton

Skeleton loader

Nuevos

Modals

.modal-backdrop · .modal · .modal-header · .modal-body · .modal-footer

Preview estático

Con overlay (interactivo)

Dropdowns

.dropdown · .dropdown-menu · .dropdown-item — CSS puro con :focus-within

Dropdowns

Tables

.table · .table-header · .table-row · .table-cell

Usuarios recientes

Usuario	Rol	Último acceso	Estado
AM Ana Martínez	Admin	Hace 2 min	Activo
JL Juan López	Editor	Hace 1 hora	Activo
PR Paula Ruiz	Viewer	Hace 3 días	Inactivo
CV Carlos Vega	Editor	Hace 1 sem	Bloqueado

Mostrando 4 de 24 usuarios

Progress

.progress · .progress-bar · .progress-bar-*

Variantes

Brand 72%

Accent 45%

Success 90%

Danger 28%

Warning 60%

Stats

.stat-card — tarjetas de métricas para dashboards

Stat cards

+12%

12.4K

Usuarios

+5.4%

€8.2K

Ingresos

-0.8%

3.6%

Conversión

+2%

94%

Satisfacción

Empty States

.empty-state — estado vacío para listas y páginas sin contenido

Empty states

Sin documentos

Crea tu primer documento para empezar a trabajar con tu equipo.

Sin resultados

No hemos encontrado nada que coincida con tu búsqueda. Prueba con otros términos.

Breadcrumbs

.breadcrumb · .breadcrumb-item · .breadcrumb-sep

Variantes

Pagination

.pagination · .page-btn · .page-btn-active

Paginación

Página 2 de 12

Plantillas

Navbars & Menus

Tres variantes de app-navbar + cinco variantes de menú público — todos responsive

App navbars

Navbar estándar (responsive)

Navbar oscura

Navbar con búsqueda

Marca

Public menus

1 · Classic — logo + links + acciones

2 · Underline — subrayado animado desde la izquierda

3 · Pill — links en cápsula redondeada flotante

4 · Minimal — solo texto, sin fondos ni bordes en links

5 · Dark — fondo oscuro con glassmorphism y subrayado de acento

Sidebar layout

Estructura app con sidebar lateral + header + contenido — responsive con overlay móvil

Preview (escala reducida)

Dashboard

Bienvenida de vuelta, Ana

Proyectos

+3 esta semana

Tareas

148

+12 esta semana

Actividad reciente

Ana actualizó el diseño

Hace 5 min

Juan comentó en la tarea

Hace 1h

Paula completó el sprint

Hace 3h

Login

Pantalla de inicio de sesión — centrada, responsiva, con variante split

Bienvenido

Accede a tu cuenta para continuar

Contraseña ¿Olvidaste la contraseña?

Recordarme

o continúa con

¿No tienes cuenta? Regístrate

La plataforma para tu equipo

Gestiona proyectos, colabora con tu equipo y alcanza tus objetivos más rápido.

10K+

Equipos

99.9%

Uptime

4.9★

Rating

Accede a tu cuenta

Introduce tus credenciales

Contraseña

¿Sin cuenta? Crear cuenta

Landing Page

Secciones de landing: hero, features, pricing, CTA, footer

Hero section

✨ Ahora disponible v2.0

Construye productos
increíbles más rápido

La plataforma todo-en-uno para equipos modernos. Diseña, colabora y lanza en tiempo récord.

Sin tarjeta de crédito · Cancela cuando quieras

Features grid

Features

Todo lo que necesitas

Una suite completa de herramientas pensadas para equipos que quieren moverse rápido.

Ultra rápido

Optimizado para velocidad. Tiempos de carga inferiores a 100ms.

Seguro por defecto

Cifrado de extremo a extremo. Tus datos siempre protegidos.

Colaboración real

Trabaja con tu equipo en tiempo real sin conflictos.

Analytics avanzado

Métricas en tiempo real para tomar decisiones informadas.

Automatización

Crea flujos de trabajo automáticos sin escribir código.

Integración total

Conecta con más de 100 herramientas que ya usas.

Pricing

Precios simples

Sin sorpresas. Cancela en cualquier momento.

Starter

Para proyectos personales

0€ /mes

5 proyectos
1 usuario
1GB almacenamiento
Soporte email

Más popular

Pro

Para equipos en crecimiento

29€ /mes

Proyectos ilimitados
10 usuarios
50GB almacenamiento
Soporte prioritario
Analíticas avanzadas

Enterprise

Para grandes organizaciones

Custom

Todo en Pro
Usuarios ilimitados
SLA garantizado
Onboarding dedicado
SSO / SAML

CTA + Footer

¿Listo para empezar?

Únete a más de 10.000 equipos que ya usan nuestra plataforma.

Tokens

Paleta de colores

Definidos en @theme en theme.css · --color-brand-* · --color-accent-*

Paleta de colores

Brand

100 200 300 400 500 600 700 800 900

Accent

Semánticos

success

danger

warning

info

Type Scale

Definida en --text-* dentro de @theme en theme.css

7xl Aa

5xl Título principal

3xl Encabezado de sección

xl Subtítulo

base Texto de cuerpo principal — legible.

sm Texto secundario y etiquetas.

xs Meta información, timestamps.

2xs BADGES · LABELS · CAPS

Buttons

Typography

Forms

Cards

Card básica

Ana Martínez

Badges

Alerts

Avatars

Tabs

Tooltips

Skeleton Loader

Modals

Confirmar acción

Confirmar eliminación

Nuevo proyecto

Dropdowns

Tables

Progress

Stats

Empty States

Sin documentos

Sin resultados

Breadcrumbs

Pagination

Navbars & Menus

App navbars

Public menus

Sidebar layout

Dashboard

Login

Bienvenido

La plataforma para tu equipo

Accede a tu cuenta

Landing Page

Construye productos increíbles más rápido

Todo lo que necesitas

Ultra rápido

Seguro por defecto

Colaboración real

Analytics avanzado

Automatización

Integración total

Precios simples

Starter

Pro

Enterprise

¿Listo para empezar?

Paleta de colores

Type Scale

Construye productos
increíbles más rápido