Transactional Email Template

Responsive HTML email for order confirmations.

email template responsive html | GPT 5.3 Ultra

Prompt

# Role
You are a Senior Email Developer and HTML Specialist with deep expertise in cross-client email rendering and responsive email design.

# Objective
Build a production-ready transactional email template for order confirmations that renders consistently across all major email clients (Gmail, Outlook, Apple Mail, Yahoo).

# Instructions
1. Create a table-based layout (600px max-width, centered):
   - Wrapper table with `width="100%"` and inner table with `max-width: 600px`
   - Use `align="center"` for centering — not CSS margin
2. Build the header section:
   - Logo placeholder image (centered, max-height: 40px)
   - Background color bar with brand accent
3. Build the body section:
   - Greeting line: "Hi {{customer_name}}, your order is confirmed!"
   - Order number and date in a highlighted box
4. Create the order summary table:
   - Columns: Item Name, Quantity, Price
   - Each row with subtle bottom border for separation
   - Subtotal row
   - Shipping row
   - Total row with bold, larger font
5. Add a CTA button:
   - "View Order" button with bulletproof button technique (VML fallback for Outlook)
   - Centered with padding
6. Build the footer:
   - Company address (CAN-SPAM compliance)
   - Social media icon links (placeholder images)
   - Unsubscribe link (required)
   - Muted text color for footer content

# Constraints
- Inline CSS only — no `<style>` blocks (Outlook strips them from non-`<head>` positions)
- Table-based layout only — no CSS Grid, Flexbox, or `<div>` layouts
- All images must include `alt` text and explicit `width`/`height` attributes
- Use `role="presentation"` on layout tables for accessibility
- Dark mode support: include `color-scheme: light dark` meta tag and test with inverted colors
- Maximum image width: 600px; use web-safe fonts with fallbacks

# Output Format
- Single `.html` file with complete `<!DOCTYPE html>` structure
- All CSS inlined on elements
- Use placeholder values wrapped in `{{mustache}}` syntax for dynamic content
- Include HTML comments marking each section for easy editing

Notes

Prompt

Role

You are a Senior Email Developer and HTML Specialist with deep expertise in cross-client email rendering and responsive email design.

Objective

Build a production-ready transactional email template for order confirmations that renders consistently across all major email clients (Gmail, Outlook, Apple Mail, Yahoo).

Instructions

Create a table-based layout (600px max-width, centered):
- Wrapper table with width="100%" and inner table with max-width: 600px
- Use align="center" for centering — not CSS margin
Build the header section:
- Logo placeholder image (centered, max-height: 40px)
- Background color bar with brand accent
Build the body section:
- Greeting line: “Hi {{customer_name}}, your order is confirmed!”
- Order number and date in a highlighted box
Create the order summary table:
- Columns: Item Name, Quantity, Price
- Each row with subtle bottom border for separation
- Subtotal row
- Shipping row
- Total row with bold, larger font
Add a CTA button:
- “View Order” button with bulletproof button technique (VML fallback for Outlook)
- Centered with padding
Build the footer:
- Company address (CAN-SPAM compliance)
- Social media icon links (placeholder images)
- Unsubscribe link (required)
- Muted text color for footer content

Constraints

Inline CSS only — no <style> blocks (Outlook strips them from non-<head> positions)
Table-based layout only — no CSS Grid, Flexbox, or <div> layouts
All images must include alt text and explicit width/height attributes
Use role="presentation" on layout tables for accessibility
Dark mode support: include color-scheme: light dark meta tag and test with inverted colors
Maximum image width: 600px; use web-safe fonts with fallbacks

Output Format

Single .html file with complete <!DOCTYPE html> structure
All CSS inlined on elements
Use placeholder values wrapped in {{mustache}} syntax for dynamic content
Include HTML comments marking each section for easy editing

Notes

Test in Litmus or Email on Acid for cross-client rendering verification.
Never use CSS Grid or Flexbox — tables are the only reliable layout method for Outlook.
Use the bulletproof button technique for CTA buttons to ensure Outlook compatibility.

Related Prompts

Newsletter Signup Form

Inline email capture with validation and success state.

# Role You are a Senior Email Developer and HTML Specialist with expertise in conversion-optimized signup forms and accessible interactive components. # Objective Design an inline newsletter signup form with real-time email validation, a polished success state, and a visually refined focus effect — optimized for embedding in landing pages and footers. # Instructions 1. Build a single-line form layout: - Email text input and submit button side by side on one row - Input takes majority width; button on the right - Rounded container with subtle border 2. Implement the email input: - Placeholder text: "Enter your email" - `type="email"` for native validation baseline - Gradient border effect on focus (animated or static) - Proper `<label>` element (visually hidden if needed, but present for screen readers) 3. Add client-side validation: - Validate email format on blur and on submit - Show error message below the input (red text, subtle fade-in) - Disable submit button while input is empty or invalid 4. Implement the success state: - On successful submission, replace the form with: - Animated checkmark icon (CSS or SVG) - Success message: "You're subscribed!" - Smooth transition between form and success state (300ms ease-out) 5. Style with dark mode aesthetics: - Dark input background, light placeholder text - Accent-colored submit button with hover brightness - Gradient border visible on focus state # Constraints - Semantic HTML with proper `<form>`, `<label>`, `<input>`, and ARIA attributes - Full keyboard navigation: Tab to input, Enter to submit - `aria-live="polite"` on the error/success message container for screen readers - No external dependencies — vanilla HTML, CSS, and JavaScript - Form should not actually submit — simulate with JavaScript state change - Max-width: 500px, centered # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include both error and success states in the implementation - Well-commented code with transitions clearly documented

newsletter form email +1

Claude 4.6 Opus

Collapsible Sidebar

A responsive sidebar navigation with icons.

# Role You are a Senior Frontend Developer specializing in accessible UI, responsive navigation, and dashboard layout patterns. # Objective Build a collapsible sidebar navigation with icon-based menu items, nested sections, and smooth expand/collapse transitions — suitable for dashboards and admin panels. # Instructions 1. Create a sidebar container: - Fixed to the left side of the viewport, full height - Two states: expanded (240px) and collapsed (64px, icons only) - Toggle button to switch between states (hamburger or chevron icon) - Smooth width transition (300ms ease) 2. Build the navigation menu: - 6–8 menu items, each with: - Icon (SVG or placeholder) on the left - Text label (visible only in expanded state, hidden in collapsed) - Active item highlighted with accent background and left border - Hover effect: subtle background highlight 3. Add nested/grouped sections: - Group items under section headers (e.g., "Main", "Settings") - Section headers visible in expanded state, hidden in collapsed - Optional: collapsible sub-menus with chevron indicators 4. Include a user section at the bottom: - Avatar (small circle) + user name + role - In collapsed state: show only avatar 5. Style with Tailwind CSS in dark mode: - Dark sidebar background, slightly different from main content area - Subtle border on the right edge - Consistent icon sizing and alignment # Constraints - Semantic HTML: `<nav>`, `<ul>`, `<li>`, `<a>` elements - Tailwind CSS only — no custom CSS - Add ARIA attributes: `aria-expanded`, `aria-label` on toggle button - Keyboard-navigable: Tab through menu items, Enter to select - Responsive: on mobile (<768px), sidebar becomes an overlay with backdrop - Transitions must respect `prefers-reduced-motion` media query # Output Format - Single HTML file using Tailwind CSS CDN - Include a dummy main content area to demonstrate the layout - Well-structured markup with comments for each section

sidebar menu responsive

GPT 5.3 Ultra