Bloque Principal
-- Contenidos generales --
Esquema
  • Border [white]
  • Fondo [slate-50]
  • Sombras [indigo-800/20]
HTML
<div class="relative flex flex-col gap-y-4 w-full p-4 rounded-xl border-2 border-solid border-white bg-slate-50 shadow-2xl shadow-indigo-800/20">
## contenidos generales ##
</div>
Color Primario
Minimal button
Crear
Exportar
Guardar
Confimar
Cancelar
Esquema
  • Texto [cyan-200]
  • Gradiente a [sky-500]
  • Gradiente b [sky-800]
  • Sombras [sky-200]
HTML

## CREAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 px-4 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Crear</span>
	<div class="flex items-center justify-center w-6 aspect-square text-cyan-200">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
			<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
		</svg>
	</div>
</a>
## EXPORTAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 px-4 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Exportar</span>
	<div class="flex items-center justify-center w-6 aspect-square text-cyan-200">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
			<path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3"></path>
		</svg>
	</div>
</a>
## GUARDAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 px-4 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Guardar</span>
	<div class="flex items-center justify-center w-6 aspect-square text-cyan-200">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
			<path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
			<path d="M14 4l0 4l-6 0l0 -4"></path>
		</svg>
	</div>
</a>
## CONFIRMAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 px-4 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Confimar</span>
	<div class="flex items-center justify-center w-6 aspect-square text-cyan-200">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M5 12l5 5l10 -10"></path>
		</svg>
	</div>
</a>
## CANCELAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 px-4 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Cancelar</span>
	<div class="flex items-center justify-center w-6 aspect-square text-cyan-200">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M18 6l-12 12"></path>
			<path d="M6 6l12 12"></path>
		</svg>
	</div>
</a>
Complete button
Crear
Exportar
Guardar
Confirmar
Cancelar
Esquema
  • Texto [cyan-200]
  • Gradiente a [sky-500]
  • Gradiente b [sky-800]
  • Sombras [sky-200]
HTML

## CREAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 pl-4 pr-2 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Crear</span>
	<div class="flex items-center justify-center w-8 aspect-square text-cyan-200 group-hover:text-cyan-600 rounded-lg border border-cyan-200 bg-transparent group-hover:bg-sky-200 transition-all duration-150">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
			<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
		</svg>
	</div>
</a>
## EXPORTAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 pl-4 pr-2 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Exportar</span>
	<div class="flex items-center justify-center w-8 aspect-square text-cyan-200 group-hover:text-cyan-600 rounded-lg border border-cyan-200 bg-transparent group-hover:bg-sky-200 transition-all duration-150">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
			<path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3"></path>
		</svg>
	</div>
</a>
## GUARDAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 pl-4 pr-2 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Guardar</span>
	<div class="flex items-center justify-center w-8 aspect-square text-cyan-200 group-hover:text-cyan-600 rounded-lg border border-cyan-200 bg-transparent group-hover:bg-sky-200 transition-all duration-150">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
			<path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
			<path d="M14 4l0 4l-6 0l0 -4"></path>
		</svg>
	</div>
</a>
## CONFIRMAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 pl-4 pr-2 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Confirmar</span>
	<div class="flex items-center justify-center w-8 aspect-square text-cyan-200 group-hover:text-cyan-600 rounded-lg border border-cyan-200 bg-transparent group-hover:bg-sky-200 transition-all duration-150">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M5 12l5 5l10 -10"></path>
		</svg>
	</div>
</a>
## CANCELAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 pl-4 pr-2 py-2 rounded-xl bg-gradient-to-br from-sky-500 to-sky-800 shadow-sm hover:shadow-lg shadow-sky-200 hover:shadow-sky-200 hover:brightness-105 transition-all duration-300">
	<span class="text-cyan-200 text-base font-medium tracking-wide">Cancelar</span>
	<div class="flex items-center justify-center w-8 aspect-square text-cyan-200 group-hover:text-cyan-600 rounded-lg border border-cyan-200 bg-transparent group-hover:bg-sky-200 transition-all duration-150">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M18 6l-12 12"></path>
			<path d="M6 6l12 12"></path>
		</svg>
	</div>
