export default function TailwindExample() {
	return (
		<div className="rounded-lg border border-base-300 p-6 space-y-4">
			<div className="flex gap-3 flex-wrap">
				<button type="button" className="btn btn-primary">
					プライマリ
				</button>
				<button type="button" className="btn btn-secondary">
					セカンダリ
				</button>
				<button type="button" className="btn btn-error">
					エラー
				</button>
			</div>
			<div className="card bg-base-200 shadow-sm max-w-xs">
				<div className="card-body">
					<h3 className="card-title text-base">カードコンポーネント</h3>
					<p className="text-sm text-base-content/70">
						Tailwind CSSのクラスを組み合わせるだけで、こうしたUIが作れます。
					</p>
				</div>
			</div>
		</div>
	);
}