<x-app-layout>
	<div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
		<span class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">Default</span>
		<span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">Dark</span>
		<span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Red</span>
		<span class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Green</span>
		<span class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">Yellow</span>
		<span class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300">Indigo</span>
		<span class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">Purple</span>
		<span class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-pink-900 dark:text-pink-300">Pink</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">Orange</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300">Cyan</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300">Teal</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-300">Lime</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">Emerald</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300">Rose</span>
	</div>

	<div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
		<span class="bg-blue-200 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-800 dark:text-blue-300">Default</span>
		<span class="bg-gray-200 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">Dark</span>
		<span class="bg-red-200 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-800 dark:text-red-300">Red</span>
		<span class="bg-green-200 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-800 dark:text-green-300">Green</span>
		<span class="bg-yellow-200 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-800 dark:text-yellow-300">Yellow</span>
		<span class="bg-indigo-200 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-800 dark:text-indigo-300">Indigo</span>
		<span class="bg-purple-200 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-800 dark:text-purple-300">Purple</span>
		<span class="bg-pink-200 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-pink-800 dark:text-pink-300">Pink</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-orange-200 text-orange-800 dark:bg-orange-800 dark:text-orange-300">Orange</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-cyan-200 text-cyan-800 dark:bg-cyan-800 dark:text-cyan-300">Cyan</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-teal-200 text-teal-800 dark:bg-teal-800 dark:text-teal-300">Teal</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-lime-200 text-lime-800 dark:bg-lime-800 dark:text-lime-300">Lime</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-emerald-200 text-emerald-800 dark:bg-emerald-800 dark:text-emerald-300">Emerald</span>
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-rose-200 text-rose-800 dark:bg-rose-800 dark:text-rose-300">Rose</span>

		<!-- Amber -->
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-amber-200 text-amber-800 dark:bg-amber-800 dark:text-amber-300">Amber</span>

		<!-- Sky -->
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-sky-200 text-sky-800 dark:bg-sky-800 dark:text-sky-300">Sky</span>

		<!-- Slate -->
		<span class="text-xs font-medium me-2 px-2.5 py-0.5 rounded bg-slate-500 text-slate-200 dark:bg-slate-500 dark:text-slate-300">Slate</span>
	</div>

	<div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
		<span class="bg-blue-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Default</span>
		<span class="bg-gray-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Dark</span>
		<span class="bg-red-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Red</span>
		<span class="bg-green-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Green</span>
		<span class="bg-yellow-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Yellow</span>
		<span class="bg-indigo-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Indigo</span>
		<span class="bg-purple-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Purple</span>
		<span class="bg-pink-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Pink</span>
		<span class="bg-orange-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Orange</span>
		<span class="bg-cyan-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Cyan</span>
		<span class="bg-teal-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Teal</span>
		<span class="bg-lime-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Lime</span>
		<span class="bg-emerald-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Emerald</span>
		<span class="bg-rose-500 text-xs font-medium me-2 px-2.5 py-0.5 rounded">Rose</span>
	</div>

	{{ phpinfo() }}
</x-app-layout>
