A
Anonymous

Professional Course Overview

Create a professional course inner section for a responsive website. The design should include the following elements: Course Heading: At the top of the page, there will be a bold and professionally styled course title. Course Thumbnail: Below the heading, place a high quality thumbnail image representing the course. Two Sections Under the Thumbnail: The page should be split into two sections: Left Section (75% Width): This section will contain a detailed description of the course. The text should be professionally styled, easy to read, and in a simple yet elegant font. Right Section (25% Width): This section will contain dropdown menus that outline the course chapters. A light line should separate the two sections to create a clean and organized look. Dropdowns for Chapters: The right section should feature dropdowns for each chapter. The first dropdown should be titled "First Chapter". When the dropdown is clicked, it should expand to reveal the following three items, written in bold and professional text: Introduction What You Will Learn Course Outline Responsive and Animated: The page should be fully responsive, adjusting smoothly across all screen sizes (desktop, tablet, and mobile). The animations should be subtle, making the dropdowns and other elements appear gracefully when interacted with, without overwhelming the user experience. Styling: Use simple yet professional fonts, colors, and layout. The theme should blend light blue and light purple tones to create a soft, visually appealing design. Ensure the text styles are clean and elegant to give the page a polished, modern look.

Prompt
Component Preview

About

Create a sleek, responsive course page featuring a bold title, high-quality thumbnail, detailed description, and organized dropdown chapters with subtle animations using Tailwind CSS and React.

Share

Last updated 1 month ago