JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel nisl eros. Vestibulum fringilla efficitur enim, at gravida lectus eleifend ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ante nisi, molestie non vehicula et, venenatis vel neque. Nunc feugiat dui at est varius vulputate. Sed a pharetra tellus. Phasellus tempor tincidunt cursus. Duis porttitor consequat sodales. Aenean ultrices rhoncus posuere. Aliquam ut sagittis nisl, et eleifend justo. Sed lobortis orci vitae ipsum elementum, vitae laoreet sem vehicula. Ut pretium mauris est, ut eleifend erat vulputate accumsan.<br/>

  <br/>
  <h3>
    hover over i beneath
  </h3>
  <label>
    Here is a label
    <i data-hint-target='#Hint1'>i</i>
    <div id='Hint1' class='hint'>
      This is the hint that will show<br/>
      When <strong>hovered</strong>
    </div>
  </label><br/>
  <br/>

Sed id placerat ex, non egestas nibh. In cursus risus sed scelerisque ultrices. Sed luctus nisi at tortor tempor placerat. Integer sollicitudin enim sed lorem ultricies, at mattis magna aliquet. Integer pharetra vulputate ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi turpis, finibus mattis tempor vitae, venenatis vitae lacus. Nulla libero sapien, accumsan sed velit ac, tincidunt pharetra eros. Vivamus condimentum, tellus ac auctor ultricies, nunc tortor commodo ante, eu auctor leo lacus eu leo. In ut tristique mi. Ut mattis purus non eros vehicula venenatis vitae eu libero. Donec facilisis elit dolor, sit amet finibus tortor hendrerit sit amet.<br/>

Quisque ultrices, enim posuere imperdiet accumsan, purus nunc cursus lectus, sit amet pellentesque dolor nunc in ante. Mauris dignissim, libero a egestas maximus, odio ex pellentesque quam, quis finibus libero est eu mauris. Morbi volutpat mi non tincidunt pretium. Maecenas eget aliquet ante. Morbi a sem at nibh facilisis lobortis. Fusce bibendum est nibh, ac aliquam mi aliquam...

CSS

.hint {
  display: none;
  position: fixed;
  
  background: white;
  padding: 10px;
  border: 1px solid green;
}
.hint.show {
  display: block;
}

i[data-hint-target] {
  background: white;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  display: inline-block;
}