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>

SCSS

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

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

  &::before {
    margin: 0 0 0.5em 0.5em;
    
  }

  position: relative;

  &[title]::after {
    content: attr(title); 
    font-weight: bold;
    grid-row:1;text-align:center;
    grid-column:1 ;
    margin: 0 2em
  }
}

.icon::before {
  font-size: 2em;
  content: "@";
  grid-row:1 / 3;  
  grid-column:2; 
}