</a>
Color Segundario
Minimal button
Exportar
Guardar
Confirmar
Cancelar
Esquema
  • Texto [amber-100]
  • Gradiente a [amber-400]
  • Gradiente b [amber-500]
  • Sombras [amber-200]
HTML

## EXPORTAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 px-4 py-2 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 shadow-sm hover:shadow-lg shadow-amber-200 hover:shadow-amber-200 hover:brightness-105 transition-all duration-300">
	<span class="text-amber-100 text-base font-medium tracking-wide">Exportar</span>
	<div class="flex items-center justify-center w-6 aspect-square text-amber-200">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
			<path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3"></path>
		</svg>
	</div>
</a>	
## GUARDAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 px-4 py-2 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 shadow-sm hover:shadow-lg shadow-amber-200 hover:shadow-amber-200 hover:brightness-105 transition-all duration-300">
	<span class="text-amber-100 text-base font-medium tracking-wide">Guardar</span>
	<div class="flex items-center justify-center w-6 aspect-square text-amber-200">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
			<path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
			<path d="M14 4l0 4l-6 0l0 -4"></path>
			</svg>
	</div>
</a>
## CONFIRMAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 px-4 py-2 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 shadow-sm hover:shadow-lg shadow-amber-200 hover:shadow-amber-200 hover:brightness-105 transition-all duration-300">
	<span class="text-amber-100 text-base font-medium tracking-wide">Confirmar</span>
	<div class="flex items-center justify-center w-6 aspect-square text-amber-200">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M5 12l5 5l10 -10"></path>
		</svg>
	</div>
</a>
## CANCELAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 px-4 py-2 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 shadow-sm hover:shadow-lg shadow-amber-200 hover:shadow-amber-200 hover:brightness-105 transition-all duration-300">
	<span class="text-amber-100 text-base font-medium tracking-wide">Cancelar</span>
	<div class="flex items-center justify-center w-6 aspect-square text-amber-200">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M18 6l-12 12"></path>
			<path d="M6 6l12 12"></path>
		</svg>
	</div>
</a>
Complete button
Exportar
Guardar
Confirmar
Cancelar
Esquema
  • Texto [amber-100]
  • Gradiente a [amber-400]
  • Gradiente b [amber-500]
  • Sombras [amber-200]
HTML

## EXPORTAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 pl-4 pr-2 py-2 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 shadow-sm hover:shadow-lg shadow-amber-200 hover:shadow-amber-200 hover:brightness-105 transition-all duration-300">
	<span class="text-amber-100 text-base font-medium tracking-wide">Exportar</span>
	<div class="flex items-center justify-center w-8 aspect-square text-amber-200 group-hover:text-amber-500 rounded-lg border border-amber-200 bg-transparent group-hover:bg-amber-200 transition-all duration-150">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
			<path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3"></path>
		</svg>
	</div>
</a>
## GUARDAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 pl-4 pr-2 py-2 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 shadow-sm hover:shadow-lg shadow-amber-200 hover:shadow-amber-200 hover:brightness-105 transition-all duration-300">
	<span class="text-amber-100 text-base font-medium tracking-wide">Guardar</span>
	<div class="flex items-center justify-center w-8 aspect-square text-amber-200 group-hover:text-amber-500 rounded-lg border border-amber-200 bg-transparent group-hover:bg-amber-200 transition-all duration-150">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
			<path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
			<path d="M14 4l0 4l-6 0l0 -4"></path>
		 </svg>
	</div>
</a>
## CONFIRMAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 pl-4 pr-2 py-2 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 shadow-sm hover:shadow-lg shadow-amber-200 hover:shadow-amber-200 hover:brightness-105 transition-all duration-300">
	<span class="text-amber-100 text-base font-medium tracking-wide">Confirmar</span>
	<div class="flex items-center justify-center w-8 aspect-square text-amber-200 group-hover:text-amber-500 rounded-lg border border-amber-200 bg-transparent group-hover:bg-amber-200 transition-all duration-150">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M5 12l5 5l10 -10"></path>
		 </svg>
	</div>
