Gymcoding Course List - Copy this Html, Tailwind Component to your project

다음은 'Gymcoding 강의 목록 UI'를 디자인하기 위한 프롬프트입니다: **Prompt**: 디지털 교육 플랫폼 'Gymcoding'의 강의 목록 UI를 디자인해주세요. 목록의 각 강의 아이템은 다음과 같은 데이터를 포함합니다: **강의 썸네일 이미지**: 강의를 대표하는 이미지. **강의명**: 강의의 제목을 명확하게 보여줍니다. **강의 가격**: 가격이 표시되며, 무료 강의가 포함된 경우 별도 표시. **강의교안 이동 버튼**: 클릭 시 강의의 교안으로 이동. **강의수강 링크 버튼**: 강의 수강을 위한 링크 버튼. **카테고리 태그**: 예시로 #vue, #react 등 태그 형태로 표시. **난이도 표시**: 초급, 중급, 입문 등의 난이도를 나타냅니다. **기능 요구사항**: 1. **다크모드 지원**: 사용자들이 다크모드와 라이트모드 사이에서 전환할 수 있도록. 2. **검색기능**: 제목 또는 태그로 강의를 검색할 수 있는 검색바 제공. **디자인 스타일**: **모던하고 깔끔한 UI**로, 사용자가 쉽게 내용을 파악할 수 있도록 구성. 읽기 쉽고 군더더기 없이 간결한 레이아웃을 지향. 전문성과 심미성을 고려하여 **교육 플랫폼**에 적합한 디자인. **미니멀리즘**과 **최신 디자인 트렌드** 반영.