Response Details (ID: 633 - UIGEN-X-32B-0727)

Text Before HTML:

We are building an expense report submission form with receipt upload.
 The design should be inspired by the provided template but tailored for an expense report.
 We'll use a dark theme with an accent color, but we can adjust the colors to fit the context.
 The form should include:
   - Fields for expense details: date, category, amount, description.
   - A receipt upload section (with drag and drop or file input).
   - A submit button.

 We'll structure the page similarly to the template, with a header, main content, and footer.

 Steps:
 1. Set up the HTML structure with Tailwind CSS via CDN.
 2. Define custom colors in the style tag (inspired by the template but adjusted for expense report).
 3. Create a header with a logo and navigation (simplified for this form).
 4. In the main content, create a form with:
      - A heading: "Expense Report Submission"
      - Form fields: date, category (dropdown), amount, description (textarea), and receipt upload.
      - The receipt upload should have a drag-and-drop area and a file input.
 5. Style the form to match the dark theme and use the accent color for buttons and highlights.
 6. Add a footer.

 We'll use the same animation and interaction patterns as the template (like the appear animation).

 Let's choose:
   --color-bg-dark: #0f172a (a deep blue-gray)
   --color-text-muted: rgba(255, 255, 255, 0.4)
   --color-text-subtle: #94a3b8 (a light gray)
   --color-bg-alt: #1e293b (a lighter blue-gray for cards)
   --color-text-light: #f1f5f9 (almost white)
   --color-primary: #3b82f6 (a bright blue for accents)
   --color-primary-light-bg: #dbeafe (for text on primary buttons, but we won't use it much in dark mode)
   --color-accent: #10b981 (a green for positive actions, but we can use the primary for buttons)

 However, note: the template uses a gradient for the logo. We can use a simple logo for our form.

 We'll adjust the form to have a card-like appearance for the input fields.

 Important: We are not using the entire template, just the structure and design principles.

 Let's code accordingly.


# Expense Report Submission Form with Receipt Upload

I'll create a modern, professional expense report form with receipt upload functionality using Tailwind CSS. The design will be clean, intuitive, and visually appealing with a dark theme and accent colors.

Generated HTML Page:

Text After HTML:

## Key Features of the Expense Report Form

1. **Modern Dark Theme Design** - Professional dark UI with blue and teal accents for a corporate feel
2. **Intuitive Expense Details Form** - Clean layout with:
   - Date picker
   - Expense category dropdown
   - Amount input with currency selector
   - Description text area
   - Department and employee ID fields

3. **Receipt Upload Section** - With:
   - Drag and drop functionality
   - File type and size validation
   - Visual preview area for uploaded receipts
   - Browse files button

4. **Report Summary Panel** - Right sidebar showing:
   - Total expenses
   - Receipt count
   - Submission status
   - Submit button with hover effects

5. **Recent Reports Section** - Displaying:
   - Approved, pending, and rejected reports
   - Expense details and status indicators
   - Team member avatars

6. **Responsive Design** - Works on mobile, tablet, and desktop screens
7. **Animations** - Smooth transitions and scroll animations for better UX

The design follows modern UI principles with appropriate spacing, consistent typography, and visual hierarchy to create a professional expense reporting experience.