</a>
## CANCELAR ##
<a href="formularios.html" class="group flex items-center gap-x-2 pl-4 pr-2 py-2 rounded-xl bg-gradient-to-br from-amber-400 to-amber-500 shadow-sm hover:shadow-lg shadow-amber-200 hover:shadow-amber-200 hover:brightness-105 transition-all duration-300">
	<span class="text-amber-100 text-base font-medium tracking-wide">Cancelar</span>
	<div class="flex items-center justify-center w-8 aspect-square text-amber-200 group-hover:text-amber-500 rounded-lg border border-amber-200 bg-transparent group-hover:bg-amber-200 transition-all duration-150">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M18 6l-12 12"></path>
			<path d="M6 6l12 12"></path>
		</svg>
	</div>
</a>
Lista Roles
Total Usiarios 15
A
B
C
D
+11
Administrador
Editar Rol
Total Usiarios 2
C
D
Manager
Editar Rol
Esquema
  • Border [white]
  • Fondo [slate-50]
  • Sombras [indigo-800/20]
HTML
<div class="relative flex flex-col gap-y-4 p-4 rounded-xl border-2 border-solid border-white bg-slate-50 shadow-2xl shadow-indigo-800/20">
	<div class="flex justify-between items-center">
		<span class="text-xs text-sky-600">Total Usiarios 15</span>
		<div class="flex flex-row-reverse justify-start items-center translate-x-2 [&_div]:-translate-x-2">
			<div class="flex justify-center items-center w-6 xl:w-9 h-6 xl:h-9 text-sky-600 text-xs md:text-sm font-bold rounded-full border-2 border-white bg-white shadow-bubble">A</div>
			<div class="flex justify-center items-center w-6 xl:w-9 h-6 xl:h-9 text-sky-600 text-xs md:text-sm font-bold rounded-full border-2 border-white bg-white shadow-bubble">B</div>
			<div class="flex justify-center items-center w-6 xl:w-9 h-6 xl:h-9 text-sky-600 text-xs md:text-sm font-bold rounded-full border-2 border-white bg-white shadow-bubble">C</div>
			<div class="flex justify-center items-center w-6 xl:w-9 h-6 xl:h-9 text-sky-600 text-xs md:text-sm font-bold rounded-full border-2 border-white bg-white shadow-bubble">D</div>
			<div class="flex justify-center items-center w-6 xl:w-9 h-6 xl:h-9 text-sky-600 text-xs md:text-xs rounded-full border-2 border-white bg-blue-50 shadow-bubble">+11</div>
		</div>
	</div>
	<div>
		<span class="text-sky-800 text-2xl font-bold">Administrador</span>
		<div class="flex justify-between items-center text-sky-600">
			<a href="" class="text-sm">Editar Rol</a>
			<a href="">
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
					<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
				</svg>
			</a>
		</div>
	</div>
</div>
TOAST
Cotizaciones Se ha guardado el registro
Cotizaciones Nueva tareas existente
Cotizaciones Información incompleta
Cotizaciones Se ha producido un error
Toast de sistema / guardado
Sistema Minimal color Azul
Sistema Medium color Azul
Sistema Full color Azul
Esquema
  • Border [white]
  • Título [sky-700]
  • Mensaje [sky-600]
  • Fondo icono 1 - 2 [sky-200]
  • Fondo icono 3 [Grad-B sky 500-800]
  • Fondo 1 [slate-50]
  • Fondo 2 [sky-100]
  • Fondo 3 [sky-200]
  • Sombras [indigo-800/20]
