JSX 例

const widthClasses = ["w-1/6","w-1/4","w-1/2","w-2/3","w-5/6","w-full"];
const colorClasses = ["bg-rose-500","bg-orange-500","bg-amber-400","bg-lime-500","bg-emerald-500","bg-emerald-600"];

  

メインパネルの JSX 例（フォーム全体）

<div className="w-full max-w-lg bg-white rounded-xl shadow-xl p-6">
  <div className="flex items-start justify-between">
    <div>
      <h2 className="text-xl font-semibold text-slate-900">パスワード変更</h2>
      <p className="text-sm text-slate-500 mt-1">新しいパスワードは 8 文字以上にしてください。</p>
    </div>
    <span className="text-xs font-medium px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700">
      セキュリティ
    </span>
  </div>

  <form className="mt-6 space-y-4">
    <div>
      <label htmlFor="currentPassword" className="block text-sm font-medium text-slate-700">
        現在のパスワード
      </label>
      <input
        id="currentPassword"
        name="currentPassword"
        type="password"
        autoComplete="current-password"
        placeholder="現在のパスワード"
        required
        className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:ring-sky-500"
      />
    </div>

    <div>
      <label htmlFor="newPassword" className="block text-sm font-medium text-slate-700">
        新しいパスワード
      </label>
      <input
        id="newPassword"
        name="newPassword"
        type="password"
        autoComplete="new-password"
        placeholder="新しいパスワード"
        required
        className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:ring-sky-500"
      />
      <div className="mt-2">
        <div className="h-2 w-full rounded-full bg-slate-200">
          <div className="h-2 w-1/2 rounded-full bg-amber-400" />
        </div>
        <p className="text-xs text-slate-500 mt-1">強度: ふつう</p>
      </div>
    </div>

    <div>
      <label htmlFor="confirmPassword" className="block text-sm font-medium text-slate-700">
        新しいパスワード（確認）
      </label>
      <input
        id="confirmPassword"
        name="confirmPassword"
        type="password"
        autoComplete="new-password"
        placeholder="もう一度入力"
        required
        className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-sky-500 focus:ring-sky-500"
      />
    </div>

    <div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
      <p className="font-medium text-slate-700">パスワードの条件</p>
      <ul className="mt-2 space-y-1">
        <li className="flex items-center gap-2">
          <span className="h-2 w-2 rounded-full bg-emerald-500" />
          8 文字以上
        </li>
        <li className="flex items-center gap-2">
          <span className="h-2 w-2 rounded-full bg-emerald-500" />
          英字と数字を含む
        </li>
        <li className="flex items-center gap-2">
          <span className="h-2 w-2 rounded-full bg-slate-300" />
          記号を 1 文字以上
        </li>
      </ul>
    </div>

    <div className="flex flex-col gap-3 pt-2 sm:flex-row sm:items-center sm:justify-between">
      <label className="inline-flex items-center gap-2 text-sm text-slate-600">
        <input type="checkbox" className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500" />
        すべての端末でログアウトする
      </label>
      <div className="flex gap-2">
        <button type="button" className="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
          キャンセル
        </button>
        <button type="submit" className="rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-700">
          変更を保存
        </button>
      </div>
    </div>
  </form>
</div>