Admin Dashboard Interface - Copy this Html, Tailwind Component to your project

Design and build a responsive admin dashboard interface for a WordPress plugin called 'Générateur IA' using HTML, Tailwind CSS for styling, and JavaScript for interactivity. The interface should follow these specifications: General Layout: The page consists of two main sections: Sidebar Navigation on the left with a white background, blue accents, and active item highlighting. Main Content Area on the right with a header, step navigation, and a multi-step form. Sidebar: Include a title at the top: "Générateur IA" in blue text. Navigation menu items: Dashboard (home icon) Campagnes (active item with a blue background, chart-line icon) Sites Web (globe icon) Templates (layer-group icon) IA Profiles (user icon) At the bottom, include a settings option labeled "Paramètres IA" (cog icon). Main Content Area: Display a top header with breadcrumb navigation showing "Campagnes" in blue text. Include a horizontal progress bar with 4 steps: Step 1 - Select Source: A grid layout with 6 selectable options (2 rows, 3 columns): Keywords, RSS Feed, GNews, Sitemap, URLs, and YouTube Each option should be a card-like button with an icon, a label, and a hover effect. Highlight the selected option with a blue border and light blue background. Include a text input below the options with the placeholder "Entrez vos mots clés...". Step 2 - Page Structure: Implement a drag-and-drop interface: Available Sections on the left (Header, Content Block, Image Section, CTA Section) Page Layout on the right as a drop zone area with a dashed border. Users can drag sections from the left and drop them into the layout area. Each dropped item should include a textarea for entering a prompt. Step 3 - Configure Settings: Include a toggle switch for "Enable Auto-Generation". Use a standard toggle switch design with a blue active state. Step 4 - Generated Content Results: Display the content returned from the API call in a formatted and readable manner. Fetch the generated content from the API endpoint http://localhost:8000/api/generate-content. Handle the API response format: json Copier le code { "success": true, "content": [ "\"Discover premium underware for ultimate comfort and style at home. Shop our collection for quality undergarments designed to elevate your everyday wear.\"", "Explore our range of high-quality underwear that offers both comfort and style for your everyday lounging. Elevate your wardrobe with our premium collection of undergarments designed to enhance your daily wear.", "Explore our range of high-quality underwear that offers both comfort and style for your everyday lounging. Elevate your wardrobe with our premium collection of undergarments designed to enhance your daily wear.", "Explore our range of high-quality underwear that offers both comfort and style for your everyday lounging. Elevate your wardrobe with our premium collection of undergarments designed to enhance your daily wear." ], "message": "Page content generated successfully" } Display the content in a card-like container with a clean, readable format: Use a list or numbered format to display each content item. Include a success message at the top: "Page content generated successfully". Provide a fallback message if the content is empty or if the API request fails. JavaScript Functionality: Step Navigation: Allow users to navigate between steps using "Previous" and "Next" buttons. Update the step progress bar to reflect the current step. Source Selection: Highlight the selected option with a blue border and a light blue background. Ensure only one option is selected at a time (radio button behavior without visible indicators). Drag and Drop: Enable drag-and-drop functionality for building the page layout. Allow users to add and remove sections dynamically. API Integration: Send a POST request to http://localhost:8000/api/generate-content with form data when the user clicks "Generate" on the last step. Display a loading spinner while waiting for the API response. Parse the API response and display the generated content in a user-friendly format: Show each text item as a separate paragraph or list item. Provide visual feedback for successful content generation, such as a green checkmark icon. Handle any errors gracefully with an error message in a red alert box. Design and Style Guidelines: Use Tailwind CSS for styling. Apply a light color palette with shades of blue, white, and soft gray accents. Use smooth transitions for hover effects, selected states, and step navigation. Ensure the design is fully responsive and works well on different screen sizes.