HTML
## AZUL ##
## Minimal ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-slate-50 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-sky-700 border-2 border-white rounded-full bg-sky-200 shadow-bubble">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l5 5l10 -10"></path>
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-sky-700 text-base font-semibold" x-text="notice.text1">Sistema</span>
		<span class="text-sky-600 text-[10px] font-light leading-tight" x-text="notice.text2">Minimal color Esmeralda</span>
	</div>
	<div class="text-sky-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
## Medium ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-sky-100 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-sky-700 border-2 border-white rounded-full bg-sky-200 shadow-bubble">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l5 5l10 -10"></path>
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-sky-700 text-base font-semibold" x-text="notice.text1">Sistema</span>
		<span class="text-sky-600 text-[10px] font-light leading-tight" x-text="notice.text2">Medium color Esmeralda</span>
	</div>
	<div class="text-sky-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
## Full ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-sky-200 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-sky-100 rounded-full bg-gradient-to-b from-sky-500 to-sky-800">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l5 5l10 -10"></path>
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-sky-700 text-base font-semibold" x-text="notice.text1">Sistema</span>
		<span class="text-sky-600 text-[10px] font-light leading-tight" x-text="notice.text2">Full color Esmeralda</span>
	</div>
	<div class="text-sky-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
Toast de notificacion y mensajes
Notifiación Minimal color Esmeralda
Notifiación Medium Color Esmeralda
Notifiación Full Color Esmeralda
Esquema
  • Border [white]
  • Título [sky-700]
  • Mensaje [sky-600]
  • Título 2 - 3 [emerald-700]
  • Mensaje 2 - 3 [emerald-600]
  • Fondo icono 1 [emerald-200]
  • Fondo icono 2 [emerald-300]
  • Fondo icono 3 [Grad-B sky 300-500]
  • Fondo 1 [slate-50]
  • Fondo 2 [sky-100]
  • Fondo 3 [sky-200]
  • Sombras [indigo-800/20]
HTML
## Esmeralda ##
## Minimal ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-slate-50 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-emerald-700 border-2 border-white rounded-full bg-emerald-200 shadow-bubble">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
			<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-sky-700 text-base font-semibold" x-text="notice.text1">Notifiaci&oacute;n</span>
		<span class="text-sky-600 text-[10px] font-light leading-tight" x-text="notice.text2">Minimal color Esmeralda</span>
	</div>
	<div class="text-sky-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
# Medium #
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-emerald-50 bg-emerald-100 shadow-2xl shadow-emerald-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-emerald-700 border-2 border-emerald-50 rounded-full bg-emerald-300 shadow-bubble">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
			<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-emerald-700 text-base font-semibold" x-text="notice.text1">Notifiaci&oacute;n</span>
		<span class="text-emerald-600 text-[10px] font-light leading-tight" x-text="notice.text2">Medium Color Esmeralda</span>
	</div>
	<div class="text-emerald-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
## Full ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-emerald-50 bg-emerald-200 shadow-2xl shadow-emerald-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-white rounded-full bg-gradient-to-b from-emerald-300 to-emerald-500">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
			<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-emerald-700 text-base font-semibold" x-text="notice.text1">Notifiaci&oacute;n</span>
		<span class="text-emerald-600 text-[10px] font-light leading-tight" x-text="notice.text2">Full Color Esmeralda</span>
	</div>
	<div class="text-emerald-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
Toast de Alerta
Alerta Minial Color Ambar
Alerta Medium color ambar
Alerta Full color ambar
Esquema
  • Border [white]
  • Título 1 [sky-700]
  • Mensaje 1 [sky-600]
  • Título 2 [amber-600]
  • Mensaje 2 [amber-500]
  • Título 3 [amber-700]
  • Mensaje 3 [amber-600]
  • Icono 1 - 2 [amber-600]
  • Icono 3 [amber-100]
  • Fondo icono 1 [amber-200]
  • Fondo icono 2 [amber-200]
  • Fondo icono 3 [Grad-B amber 300-500]
  • Fondo 1 [slate-50]
  • Fondo 2 [amber-100]
  • Fondo 3 [amer-200]
  • Sombras [indigo-800/20]
