JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="widget presenter" data-note="Geoff's Notes on this item">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</div>

CSS

.widget{
  padding:50px;
  font-family:helvetica;
}
.widget.presenter:before{
  content: attr(data-note);
  display:block;
  background-color:yellow;
  padding:20px;
  margin-top:-50px;
}