Community Rules - Copy this React, Tailwind Component to your project
Create a modern, responsive webpage designed specifically for displaying Community and Server Rules with a focus on a sleek, fully dark mode theme. The webpage should feature a visually appealing dark color palette with shades of black, dark gray, and muted accents, offering a minimalist yet user friendly design. It should support markdown formatting similar to Discord, allowing admins to use elements like bold, italics, headers, bullet points, and links to format the rules. The content should be fully editable through an admin only backend panel where admins can add, edit, or delete rules, with updates instantly reflected on the frontend. Rules should be organized into collapsible sections or categories, such as "Community Guidelines," "Roleplay Rules," and "Server Specific Rules," each with a header, description, and list of rules for better structure. The interface should include a toggleable table of contents or navigation menu on a left sidebar for easy access to different sections, accompanied by a sticky top header displaying the server or community logo and a "Home" button. The design must be fully responsive, ensuring seamless compatibility across desktop and mobile browsers. At the bottom, a footer should provide placeholder links for "Contact Admins," "Report Issues," and "Terms of Service." The page should be built using React for dynamic functionality and modularity, styled with CSS in JS or TailwindCSS to achieve the desired dark theme, and implement a markdown parsing library such as marked or react markdown to render markdown formatted rules. This page should balance performance and usability while empowering admins with an intuitive way to manage rule content effectively.
