A
Anonymous

Course Module Page - Copy this React, Tailwind Component to your project

Design a responsive course module page featuring a sticky navbar with "CourseGen AI" on the left and "example@gmail.com" on the right. Below the navbar, create a super section with the heading "All 'Course' Modules" and a subheading: "Your personalized course has 10 modules," set against a background color of #e2eaec. Beneath this, display module cards with each card featuring a logo, followed by the module title, such as "1. Introduction to Programming Concepts." Include a description under each title, for example: "This module provides an overview of fundamental programming concepts, including variables, data types, and control structures. Learners will gain a solid foundation in understanding how programming languages function and the basics of writing simple programs." Add a "Start Module" button for each card. Ensure the design is user friendly and fully responsive across all devices, with multiple cards displaying as needed. At the bottom, include a footer with the website's name or logo, followed by links for "Free Online Courses," "Pricing," "Affiliate Program," "Contact Us," "Changelog," "About Us," "Privacy Policy," and "Terms & Conditions," maintaining a clean, intuitive layout across different screen sizes.

Prompt
Component Preview

About

CourseModulePage - A responsive design with a sticky navbar, module cards, and a footer. Built with React and Tailwind. Copy component code!

Share

Last updated 1 month ago