JSFiddle - React, Tailwind, and code Playground

by cleaver

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta>
    <title>Unsubscribe</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        color: inherit;
      }

      body {
        padding: 16px;
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 13px;
        color: rgba(0, 0, 0, .6);
        background: #f7f8ff url(https://assets.republic.com/assets/emails/unsubscribe/background-fdef0a2cb6fecccc4cfbebb7bcd27ce85b6b401bdd44d793867c620be2865747.png) no-repeat fixed 50% 100%;
        background-size: contain;
      }

      h1 {
        font-size: 50px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -.01em;
        color: #000;
        margin-bottom: 0.5em;
      }

      .logo {
        display: block;
      }

      .container {
        margin-top: 37vh;
        text-align: center;
      }

      @media (min-width: 0px) and (max-width: 767px) {
        h1 {
          font-size: 25px;
        }
      }

    </style>
  </head>

  <body>
    <div class="header"><a href="https://republic.com/"><img alt="Republic" class="logo" src="https://assets.republic.com/assets/logo/full/black/150x38/logo-211758c2027fc8268186d512a2119520a35358973648789a123d9fb6c3d5a37f.svg" /></a></div>
    <div class="container">
      <h1>You’ve been unsubscribed</h1>
      <p>Unsubscribed by accident? <a href="{{${set_user_to_subscribed_url}}">Resubscribe</a>&nbsp;&nbsp;·&nbsp;&nbsp;View your <a href="https://republic.com/settings/notifications">Email settings</a></p>
    </div>
  </body>

</html>