JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="content">

  <p> Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
The <abbr title="Web Hypertext Application Technology Working Group" tabindex="0" aria-label="Web Hypertext Application Technology Working Group">WHATWG<i class="material-icons">help</i></abbr>
    is a loose unofficial collaboration of Web browser manufacturers and
    interested parties who wish to develop new technologies designed to
    allow authors to write and deploy Applications over the World Wide
    Web.
  </p>


  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada.
  </p>
 ...

CSS

body {
  font-size: 18px;
}

.content {
  max-width: 1000px;
  margin: 0 auto;
}

abbr:not(:focus) {
  cursor: pointer;
  text-decoration: underline;
  
}

abbr:focus::after {
  cursor: auto;
  content: attr(title);
  display: block;
  width: 100%;
  padding: 22px 26px 22px 26px;
  margin: 8px 0 10px 0;
  box-sizing: border-box;
  background-color: #e8e8e8;
  width: auto;
  text-decoration: none;
}

abbr {
  text-decoration: none;
}

i {
  color: #01677d;
  font-size: 20px !important;
  position: relative;
  top: 4px;
  padding-left: 4px
}