Course Detail Layout - Copy this Html, Tailwind Component to your project

**Purecode.ai 프롬프트:** > 온라인 강의 상세 페이지를 위한 반응형 웹 페이지 레이아웃을 생성해 주세요. > > **레이아웃 세부사항:** > **사이드바**는 왼쪽에 위치하며 강의 커리큘럼을 표시합니다. 사이드바에는 섹션과 강의 목록이 포함되며, 각 항목에는 제목과 번호가 표시됩니다. 섹션과 하위 강의가 계층 구조로 보이도록 구성하고, 사이드바는 다크 모드 배경과 깔끔하고 미니멀한 디자인을 적용하여 사용자가 메인 콘텐츠에 집중할 수 있도록 해 주세요. > **메인 콘텐츠 영역**은 중앙에 위치하며 강의 내용을 보여줄 수 있도록 합니다. 상단에는 섹션과 강의 제목이 표시되고, YouTube 비디오를 포함할 수 있는 공간을 준비합니다. > > **스타일링 선호 사항:** > 깔끔하고 모던한 디자인을 사용하며, 사이드바는 다크 모드, 메인 콘텐츠는 라이트 모드를 적용해 주세요. > 페이지 상단에 **홈으로 돌아가기** 버튼을 포함해 주세요. > 레이아웃이 반응형으로 제작되어 데스크탑과 모바일 환경 모두에 잘 적응할 수 있도록 해 주세요. > > **콘텐츠 세부사항:** > 사이드바에는 "Section 1. GraphQL이 뭐고 왜 쓰나요?"와 같은 섹션 이름이 표시되며, "1강: 강의소개 & 준비물"과 같은 하위 항목이 포함됩니다. > > **추가 인터랙티브 요소:** > 사이드바의 각 강의는 클릭 가능하여, 선택한 강의의 내용이 메인 콘텐츠 영역에 업데이트되도록 합니다. > 각 강의 페이지 하단에 “다음 강의” 버튼을 포함하여 다음 강의로 이동할 수 있도록 해 주세요.