JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<a href="#monstera">Monstera</a>
<a href="#fiddle-leaf-fig">Fiddle leaf fig</a>
</nav>
<main>
<h2 id="monstera">Monstera</h2>
<p>
<em>Monstera deliciosa</em>, also known as the Swiss cheese plant, is a species of flowering plant native to tropical forests of southern Mexico, south to Panama.[1] It has been introduced to many tropical areas, and has become a mildly invasive species in Hawaii, Seychelles, Ascension Island and the Society Islands.
</p>
<p>
The plant may be confused with Philodendron bipinnatifidum as they have similar leaves and growing habits. However, the ingestion of Philodendron bipinnatifidum may cause irritation to the digestive tract and will induce internal swelling. The sap is also known to irritate the skin.
</p>
<h2 id="fiddle-leaf-fig">Fiddle leaf fig</h2>
<p>
<em>Ficus lyrata</em>, commonly known as the fiddle-leaf fig, is a species of flowering plant in the mulberry and fig family Moraceae. It is native to western Africa, from Cameroon west to Sierra Leone, where it grows in lowland tropical rainforest. It can grow up to 12–15 m (39–49 ft) tall.
Above: an example of a lyrate leaf. Ficus lyrata leaves are lyrate, meaning that they resemble a lyre.
</p>
<p>
The leaves are variable in shape, but often with a broad apex and narrow middle, resembling a lyre or fiddle; they are up to 45 cm (18 in) long and 30 cm (12 in) broad, though usually smaller, with a leathery texture, prominent veins and a wavy margin.
</p>
</main>
CSS
body {
font: 20px / 1.6 sans-serif;
color: #333;
line-height: 1.6;
margin: 0;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #043;
padding: 0 20px;
}
a {
display: inline-block;
font-size: 18px;
line-height: 3;
font-weight: bold;
margin-right: 20px;
color: lightyellow;
}
main {
padding: 40px 20px 20px;
}
h2 {
margin-top: -1em;
}
h2::before {
content: '';
display: block;
height: 1.8em;
}