React Email Transactional Template

Design one transactional email as a React Email component that survives real clients. EMAIL Type: [RECEIPT | MAGIC LINK | INVITE | USAGE ALERT | TRIAL ENDING] Product: [PRODUCT] From name: [FROM] Trigger: [EVENT] Required facts in the body: [LIST] Primary action URL: [WHAT IT DOES] Legal / footer lines: [ADDRESS, REASON THEY GOT THIS] Brand: one accent [HEX], background [HEX], type stack that is email-safe Locales later: [YES | NO] — if yes, no concatenated sentences DELIVER 1) The component in React Email (Html, Head, Preview, Body, Container, Section, Text, Button, Hr). Props are a typed interface. No any. 2) Preview text that is not a repeat of the H1 and does not start with "This email..." 3) Layout notes that are actually about email: max width 600, bulletproof button (not only CSS), logo as a hosted img with alt, dark-mode colors that do not turn the button invisible. State which CSS you are refusing to use (flex on the outer layout, web fonts as the only face). 4) Plain-text alternative, written, not stripped HTML. 5) Subject line options (3) under 50 characters, no emoji, no "Re:". 6) A test matrix: Gmail web, Apple Mail, Outlook desktop. For each, the one thing in this design most likely to break and the mitigation you already applied. 7) Sample props for a normal send and an edge send (long product name, missing optional field). The magic link or action must be visible as a URL in text as well as a button. Do not hide the only copy of the code inside an image.