JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<p>This <span class='err'>tpyo</span> is underlined.</p>
<p>This <span class='err'>muhc longre ytpo Bacon ipsum dolor amet flank rump ribeye meatball, tongue cow prosciutto shoulder strip steak tri-tip cupim pork kielbasa. Drumstick beef ribs picanha prosciutto. Pork loin corned beef tail cupim pork belly chuck. Andouille bresaola kevin beef, porchetta swine tongue pastrami brisket pig jerky meatloaf</span> is also unerlined.</p>

CSS

/* Pure CSS squiggly underline error indicator */
.err { 
  background-image:
    linear-gradient(45deg, transparent 65%, red 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, red 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, red 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, red 35%, transparent 50%);
  background-repeat:repeat-x;
  background-size: 8px 10px;
  background-position:10% 95%;
}