tailwindcssとcssをhonoXとAIを使って学ぶ

import tailwindcss from "@tailwindcss/vite";
import honox from "honox/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    honox({
      client: { input: ["./app/style.css"] },
    }),
    tailwindcss(),
  ],
});

import { createRoute } from "honox/factory";

export default createRoute((c) => {
  return c.render(
    <div class="bg-gray-100 min-h-screen p-8">
      <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-lg">
        <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">
          CSS Dojo
        </h1>
      </div>
    </div>
  );
});

css_todo.mdを参照して、1番の内容を学習できるページをindex.tsxに追記してほしいです
この時、task1_practice.tsxには問題のひな形を作り、task1_answer.tsxには回答となる完全なcomponentを作ってください
practiceにはヒントとなるコメント、answerにはそのstyleが何をしているかをコメントしてください

# TailwindCSS学習課題

1. **基本的なレイアウトの作成**
   - ヘッダー、メインコンテンツ、フッターを含む基本的なページレイアウトを作成する。
   - FlexboxやGridを使用して、レスポンシブなレイアウトを作成する。

2. **ナビゲーションバーの作成**
   - 固定されたナビゲーションバーを作成し、リンクを配置する。
   - ホバー時のスタイル変更やドロップダウンメニューを追加する。

3. **カードコンポーネントの作成**
   - 画像、タイトル、テキストを含むカードコンポーネントを作成する。
   - グリッドレイアウトを使用して、複数のカードを並べる。

4. **フォームのスタイリング**
   - 入力フィールド、ラジオボタン、チェックボックス、セレクトボックスを含むフォームを作成する。
   - フォームのバリデーションメッセージやエラーメッセージのスタイリングを行う。

5. **モーダルウィンドウの作成**
   - ボタンをクリックすると表示されるモーダルウィンドウを作成する。
   - モーダルの背景やアニメーションを追加する。

6. **レスポンシブデザインの実装**
   - メディアクエリを使用して、異なる画面サイズに対応するレスポンシブデザインを実装する。
   - モバイルファーストのアプローチでデザインを作成する。

7. **アニメーションとトランジションの追加**
   - TailwindCSSのアニメーションクラスを使用して、要素のアニメーションを追加する。
   - ホバー時やクリック時のトランジションを追加する。

8. **カスタムテーマの作成**
   - TailwindCSSの設定ファイルを編集して、カスタムカラーやフォントを追加する。
   - プロジェクト全体で一貫したデザインを適用する。

import { createRoute } from "honox/factory";

export default createRoute((c) => {
  return c.render(
    <div class="bg-gray-100 min-h-screen p-8">
      <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-lg">
        <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">
          CSS Dojo
        </h1>
        <div class="space-y-4">
          <h2 class="text-xl font-semibold">練習課題</h2>
          <ul class="space-y-2">
            <li>
              <a
                href="/task1_practice"
                class="text-blue-600 hover:text-blue-800 hover:underline"
              >
                Task 1: 基本的なレイアウトの作成
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
});

import { createRoute } from "honox/factory";

export default createRoute((c) => {
  return c.render(
    <div class="container mx-auto p-4 bg-gray-100 rounded shadow">
      <header class="text-center mb-8">
        <h1 class="text-2xl font-bold mb-4">
          Task 1: 基本的なレイアウトの作成
        </h1>
        <p class="mb-4">
          このタスクでは、TailwindCSSを使用して基本的なページレイアウトを作成します。
          <br />
          以下の要件を満たすようにコードを修正してください：
        </p>
        <ul class="list-disc text-left max-w-md mx-auto mb-4">
          <li>
            ヘッダー、メインコンテンツ、フッターを含むレイアウトを作成する
          </li>
          <li>FlexboxまたはGridを使用してコンテンツを配置する</li>
          <li>
            レスポンシブなデザインにする（スマホとデスクトップで表示が変わる）
          </li>
        </ul>
      </header>

      {/* ここから実装を始めてください */}
      <div class="bg-white rounded-lg shadow-md p-4">
        {/* ヒント: このdivをページレイアウトのコンテナとして使用します */}
        {/* TODO: ヘッダー、メインコンテンツ、フッターを追加してください */}

        {/* ヘッダー部分 */}
        <header class="">
          {/* TODO: ヘッダーのスタイルを追加してください */}
          {/* ヒント: bg-blue-500, text-white, p-4, flex, justify-between などを使用 */}
          <h2>ウェブサイトのタイトル</h2>
          <nav>
            {/* TODO: ナビゲーションメニューのスタイルを追加してください */}
            {/* ヒント: flex, space-x-4 などを使用 */}
            <ul>
              <li>ホーム</li>
              <li>サービス</li>
              <li>お問い合わせ</li>
            </ul>
          </nav>
        </header>

        {/* メインコンテンツ部分 */}
        <main class="">
          {/* TODO: メインコンテンツのスタイルを追加してください */}
          {/* ヒント: p-4, flex, flex-col md:flex-row などを使用 */}

          {/* サイドバー */}
          <aside class="">
            {/* TODO: サイドバーのスタイルを追加してください */}
            {/* ヒント: w-full md:w-1/4, p-4, bg-gray-100 などを使用 */}
            <h3>サイドバー</h3>
            <ul>
              <li>リンク1</li>
              <li>リンク2</li>
              <li>リンク3</li>
            </ul>
          </aside>

          {/* コンテンツエリア */}
          <div class="">
            {/* TODO: コンテンツエリアのスタイルを追加してください */}
            {/* ヒント: w-full md:w-3/4, p-4 などを使用 */}
            <h3>メインコンテンツ</h3>
            <p>
              ここにメインコンテンツが入ります。TailwindCSSを使用してレイアウトを作成しています。
            </p>
          </div>
        </main>

        {/* フッター部分 */}
        <footer class="">
          {/* TODO: フッターのスタイルを追加してください */}
          {/* ヒント: bg-gray-800, text-white, p-4, text-center などを使用 */}
          <p>© 2025 サンプルウェブサイト</p>
        </footer>
      </div>

      {/* ヒント */}
      <div class="mt-8 p-4 bg-yellow-100 rounded-lg">
        <h3 class="font-bold text-lg mb-2">ヒント:</h3>
        <ul class="list-disc pl-5">
          <li>
            ヘッダーには <code>bg-blue-500</code>, <code>text-white</code>,{" "}
            <code>p-4</code> などのクラスを使用して目立たせましょう
          </li>
          <li>
            メインコンテンツには <code>flex</code> と{" "}
            <code>flex-col md:flex-row</code> を使用して、
            モバイルでは縦並び、デスクトップでは横並びにしましょう
          </li>
          <li>
            サイドバーとコンテンツエリアの幅は <code>w-full md:w-1/4</code> と{" "}
            <code>w-full md:w-3/4</code> などを使用して
            レスポンシブに調整しましょう
          </li>
          <li>
            フッターには <code>bg-gray-800</code>, <code>text-white</code>,{" "}
            <code>text-center</code> などを使用しましょう
          </li>
        </ul>
      </div>

      <div class="mt-8 text-center">
        <a href="/task1_answer">
          <button
            type="button"
            class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
          >
            答えを見る
          </button>
        </a>
      </div>
    </div>
  );
});