JSFiddle - React, Tailwind, and code Playground

by SamsChoice

HTML

<p>
  <a href="mailto:[email protected]">
    [email protected]
  </a>
</p>

<p class="phone">
    555-555-5555
</p>

<p class="important">
  REMEMBER: drink slushies too fast.
</p>

<blockquote>
   Designers tend to whisper, ad agencies tend to shout.
</blockquote>

<p class="alert">
   Stranger Danger!
<p>

CSS

a[href^="mailto:"]:before { content: "\2709"; }
.phone:before             { content: "\2706"; }
.important:before         { content: "\27BD"; }
blockquote:before         { content: "\275D"; }
blockquote:after          { content: "\275E"; }
.alert:before             { content: "\26A0"; }

:before, :after { 
  color: purple; 
}

p, blockquote {
  margin: 20px;
}
body, a {
  color: #333;
  text-decoration: none;
  font-size: 21px;
}