JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
    esse sequi officia sapiente.</p>

  <blockquote>
    Teacher: Why are you late?
    Student: There was a man who lost a hundred dollar bill.
    Teacher: That's nice. Were you helping him look for it?
    Student: No. I was standing on it.
  </blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
    esse sequi officia sapiente.
    
   
    
    </p>
</div>

CSS

.container {
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

.container--inner {
  max-width: 100%;
  padding: 0px;
}

.container--elem {
  max-width: 1200px;
  padding: 0px;
}

.container--block {
  max-width: 1270px;
}

.note {
  position: fixed;
  z-index: 1000;
  padding: 5px;
  border: 1px solid black;
  background: white;
  text-align: center;
  font: italic 14px serif;
}

blockquote {
  background: #f9f9f9;
  border: 10px solid red;
  margin: 0 auto;
  padding: .5em 10px;
  quotes: "“""”""‘""’";
  display: block;
  white-space: pre;
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: .1em;
  margin-right: .25em;
  vertical-align: -.4em;
}

JavaScript

var elem;

function showNote(anchor, position, html) {
  var note = document.createElement('div');
  note.className = "note";
  note.innerHTML = html;
  document.body.append(note);
  positionAt(anchor, position, note);
}

function positionAt(anchor, position, elem) {
  let anchorCoords = anchor.getBoundingClientRect();
  console.log(anchor.offsetWidth);
  if (position == 'top') {
    elem.style.left = anchorCoords.left + 'px';
    elem.style.top = anchorCoords.top - elem.offsetHeight + 'px';
  } else if (position == 'bottom') {
    elem.style.left = anchorCoords.left + 'px';
    elem.style.top = anchorCoords.top + anchor.offsetHeight + 'px';
  } else if (position == 'right') {
    elem.style.left = anchorCoords.left + anchor.offsetWidth - elem.offsetWidth + 'px';
    elem.style.top = anchorCoords.top - elem.offsetHeight + 'px';
  } else {
    elem.style.left = anchorCoords.left + anchor.offsetWidth - elem.offsetWidth + 'px';
    elem.style.top = anchorCoords.top + anchor.offsetHeight + 'px';
  }

}
let blockquote = document.querySelector('blockquote');

function Play() {
  showNote(blockquote, 'top', 'top left');
  showNote(blockquote, 'bottom', 'top bottom');
  showNote(blockquote, 'left', 'right bottom');
  showNote(blockquote, 'right', 'top right');
}

Play();

//window.addEventListener('resize', Play);