HTML
## Amarillo ##
## Minimal ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-slate-50 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-amber-600 border-2 border-white rounded-full bg-amber-200 shadow-bubble">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 16v-4a4 4 0 0 1 8 0v4"></path><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><path d="M6 16m0 1a1 1 0 0 1 1 -1h10a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z"></path>
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-sky-700 text-base font-semibold" x-text="notice.text1">Alerta</span>
		<span class="text-sky-600 text-[10px] font-light leading-tight" x-text="notice.text2">Minial Color Ambar</span>
	</div>
	<div class="text-sky-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
## Medium ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-amber-100 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-amber-600 border-2 border-white rounded-full bg-amber-200 shadow-bubble">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 16v-4a4 4 0 0 1 8 0v4"></path><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><path d="M6 16m0 1a1 1 0 0 1 1 -1h10a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z"></path>
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-amber-600 text-base font-semibold" x-text="notice.text1">Alerta</span>
		<span class="text-amber-500 text-[10px] font-light leading-tight" x-text="notice.text2">Medium color ambar</span>
	</div>
	<div class="text-amber-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
## Full ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-amber-200 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-amber-100 rounded-full bg-gradient-to-b from-amber-300 to-amber-500">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 16v-4a4 4 0 0 1 8 0v4"></path><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"></path><path d="M6 16m0 1a1 1 0 0 1 1 -1h10a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z"></path>
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-amber-700 text-base font-semibold" x-text="notice.text1">Alerta</span>
		<span class="text-amber-600 text-[10px] font-light leading-tight" x-text="notice.text2">Full color ambar</span>
	</div>
	<div class="text-amber-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
Toast de Error
Error Minimal color rojo
Error Medium color rojo
Error Full color rojo
Esquema
  • Border [white]
  • Título 1 [sky-700]
  • Mensaje 1 [sky-600]
  • Título 2 - 3 [rose-600]
  • Mensaje 2 - 3 [rose-500]
  • Título 3 [rose-700]
  • Mensaje 3 [rose-600]
  • Icono 1 - 2 [rose-600]
  • Icono 3 [white]
  • Fondo icono 1 [rose-200]
  • Fondo icono 2 [rose-200]
  • Fondo icono 3 [Grad-B rose 300-500]
  • Fondo 1 [slate-50]
  • Fondo 2 [rose-50]
  • Fondo 3 [rose-200]
  • Sombras [indigo-800/20]
HTML
## Rojo ##
## Minimal ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-slate-50 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-amber-600 border-2 border-white rounded-full bg-rose-200 shadow-bubble">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path>
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-sky-700 text-base font-semibold" x-text="notice.text1">Error</span>
		<span class="text-sky-600 text-[10px] font-light leading-tight" x-text="notice.text2">Minimal color rojo</span>
	</div>
	<div class="text-sky-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
## Medium ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-rose-50 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-amber-600 border-2 border-white rounded-full bg-rose-200 shadow-bubble">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path>
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-rose-600 text-base font-semibold" x-text="notice.text1">Error</span>
		<span class="text-rose-500 text-[10px] font-light leading-tight" x-text="notice.text2">Medium color rojo</span>
	</div>
	<div class="text-rose-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>
## Full ##
<div class="relative flex items-center gap-x-2 pl-2 py-2 pr-4 mb-4 mr-4 w-80 rounded-xl border-2 border-solid border-white bg-rose-200 shadow-2xl shadow-indigo-800/20">
	<div class="flex-shrink-0 flex justify-center items-center w-10 aspect-square text-white rounded-full bg-gradient-to-b from-rose-300 to-rose-500">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path>
		</svg>
	</div>
	<div class="flex-grow grid">
		<span class="text-rose-700 text-base font-semibold" x-text="notice.text1">Error</span>
		<span class="text-rose-600 text-[10px] font-light leading-tight" x-text="notice.text2">Full color rojo</span>
	</div>
	<div class="text-rose-700">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
			<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
		</svg>
	</div>
</div>