JSFiddle - React, Tailwind, and code Playground

by Veksi

HTML

<body>
  <header>My F.A.Q.</header>
  <div id="main">
    <nav>
      <ul>
        <li><a href="#section-general">General</a></li>
        <li><a href="#section-something">Something</a></li>
        <li><a href="#section-about">About</a></li>
      </ul>
    </nav>
    <!-- <aside>To show an aside...</aside> -->
    <article id="faq-section-general" class="tab-content">
      <h1>General</h1>
      <p>The four Byzantine <span class="inline-aside">generals.<aside>General inline aside.</aside></span></p>      
      <p>Some more general text.</p>
    </article>
    <article id="faq-section-something" class="tab-content" e>
      <h1>Something</h1>
      <p>Something wicked this way comes.</p>
      <p>Interesting.</p>
    </article>
    <article id="faq-section-about" class="tab-content">
      <h1>About</h1>
      <p>About.</p>
      <aside>About the inline asides.</aside>
      <p>Something more about this.</p>
    </article>
  </div>
  <footer>footer</footer>
</body>

CSS

.inline-aside {      
      position: relative;      
      background: #333;
      border: 0.1em solid #cccccc;
      opacity: 0.5;
      width: 300px;
      color: black;
      text-align: center;
    }
   
    /* By default, hide aside aside blocks that have #inlude-aside elements as parents. */
    #main > article > .inline-aside, aside {
      display: none;
    }
    
    /* Show the aside elements inside #include-aside elements when they're hovered. */
    #main > article > .inline-aside:hover {
      display: block;
    }