JSFiddle - React, Tailwind, and code Playground

by ruslyrossi

HTML

<p>My name is Doctor Womac and I am going to teach you all about chemical formulae.
A chemical formula is a way to describe the chemical elements that make up a particular chemical compound.
It consists of chemical symbols to covey the elements and numbers to show the number of atoms of each element.
H<span class="atoms">2</span>S0<span class="atoms">4</span> is the chemical formula for sulphuric acid, for example.
The charge of an ion can be displayed in superscript, such as Au<span class="charge">2+</span>.
This concludes my lesson.
I must rush off home now because I have a problem with some radioactive phosphate.</p>

CSS

body { font: 80% "Times New Roman", Times, serif }

p { line-height: 1.5 }

.charge {
	position: relative;
	bottom: 0.5em;
	color: red;
	font-size: 0.8em;
}

.atoms {
	position: relative;
	top: -5px;
	color: blue;
	font-size: 0.8em;
}