JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<a href="https://canvas.codes/" style="color: #3a6ae0; font-weight: bold; text-decoration: none;">
  <img src="https://canvas.codes/static/img/hexagon.svg" alt="" width="32" height="32" style="vertical-align: middle;">
  <span style="vertical-align: middle; margin-left: 8px;">Canvas</span>
</a>

<p>Exciting news! <a href="https://canvas.codes/@PullJosh" style="color: #3a6ae0;">@PullJosh</a> commented on your project <a href="https://canvas.codes/project/webpage/U5cZErQTD/magic-color-button" style="color: #3a6ae0;">My Amazing Webpage</a>:</p>

<a href="https://canvas.codes/" style="color: #000000; text-decoration: none;">
  <blockquote style="background: #f4f5f7; border-radius: 4px; padding: 8px 20px 1px 20px; margin: 32px;">
    <p>
      <img src="https://lh4.googleusercontent.com/-K2P_E_UDnzA/AAAAAAAAAAI/AAAAAAAADcU/Xayf_apAjrU/photo.jpg" alt="" width="20" height="20" style="vertical-align: middle; border-radius: 3px;" />
      <strong style="vertical-align: middle;">PullJosh says:</strong>
    </p>
    <div style="font-size: 18px; line-height: 1.4;">
      <p>
        This project is awesome! Good work.
      </p>
    </div>
  </blockquote>
</a>

<p>
  If you don't want these emails any more, no worries. You can <a href="https://canvas.codes/settings" style="color: #3a6ae0;">change your notification settings</a> any time. And if there's anything you want to say, <a href="mailto:[email protected]" style="color: #3a6ae0;">my inbox is always open</a>.
</p>

<p>
  Have a great day! 😄
</p>

CSS

body {
  font-family: sans-serif;
  font-size: 14px;
}