Collapse Focus

                    <section class="p-6 max-w-md mx-auto">
  <!-- 基础折叠组件 - 使用focus触发 -->
  <div tabindex="0" class="border border-gray-300 bg-white rounded-md overflow-hidden cursor-pointer group">
    <!-- 标题部分 -->
    <div class="p-4 font-semibold">
      How do I create an account?
    </div>
    
    <!-- 内容部分 - 初始隐藏，focus时显示 -->
    <div class="px-4 pb-4 pt-0 text-sm max-h-0 group-focus:max-h-96 overflow-hidden transition-all duration-300 group-focus:pt-2">
      Click the "Sign Up" button in the top right corner and follow the registration process.
    </div>
  </div>
</section>

<style>
  /* 添加必要的样式，使用纯CSS实现折叠效果 */
  div[tabindex="0"]:focus div:last-child {
    max-height: 100px;
    padding-top: 0.5rem;
  }
</style>