Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email from Patreon</title>
    <style type="text/css" data-styled-components="" data-styled-components-is-local="false">
      @media only screen and (min-width:30em) {
        .container {
          width: 31rem;
        }
        .col-sm,
        .col-sm-1,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9,
        .col-sm-offset-1,
        .col-sm-offset-10,
        .col-sm-offset-11,
        .col-sm-offset-12,
        .col-sm-offset-2,
        .col-sm-offset-3,
        .col-sm-offset-4,
        .col-sm-offset-5,
        .col-sm-offset-6,
        .col-sm-offset-7,
        .col-sm-offset-8,
        .col-sm-offset-9 {
          box-sizing: border-box;
          -webkit-box-flex: 0;
          -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          padding-right: .5rem;
          padding-left: .5rem;
        }
        .col-sm {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          -webkit-flex-grow: 1;
          -ms-flex-grow: 1;
          flex-grow: 1;
          -webkit-flex-basis: 0;
          -ms-flex-preferred-size: 0;
          -webkit-flex-basis: 0;
          -ms-flex-basis: 0;
          flex-basis: 0;
          max-width: 100%;
        }
        .col-sm-1 {
          -webkit-flex-basis: 8.333%;
          -ms-flex-preferred-size: 8.333%;
          -webkit-flex-basis: 8.333%;
          -ms-flex-basis: 8.333%;
          flex-basis: 8.333%;
          max-width: 8.333%;
        }
        .col-sm-2 {
          -webkit-flex-basis: 16.667%;
          -ms-flex-preferred-size: 16.667%;
          -webkit-flex-basis: 16.667%;
          -ms-flex-basis: 16.667%;
          flex-basis: 16.667%;
          max-width: 16.667%;
        }
        .col-sm-3 {
          -webkit-flex-basis: 25%;
          -ms-flex-preferred-size: 25%;
          -webkit-flex-basis: 25%;
          -ms-flex-basis: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }
        .col-sm-4 {
          -webkit-flex-basis: 33.333%;
          -ms-flex-preferred-size: 33.333%;
          -webkit-flex-basis: 33.333%;
          -ms-flex-basis: 33.333%;
          flex-basis: 33.333%;
          max-width: 33.333%;
        }
        .col-sm-5 {
          -webkit-flex-basis: 41.667%;
          -ms-flex-preferred-size: 41.667%;
          -webkit-flex-basis: 41.667%;
          -ms-flex-basis: 41.667%;
          flex-basis: 41.667%;
          max-width: 41.667%;
        }
        .col-sm-6 {
          -webkit-flex-basis: 50%;
          -ms-flex-preferred-size: 50%;
          -webkit-flex-basis: 50%;
          -ms-flex-basis: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }
        .col-sm-7 {
          -webkit-flex-basis: 58.333%;
          -ms-flex-preferred-size: 58.333%;
          -webkit-flex-basis: 58.333%;
          -ms-flex-basis: 58.333%;
          flex-basis: 58.333%;
          max-width: 58.333%;
        }
        .col-sm-8 {
          -webkit-flex-basis: 66.667%;
          -ms-flex-preferred-size: 66.667%;
          -webkit-flex-basis: 66.667%;
          -ms-flex-basis: 66.667%;
          flex-basis: 66.667%;
          max-width: 66.667%;
        }
        .col-sm-9 {
          -webkit-flex-basis: 75%;
          -ms-flex-preferred-size: 75%;
          -webkit-flex-basis: 75%;
          -ms-flex-basis: 75%;
          flex-basis: 75%;
          max-width: 75%;
        }
        .col-sm-10 {
          -webkit-flex-basis: 83.333%;
          -ms-flex-preferred-size: 83.333%;
          -webkit-flex-basis: 83.333%;
          -ms-flex-basis: 83.333%;
          flex-basis: 83.333%;
          max-width: 83.333%;
        }
        .col-sm-11 {
          -webkit-flex-basis: 91.667%;
          -ms-flex-preferred-size: 91.667%;
          -webkit-flex-basis: 91.667%;
          -ms-flex-basis: 91.667%;
          flex-basis: 91.667%;
          max-width: 91.667%;
        }
        .col-sm-12 {
          -webkit-flex-basis: 100%;
          -ms-flex-preferred-size: 100%;
          -webkit-flex-basis: 100%;
          -ms-flex-basis: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }
        .col-sm-offset-1 {
          margin-left: 8.333%;
        }
        .col-sm-offset-2 {
          margin-left: 16.667%;
        }
        .col-sm-offset-3 {
          margin-left: 25%;
        }
        .col-sm-offset-4 {
          margin-left: 33.333%;
        }
        .col-sm-offset-5 {
          margin-left: 41.667%;
        }
        .col-sm-offset-6 {
          margin-left: 50%;
        }
        .col-sm-offset-7 {
          margin-left: 58.333%;
        }
        .col-sm-offset-8 {
          margin-left: 66.667%;
        }
        .col-sm-offset-9 {
          margin-left: 75%;
        }
        .col-sm-offset-10 {
          margin-left: 83.333%;
        }
        .col-sm-offset-11 {
          margin-left: 91.667%;
        }
        .start-sm {
          -webkit-box-pack: start;
          -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
          -webkit-box-pack: start;
          -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
          justify-content: flex-start;
          text-align: start;
        }
        .center-sm {
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          text-align: center;
        }
        .end-sm {
          -webkit-box-pack: end;
          -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
          -webkit-box-pack: end;
          -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
          justify-content: flex-end;
          text-align: end;
        }
        .top-sm {
          -webkit-box-align: start;
          -webkit-align-items: flex-start;
          -ms-flex-align: start;
          -webkit-align-items: flex-start;
          -webkit-box-align: flex-start;
          -ms-flex-align: flex-start;
          align-items: flex-start;
        }
        .middle-sm {
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
        .bottom-sm {
          -webkit-box-align: end;
          -webkit-align-items: flex-end;
          -ms-flex-align: end;
          -webkit-align-items: flex-end;
          -webkit-box-align: flex-end;
          -ms-flex-align: flex-end;
          align-items: flex-end;
        }
        .around-sm {
          -webkit-justify-content: space-around;
          -ms-flex-pack: distribute;
          -webkit-box-pack: space-around;
          -webkit-justify-content: space-around;
          -ms-flex-pack: space-around;
          justify-content: space-around;
        }
        .between-sm {
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
          -webkit-box-pack: space-between;
          -webkit-justify-content: space-between;
          -ms-flex-pack: space-between;
          justify-content: space-between;
        }
        .first-sm {
          -webkit-box-ordinal-group: 0;
          -webkit-order: -1;
          -ms-flex-order: -1;
          -webkit-order: -1;
          -ms-flex-order: -1;
          order: -1;
        }
        .last-sm {
          -webkit-box-ordinal-group: 2;
          -webkit-order: 1;
          -ms-flex-order: 1;
          -webkit-order: 1;
          -ms-flex-order: 1;
          order: 1;
        }
      }

      @media only screen and (min-width:48em) {
        .container {
          width: 49rem;
        }
        .col-md,
        .col-md-1,
        .col-md-10,
        .col-md-11,
        .col-md-12,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-5,
        .col-md-6,
        .col-md-7,
        .col-md-8,
        .col-md-9,
        .col-md-offset-1,
        .col-md-offset-10,
        .col-md-offset-11,
        .col-md-offset-12,
        .col-md-offset-2,
        .col-md-offset-3,
        .col-md-offset-4,
        .col-md-offset-5,
        .col-md-offset-6,
        .col-md-offset-7,
        .col-md-offset-8,
        .col-md-offset-9 {
          box-sizing: border-box;
          -webkit-box-flex: 0;
          -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          padding-right: .5rem;
          padding-left: .5rem;
        }
        .col-md {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          -webkit-flex-grow: 1;
          -ms-flex-grow: 1;
          flex-grow: 1;
          -webkit-flex-basis: 0;
          -ms-flex-preferred-size: 0;
          -webkit-flex-basis: 0;
          -ms-flex-basis: 0;
          flex-basis: 0;
          max-width: 100%;
        }
        .col-md-1 {
          -webkit-flex-basis: 8.333%;
          -ms-flex-preferred-size: 8.333%;
          -webkit-flex-basis: 8.333%;
          -ms-flex-basis: 8.333%;
          flex-basis: 8.333%;
          max-width: 8.333%;
        }
        .col-md-2 {
          -webkit-flex-basis: 16.667%;
          -ms-flex-preferred-size: 16.667%;
          -webkit-flex-basis: 16.667%;
          -ms-flex-basis: 16.667%;
          flex-basis: 16.667%;
          max-width: 16.667%;
        }
        .col-md-3 {
          -webkit-flex-basis: 25%;
          -ms-flex-preferred-size: 25%;
          -webkit-flex-basis: 25%;
          -ms-flex-basis: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }
        .col-md-4 {
          -webkit-flex-basis: 33.333%;
          -ms-flex-preferred-size: 33.333%;
          -webkit-flex-basis: 33.333%;
          -ms-flex-basis: 33.333%;
          flex-basis: 33.333%;
          max-width: 33.333%;
        }
        .col-md-5 {
          -webkit-flex-basis: 41.667%;
          -ms-flex-preferred-size: 41.667%;
          -webkit-flex-basis: 41.667%;
          -ms-flex-basis: 41.667%;
          flex-basis: 41.667%;
          max-width: 41.667%;
        }
        .col-md-6 {
          -webkit-flex-basis: 50%;
          -ms-flex-preferred-size: 50%;
          -webkit-flex-basis: 50%;
          -ms-flex-basis: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }
        .col-md-7 {
          -webkit-flex-basis: 58.333%;
          -ms-flex-preferred-size: 58.333%;
          -webkit-flex-basis: 58.333%;
          -ms-flex-basis: 58.333%;
          flex-basis: 58.333%;
          max-width: 58.333%;
        }
        .col-md-8 {
          -webkit-flex-basis: 66.667%;
          -ms-flex-preferred-size: 66.667%;
          -webkit-flex-basis: 66.667%;
          -ms-flex-basis: 66.667%;
          flex-basis: 66.667%;
          max-width: 66.667%;
        }
        .col-md-9 {
          -webkit-flex-basis: 75%;
          -ms-flex-preferred-size: 75%;
          -webkit-flex-basis: 75%;
          -ms-flex-basis: 75%;
          flex-basis: 75%;
          max-width: 75%;
        }
        .col-md-10 {
          -webkit-flex-basis: 83.333%;
          -ms-flex-preferred-size: 83.333%;
          -webkit-flex-basis: 83.333%;
          -ms-flex-basis: 83.333%;
          flex-basis: 83.333%;
          max-width: 83.333%;
        }
        .col-md-11 {
          -webkit-flex-basis: 91.667%;
          -ms-flex-preferred-size: 91.667%;
          -webkit-flex-basis: 91.667%;
          -ms-flex-basis: 91.667%;
          flex-basis: 91.667%;
          max-width: 91.667%;
        }
        .col-md-12 {
          -webkit-flex-basis: 100%;
          -ms-flex-preferred-size: 100%;
          -webkit-flex-basis: 100%;
          -ms-flex-basis: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }
        .col-md-offset-1 {
          margin-left: 8.333%;
        }
        .col-md-offset-2 {
          margin-left: 16.667%;
        }
        .col-md-offset-3 {
          margin-left: 25%;
        }
        .col-md-offset-4 {
          margin-left: 33.333%;
        }
        .col-md-offset-5 {
          margin-left: 41.667%;
        }
        .col-md-offset-6 {
          margin-left: 50%;
        }
        .col-md-offset-7 {
          margin-left: 58.333%;
        }
        .col-md-offset-8 {
          margin-left: 66.667%;
        }
        .col-md-offset-9 {
          margin-left: 75%;
        }
        .col-md-offset-10 {
          margin-left: 83.333%;
        }
        .col-md-offset-11 {
          margin-left: 91.667%;
        }
        .start-md {
          -webkit-box-pack: start;
          -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
          -webkit-box-pack: start;
          -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
          justify-content: flex-start;
          text-align: start;
        }
        .center-md {
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          text-align: center;
        }
        .end-md {
          -webkit-box-pack: end;
          -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
          -webkit-box-pack: end;
          -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
          justify-content: flex-end;
          text-align: end;
        }
        .top-md {
          -webkit-box-align: start;
          -webkit-align-items: flex-start;
          -ms-flex-align: start;
          -webkit-align-items: flex-start;
          -webkit-box-align: flex-start;
          -ms-flex-align: flex-start;
          align-items: flex-start;
        }
        .middle-md {
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
        .bottom-md {
          -webkit-box-align: end;
          -webkit-align-items: flex-end;
          -ms-flex-align: end;
          -webkit-align-items: flex-end;
          -webkit-box-align: flex-end;
          -ms-flex-align: flex-end;
          align-items: flex-end;
        }
        .around-md {
          -webkit-justify-content: space-around;
          -ms-flex-pack: distribute;
          -webkit-box-pack: space-around;
          -webkit-justify-content: space-around;
          -ms-flex-pack: space-around;
          justify-content: space-around;
        }
        .between-md {
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
          -webkit-box-pack: space-between;
          -webkit-justify-content: space-between;
          -ms-flex-pack: space-between;
          justify-content: space-between;
        }
        .first-md {
          -webkit-box-ordinal-group: 0;
          -webkit-order: -1;
          -ms-flex-order: -1;
          -webkit-order: -1;
          -ms-flex-order: -1;
          order: -1;
        }
        .last-md {
          -webkit-box-ordinal-group: 2;
          -webkit-order: 1;
          -ms-flex-order: 1;
          -webkit-order: 1;
          -ms-flex-order: 1;
          order: 1;
        }
      }

      @media only screen and (min-width:64em) {
        .container {
          width: 65rem;
        }
        .col-lg,
        .col-lg-1,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9,
        .col-lg-offset-1,
        .col-lg-offset-10,
        .col-lg-offset-11,
        .col-lg-offset-12,
        .col-lg-offset-2,
        .col-lg-offset-3,
        .col-lg-offset-4,
        .col-lg-offset-5,
        .col-lg-offset-6,
        .col-lg-offset-7,
        .col-lg-offset-8,
        .col-lg-offset-9 {
          box-sizing: border-box;
          -webkit-box-flex: 0;
          -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
          flex: 0 0 auto;
          padding-right: .5rem;
          padding-left: .5rem;
        }
        .col-lg {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          -webkit-flex-grow: 1;
          -ms-flex-grow: 1;
          flex-grow: 1;
          -webkit-flex-basis: 0;
          -ms-flex-preferred-size: 0;
          -webkit-flex-basis: 0;
          -ms-flex-basis: 0;
          flex-basis: 0;
          max-width: 100%;
        }
        .col-lg-1 {
          -webkit-flex-basis: 8.333%;
          -ms-flex-preferred-size: 8.333%;
          -webkit-flex-basis: 8.333%;
          -ms-flex-basis: 8.333%;
          flex-basis: 8.333%;
          max-width: 8.333%;
        }
        .col-lg-2 {
          -webkit-flex-basis: 16.667%;
          -ms-flex-preferred-size: 16.667%;
          -webkit-flex-basis: 16.667%;
          -ms-flex-basis: 16.667%;
          flex-basis: 16.667%;
          max-width: 16.667%;
        }
        .col-lg-3 {
          -webkit-flex-basis: 25%;
          -ms-flex-preferred-size: 25%;
          -webkit-flex-basis: 25%;
          -ms-flex-basis: 25%;
          flex-basis: 25%;
          max-width: 25%;
        }
        .col-lg-4 {
          -webkit-flex-basis: 33.333%;
          -ms-flex-preferred-size: 33.333%;
          -webkit-flex-basis: 33.333%;
          -ms-flex-basis: 33.333%;
          flex-basis: 33.333%;
          max-width: 33.333%;
        }
        .col-lg-5 {
          -webkit-flex-basis: 41.667%;
          -ms-flex-preferred-size: 41.667%;
          -webkit-flex-basis: 41.667%;
          -ms-flex-basis: 41.667%;
          flex-basis: 41.667%;
          max-width: 41.667%;
        }
        .col-lg-6 {
          -webkit-flex-basis: 50%;
          -ms-flex-preferred-size: 50%;
          -webkit-flex-basis: 50%;
          -ms-flex-basis: 50%;
          flex-basis: 50%;
          max-width: 50%;
        }
        .col-lg-7 {
          -webkit-flex-basis: 58.333%;
          -ms-flex-preferred-size: 58.333%;
          -webkit-flex-basis: 58.333%;
          -ms-flex-basis: 58.333%;
          flex-basis: 58.333%;
          max-width: 58.333%;
        }
        .col-lg-8 {
          -webkit-flex-basis: 66.667%;
          -ms-flex-preferred-size: 66.667%;
          -webkit-flex-basis: 66.667%;
          -ms-flex-basis: 66.667%;
          flex-basis: 66.667%;
          max-width: 66.667%;
        }
        .col-lg-9 {
          -webkit-flex-basis: 75%;
          -ms-flex-preferred-size: 75%;
          -webkit-flex-basis: 75%;
          -ms-flex-basis: 75%;
          flex-basis: 75%;
          max-width: 75%;
        }
        .col-lg-10 {
          -webkit-flex-basis: 83.333%;
          -ms-flex-preferred-size: 83.333%;
          -webkit-flex-basis: 83.333%;
          -ms-flex-basis: 83.333%;
          flex-basis: 83.333%;
          max-width: 83.333%;
        }
        .col-lg-11 {
          -webkit-flex-basis: 91.667%;
          -ms-flex-preferred-size: 91.667%;
          -webkit-flex-basis: 91.667%;
          -ms-flex-basis: 91.667%;
          flex-basis: 91.667%;
          max-width: 91.667%;
        }
        .col-lg-12 {
          -webkit-flex-basis: 100%;
          -ms-flex-preferred-size: 100%;
          -webkit-flex-basis: 100%;
          -ms-flex-basis: 100%;
          flex-basis: 100%;
          max-width: 100%;
        }
        .col-lg-offset-1 {
          margin-left: 8.333%;
        }
        .col-lg-offset-2 {
          margin-left: 16.667%;
        }
        .col-lg-offset-3 {
          margin-left: 25%;
        }
        .col-lg-offset-4 {
          margin-left: 33.333%;
        }
        .col-lg-offset-5 {
          margin-left: 41.667%;
        }
        .col-lg-offset-6 {
          margin-left: 50%;
        }
        .col-lg-offset-7 {
          margin-left: 58.333%;
        }
        .col-lg-offset-8 {
          margin-left: 66.667%;
        }
        .col-lg-offset-9 {
          margin-left: 75%;
        }
        .col-lg-offset-10 {
          margin-left: 83.333%;
        }
        .col-lg-offset-11 {
          margin-left: 91.667%;
        }
        .start-lg {
          -webkit-box-pack: start;
          -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
          -webkit-box-pack: start;
          -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
          justify-content: flex-start;
          text-align: start;
        }
        .center-lg {
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          text-align: center;
        }
        .end-lg {
          -webkit-box-pack: end;
          -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
          -webkit-box-pack: end;
          -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
          justify-content: flex-end;
          text-align: end;
        }
        .top-lg {
          -webkit-box-align: start;
          -webkit-align-items: flex-start;
          -ms-flex-align: start;
          -webkit-align-items: flex-start;
          -webkit-box-align: flex-start;
          -ms-flex-align: flex-start;
          align-items: flex-start;
        }
        .middle-lg {
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
        .bottom-lg {
          -webkit-box-align: end;
          -webkit-align-items: flex-end;
          -ms-flex-align: end;
          -webkit-align-items: flex-end;
          -webkit-box-align: flex-end;
          -ms-flex-align: flex-end;
          align-items: flex-end;
        }
        .around-lg {
          -webkit-justify-content: space-around;
          -ms-flex-pack: distribute;
          -webkit-box-pack: space-around;
          -webkit-justify-content: space-around;
          -ms-flex-pack: space-around;
          justify-content: space-around;
        }
        .between-lg {
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
          -webkit-box-pack: space-between;
          -webkit-justify-content: space-between;
          -ms-flex-pack: space-between;
          justify-content: space-between;
        }
        .first-lg {
          -webkit-box-ordinal-group: 0;
          -webkit-order: -1;
          -ms-flex-order: -1;
          -webkit-order: -1;
          -ms-flex-order: -1;
          order: -1;
        }
        .last-lg {
          -webkit-box-ordinal-group: 2;
          -webkit-order: 1;
          -ms-flex-order: 1;
          -webkit-order: 1;
          -ms-flex-order: 1;
          order: 1;
        }
      }
    </style>
    <style type="text/css" data-styled-components="iECmZH gilyel evpGNr byGfxM jFgvCd kktUDF jlPFGn eWjzRU jGqJlD kuqIKy ktKmOq iWVBpY hNogKD dggHpc jpHwD ipliua doYTvo eLCXzP hznfox cHZARy fhbjHj dRtAmU cULmEo hiKSiS cpoSvg kSOdgB GrYpZ dRiOjk cKjbEQ CLluW irjKNI dDRnsI YzqzA gEwPsy gLRoTZ bTVPzW bOZvYP bMEDIL eLBKpU bXYmZq jiDMyE cCPdDf kFuKSG JaVau iheQPW cDBKQv fKsNLk eRGRqS efxxAa eMaSBg fVrZls evjDXW bqVLhR gXwWwO etWFLc jhTbHC hRkhrw"
    data-styled-components-is-local="true">
      @media (max-width: 30rem) {
        .cpoSvg {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .gEwPsy {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .eLBKpU {
          font-size: 1.3090000000000002rem !important;
        }
      }

      @media (max-width: 30rem) {
        .bqVLhR {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .jFgvCd {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .eWjzRU {
          font-size: 1.3090000000000002rem !important;
        }
      }

      @media (max-width: 30rem) {
        .cKjbEQ {
          font-size: 1.3090000000000002rem !important;
        }
      }

      @media (max-width: 30rem) {
        .gLRoTZ {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .bOZvYP {
          font-size: 1.618rem !important;
        }
      }

      @media (max-width: 30rem) {
        .etWFLc {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .hNogKD {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .jpHwD {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .cULmEo {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .hiKSiS {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .bTVPzW {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .bMEDIL {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .jiDMyE {
          font-size: 1.618rem !important;
        }
      }

      @media (max-width: 30rem) {
        .cCPdDf {
          font-size: 1.618rem !important;
        }
      }

      @media (max-width: 30rem) {
        .JaVau {
          font-size: 1.3090000000000002rem !important;
        }
      }

      @media (max-width: 30rem) {
        .efxxAa {
          font-size: 1rem !important;
        }
      }

      @media (max-width: 30rem) {
        .jhTbHC {
          font-size: 1.3090000000000002rem !important;
        }
      }
    </style>
    <style type="text/css" data-styled-components="" data-styled-components-is-local="false">
      @media (max-width: 30rem) {
        #component-playground .containerInner .fullWidthMobile,
        .reactWrapper .containerInner .fullWidthMobile {
          padding-left: 0;
          padding-right: 0;
          overflow-x: hidden;
        }
      }
    </style>
  </head>
  
  <body style="min-width: 320px; background-color: #FFFFFF; width: 100%; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
    <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" align="left"
    valign="top" style="border-collapse: collapse; border-spacing: 0;">
      <tbody>
        <tr>
          <td align="center" valign="top" style="padding: 0;">
            <table width="600" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; background-color: #F3F4F5; text-align: center;"
            border="0" valign="top" bgcolor="#F3F4F5">
              <tbody>
                <tr>
                  <td style="padding: 0;">
                    <div class="sc-bdVaJa gilyel" display="block" style="box-sizing: border-box; position: static; border-radius: 0; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); overflow: inherit; padding: 3rem 3rem 3rem 3rem; margin: 0rem 0rem 0rem 0rem; border-top: none; border-right: none; border-bottom: none; border-left: none; display: block;">
                      <img class="sc-bwzfXH evpGNr" src="https://c5.patreon.com/external/logo/rebrandLogoWordmarkNavy@2x.png"
                      alt="Patreon trademark" width="20" style="border: 0; width: 10rem;">
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="padding: 0;">
                    <div class="sc-bdVaJa byGfxM" display="block" style="box-sizing: border-box; position: static; border-radius: 0; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); overflow: inherit; padding: 0rem 3rem 0rem 3rem; margin: 0rem 0rem 0rem 0rem; border-top: none; border-right: none; border-bottom: none; border-left: none; display: block;"><span class="sc-bxivhb jFgvCd" color="gray1" scale="1" style="color: #052D49; font-family: America, sans-serif; -webkit-letter-spacing: inherit; -moz-letter-spacing: inherit; -ms-letter-spacing: inherit; letter-spacing: inherit; margin: 0; opacity: 1; position: relative; text-align: inherit; text-transform: inherit; text-shadow: none; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5;"><div class="sc-kgoBCf kktUDF" overflow="hidden" style="border-top: none; border-bottom: none; border-left: none; border-right: none; border-radius: 0; box-shadow: 0 2px 0 0 rgba(5, 45, 73, 0.06999999999999995); background-color: #FFFFFF; overflow: hidden;"><div class="sc-bdVaJa jlPFGn" display="block" style="box-sizing: border-box; position: static; border-radius: 0; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); overflow: inherit; padding: 2rem 2rem 2rem 2rem; margin: 0rem 0rem 0rem 0rem; border-top: none; border-right: none; border-bottom: none; border-left: none; display: block;"><p class="sc-ifAKCX JaVau" color="gray3" scale="1" size="2" style="color: #4F687A; font-family: America, sans-serif; -webkit-letter-spacing: inherit; -moz-letter-spacing: inherit; -ms-letter-spacing: inherit; letter-spacing: inherit; opacity: 1; position: relative; text-align: left; text-transform: inherit; text-shadow: none; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; font-size: 1.3090000000000002rem; font-weight: 400; line-height: 1.25; margin: 0.5rem 0rem;">Smiles Davis, thank you for your pledge of $5 per month to YKS!</p><div class="sc-bdVaJa jGqJlD" display="block" style="box-sizing: border-box; position: static; border-radius: 0; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); overflow: inherit; padding: 0rem 0rem 0rem 0rem; margin: 2rem 0rem 2rem 0rem; border-top: none; border-right: none; border-bottom: none; border-left: none; display: block;"><a class="sc-jzJRlG kuqIKy" color="twitterBlue" type="button" href="https://twitter.com/intent/tweet?text=Yessss! I am now a proud patron of YKS on @Patreon, and you should be too: https://www.patreon.com/yourkickstartersucks?utm_medium=social%26utm_source=twitter%26utm_campaign=plshare" role="button" style="-webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: #55ACEE; border: 2px solid #55ACEE; border-radius: 0; box-sizing: border-box; display: inline-block; font-weight: 700; padding: 1rem 1.5rem; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: inherit; cursor: pointer; color: #FFFFFF; font-size: 1rem;"><div class="sc-fjdhpX ktKmOq" style="visibility: visible;">Tweet your support</div></a></div><div class="sc-htpNat cpoSvg" color="gray1" scale="1" style="color: #052D49; font-family: America, sans-serif; -webkit-letter-spacing: inherit; -moz-letter-spacing: inherit; -ms-letter-spacing: inherit; letter-spacing: inherit; margin: 0; opacity: 1; position: relative; text-align: left; text-transform: inherit; text-shadow: none; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5;"><span><span class="sc-bxivhb gLRoTZ" color="gray1" scale="1" style="color: #052D49; font-family: America, sans-serif; -webkit-letter-spacing: inherit; -moz-letter-spacing: inherit; -ms-letter-spacing: inherit; letter-spacing: inherit; margin: 0; opacity: 1; position: relative; text-align: inherit; text-transform: inherit; text-shadow: none; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; font-size: 1rem; font-weight: 700; line-height: 1.5;">No charge has been placed yet. </span><span>You&#x27;ve pledged to a &quot;per month&quot; page and will be charged on the 1st of next month.</span></span>
                      <div
                      class="sc-bdVaJa jGqJlD" display="block" style="box-sizing: border-box; position: static; border-radius: 0; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); overflow: inherit; padding: 0rem 0rem 0rem 0rem; margin: 2rem 0rem 2rem 0rem; border-top: none; border-right: none; border-bottom: none; border-left: none; display: block;">Your pledge renews automatically and is charged every month. <span></span>You can
                        cancel at anytime by visiting your
                        <a class="sc-gqjmRU doYTvo" href="https://www.patreon.com/pledges"
                        color="blue" scale="1" target="_self" style="background-color: transparent; color: #F96854; cursor: pointer; display: inline-block; font-weight: 700; max-width: 100%; overflow: hidden; text-decoration: none; text-decoration-skip: ink; text-overflow: ellipsis; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); vertical-align: bottom; font-size: 1rem; line-height: 1.5;">pledge page</a> and clicking &quot;Edit&quot;. You can read our terms
                        <a class="sc-gqjmRU doYTvo"
                        href="https://www.patreon.com/legal" color="blue" scale="1" target="_self" style="background-color: transparent; color: #F96854; cursor: pointer; display: inline-block; font-weight: 700; max-width: 100%; overflow: hidden; text-decoration: none; text-decoration-skip: ink; text-overflow: ellipsis; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); vertical-align: bottom; font-size: 1rem; line-height: 1.5;">here.</a>
                    </div>
                    </div>
                    <a class="sc-jzJRlG hznfox" color="primary" type="button" href="https://www.patreon.com/pledges"
                    role="button" style="-webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: #F96854; border: 2px solid #F96854; border-radius: 0; box-sizing: border-box; display: inline-block; font-weight: 700; padding: 1rem 1.5rem; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: inherit; cursor: pointer; color: #FFFFFF; font-size: 1rem;">
                      <div class="sc-fjdhpX ktKmOq" style="visibility: visible;">View Pledge</div>
                    </a>
                    </div>
                    </div>
                    </span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="padding: 0;">
                    <div class="sc-bdVaJa gilyel" display="block" style="box-sizing: border-box; position: static; border-radius: 0; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); overflow: inherit; padding: 3rem 3rem 3rem 3rem; margin: 0rem 0rem 0rem 0rem; border-top: none; border-right: none; border-bottom: none; border-left: none; display: block;"><span class="sc-bxivhb jFgvCd" color="gray1" scale="1" style="color: #052D49; font-family: America, sans-serif; -webkit-letter-spacing: inherit; -moz-letter-spacing: inherit; -ms-letter-spacing: inherit; letter-spacing: inherit; margin: 0; opacity: 1; position: relative; text-align: inherit; text-transform: inherit; text-shadow: none; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5;"><div class="sc-bdVaJa cHZARy" display="block" style="box-sizing: border-box; position: static; border-radius: 0; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); overflow: inherit; padding: 0rem 0rem 3rem 0rem; margin: 0rem 0rem 0rem 0rem; border-top: none; border-right: none; border-bottom: none; border-left: none; display: block;"><img class="sc-bwzfXH fhbjHj" src="https://c5.patreon.com/external/logo/rebrandLogoIconMark@2x.png" alt="Patreon trademark" width="8" height="8" style="border: 0; width: 4rem; height: 4rem;"></div><div class="sc-bdVaJa dRtAmU" display="block" style="box-sizing: border-box; position: static; border-radius: 0; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); overflow: inherit; padding: 0rem 0rem 1.5rem 0rem; margin: 0rem 0rem 0rem 0rem; border-top: none; border-right: none; border-bottom: none; border-left: none; display: block;"><p class="sc-ifAKCX cULmEo" color="gray3" scale="1" style="color: #4F687A; font-family: America, sans-serif; -webkit-letter-spacing: inherit; -moz-letter-spacing: inherit; -ms-letter-spacing: inherit; letter-spacing: inherit; opacity: 1; position: relative; text-align: inherit; text-transform: inherit; text-shadow: none; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 0.5rem 0rem;">We love hearing from you!<br>Have any questions? Please check out our <a class="sc-gqjmRU doYTvo" href="https://patreon.zendesk.com/hc/en-us" color="blue" scale="1" target="_self" style="background-color: transparent; color: #F96854; cursor: pointer; display: inline-block; font-weight: 700; max-width: 100%; overflow: hidden; text-decoration: none; text-decoration-skip: ink; text-overflow: ellipsis; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); vertical-align: bottom; font-size: 1rem; line-height: 1.5;">help center</a>.</p></div><div class="sc-bdVaJa cHZARy" display="block" style="box-sizing: border-box; position: static; border-radius: 0; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); overflow: inherit; padding: 0rem 0rem 3rem 0rem; margin: 0rem 0rem 0rem 0rem; border-top: none; border-right: none; border-bottom: none; border-left: none; display: block;"><a class="sc-gqjmRU doYTvo" href="https://www.patreon.com" color="blue" scale="1" target="_self" style="background-color: transparent; color: #F96854; cursor: pointer; display: inline-block; font-weight: 700; max-width: 100%; overflow: hidden; text-decoration: none; text-decoration-skip: ink; text-overflow: ellipsis; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); vertical-align: bottom; font-size: 1rem; line-height: 1.5;">Patreon</a><span style="margin-left:1em;margin-right:1em;">·</span>

                      <a
                      class="sc-gqjmRU doYTvo" href="https://twitter.com/patreon" color="blue" scale="1"
                      target="_self" style="background-color: transparent; color: #F96854; cursor: pointer; display: inline-block; font-weight: 700; max-width: 100%; overflow: hidden; text-decoration: none; text-decoration-skip: ink; text-overflow: ellipsis; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); vertical-align: bottom; font-size: 1rem; line-height: 1.5;">Twitter</a><span style="margin-left:1em;margin-right:1em;">·</span>

                        <a class="sc-gqjmRU doYTvo"
                        href="https://www.facebook.com/patreon" color="blue" scale="1" target="_self" style="background-color: transparent; color: #F96854; cursor: pointer; display: inline-block; font-weight: 700; max-width: 100%; overflow: hidden; text-decoration: none; text-decoration-skip: ink; text-overflow: ellipsis; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); vertical-align: bottom; font-size: 1rem; line-height: 1.5;">Facebook</a>
                    </div>
                    <p class="sc-ifAKCX hiKSiS" color="gray3" scale="1" style="color: #4F687A; font-family: America, sans-serif; -webkit-letter-spacing: inherit; -moz-letter-spacing: inherit; -ms-letter-spacing: inherit; letter-spacing: inherit; margin: 0; opacity: 1; position: relative; text-align: inherit; text-transform: inherit; text-shadow: none; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5;">Patreon Inc. 230 9th Street, San Francisco, 94103 CA</p>
                    <p class="sc-ifAKCX cULmEo"
                    color="gray3" scale="1" style="color: #4F687A; font-family: America, sans-serif; -webkit-letter-spacing: inherit; -moz-letter-spacing: inherit; -ms-letter-spacing: inherit; letter-spacing: inherit; opacity: 1; position: relative; text-align: inherit; text-transform: inherit; text-shadow: none; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 0.5rem 0rem;">This email was sent to
                      <a class="sc-gqjmRU doYTvo" href="mailto:"
                      color="blue" scale="1" target="_self" style="background-color: transparent; color: #F96854; cursor: pointer; display: inline-block; font-weight: 700; max-width: 100%; overflow: hidden; text-decoration: none; text-decoration-skip: ink; text-overflow: ellipsis; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); vertical-align: bottom; font-size: 1rem; line-height: 1.5;">hello@SmilesDavis.yeah</a>.
                      <br>You can change your preferences for Patreon emails under
                      <a class="sc-gqjmRU doYTvo"
                      href="#" color="blue" scale="1" target="_self"
                      style="background-color: transparent; color: #F96854; cursor: pointer; display: inline-block; font-weight: 700; max-width: 100%; overflow: hidden; text-decoration: none; text-decoration-skip: ink; text-overflow: ellipsis; -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1); vertical-align: bottom; font-size: 1rem; line-height: 1.5;">settings</a>.</p>
                    </span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>

  </body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console