JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<div
  style="font-family: 'Arial', sans-serif; color: #333333; max-width: 800px; margin: auto; padding: 20px; border: 1px solid #dddddd; border-radius: 8px;"
>
  <p>
    Sehr geehrte{% if order.orderCustomer.salutation %} {{
    order.orderCustomer.salutation.translated.letterName }}{% endif %} {{
    order.orderCustomer.firstName }} {{ order.orderCustomer.lastName }},
  </p>

  <p>
    herzlichen Dank für Ihr Vertrauen und Ihre Bestellung bei
    <strong>{{ order.salesChannel.translated.name }}</strong> am {{
    order.orderDateTime|format_datetime('medium', 'short') }}. Wir hoffen, dass
    Sie mit Ihrer Bestellung voll und ganz zufrieden sind.
  </p>

  <p>
    Wir würden uns sehr freuen, wenn Sie sich einen Moment Zeit nehmen könnten,
    um <strong>Ihre Erfahrungen mit uns zu teilen</strong>. Ihre Bewertung ist
    für uns sehr wertvoll, da sie uns hilft, unseren Service kontinuierlich zu
    verbessern.
  </p>

  <p>
    Bitte klicken Sie auf den folgenden Link, um Ihre Bewertung abzugeben:<br />
    <a
      href="{{ config('ZweiPunktRatingReminderSW6.config.ratingLink') }}"
      style="color: #0066cc; text-decoration: underline;"
      >Bewertung abgeben</a
    >
  </p>

  <p>Vielen Dank im Voraus für Ihre Zeit und Ihr Feedback!</p>

  <p style="font-size: 14px; color: #777777; margin-top: 20px;">
    Sollten Sie Fragen haben oder weitere Unterstützung benötigen, zögern Sie
    nicht, uns zu kontaktieren.
  </p>
</div>