JSFiddle - React, Tailwind, and code Playground

by edent

HTML

The most cited work in history, for example, is a 1951 paper<details><summary>1</summary> Lowry, O. H., Rosebrough, N. J., Farr, A. L. &amp; Randall, R. J. J. Biol. Chem. 193, 265–275 (1951).</details> describing an assay to determine the amount of protein in a solution.
<br><br>
Sunlight poured like molten gold<details><summary>2</summary> Not precisely, of course. Trees didn’t burst into flame, people didn’t suddenly become very rich and extremely dead, and the seas didn’t flash into steam. A better simile, in fact, would be ‘not like molten gold.’</details> across the sleeping landscape.
<br><br>
My blog was recently featured in an academic paper<details><summary>3</summary><span itemscope itemtype="http://schema.org/ScholarlyArticle"><span itemprop="citation"><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Eishita</span><span>, </span><span itemprop="givenName">Farjana Z.</span></span></span><span> & </span><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Stanley</span><span>, </span><span itemprop="givenName">Kevin G.</span></span></span><span> & </span><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Esquivel</span><span>, </span><span itemprop="givenName">Alain</span></span></span> <q><cite itemprop="headline">Quantifying the differential impact of sensor noise in augmented reality gaming input</cite></q> <span>(</span><time itemprop="datePublished" datetime="2015">2015</time><span>)</span> <span itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><span itemprop="name">Institute of Electrical and Electronics Engineers (IEEE)</span></span><span>.</span> DOI: <a itemprop="url" href="https://doi.org/10.1109/gem.2015.7377202">https://doi.org/10.1109/gem.2015.7377202</a></span></span></details> which pleased me greatly.

CSS

details, summary {
  display: inline;
  vertical-align: super;
  font-size: 0.75em;
}
details[open] {
  display: contents;
}
details[open]::before {
  content: " [";
}
details[open]::after {
  content: "]";
}
summary {
  cursor: pointer;
}