Logo Clouds

export default function Default() {
	return (
		<nav className="rounded-container grid w-full grid-cols-1 gap-1 overflow-hidden md:grid-cols-3">
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				Twitch
			</a>
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				YouTube
			</a>
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				TikTok
			</a>
		</nav>
	);
}

export default function Rows() {
	return (
		<nav className="rounded-container grid w-full grid-cols-2 gap-1 overflow-hidden md:grid-cols-4">
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				Optimize
			</a>
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				Brand
			</a>
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				Mesh
			</a>
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				Matrix
			</a>
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				Utilize
			</a>
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				Syndicate
			</a>
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				Incubate
			</a>
			<a className="card preset-filled-surface-100-900 rounded-none p-4 py-8 text-center" href="#">
				Orchestrate
			</a>
		</nav>
	);
}