JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<main>
 
 <p class="note icon" title="This is a title">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
 </p>
 
</main>
</body>
</html>

CSS

main {
  width: 50%;
  display: block;
  place-items: center;
  margin: auto;
}

p.note {
  border: 3px solid red;
  border-radius: 3px;
  padding: 1em;

  &::before {
    margin: auto 0 0.5em 0.5em;
    float: right;
  }

  position: relative;

  &[title]::after {
    content: attr(title);
    position: relative;
    font-weight: bold;
    top: 0;
    left: 1em;
  }
}

.icon::before {
  font-size: 2em;
  content: "@";
}