<section class="waterfall">
<p class="text-1"><span class="size">34px</span>To make the Spätzle from scratch, pour flour, eggs, milk, salt, pepper, and nutmeg into a medium-sized bowl.</p>
<p class="text-2"><span class="size">30px</span>To make the Spätzle from scratch, pour flour, eggs, milk, salt, pepper, and nutmeg into a medium-sized bowl.</p>
<p class="text-3"><span class="size">26px</span>To make the Spätzle from scratch, pour flour, eggs, milk, salt, pepper, and nutmeg into a medium-sized bowl.</p>
<p class="text-4"><span class="size">22px</span>To make the Spätzle from scratch, pour flour, eggs, milk, salt, pepper, and nutmeg into a medium-sized bowl.</p>
<p class="text-5"><span class="size">18px</span>To make the Spätzle from scratch, pour flour, eggs, milk, salt, pepper, and nutmeg into a medium-sized bowl.</p>
<p class="text-6"><span class="size">14px</span>To make the Spätzle from scratch, pour flour, eggs, milk, salt, pepper, and nutmeg into a medium-sized bowl.</p>
<p class="text-7"><span class="size">10px</span>To make the Spätzle from scratch, pour flour, eggs, milk, salt, pepper, and nutmeg into a medium-sized bowl.</p>
</section>
$cream: #f2eee1;
$brown: #2d1006;
$taupe: #776150;
$taupe-lt: #e2d3c7;
section {
display: block;
}
html {
font-size: 62.5%;
}
body {
background-color: $cream;
margin: 0;
padding: 0;
}
.waterfall {
margin-left: 50px;
padding: 25px;
padding: 2.5rem;
text-rendering: optimizeLegibility;
p {
font-family: "de-walpergens-pica", georgia, serif;
font-weight: 400;
font-style: normal;
color: $taupe;
line-height: 1.1;
margin: 0;
padding: 20px 0;
border-bottom: 1px solid $taupe-lt;
&:last-of-type {
border-bottom: none;
}
}
.text-1 {
font-size: 34px;
font-size: 3.4rem;
}
.text-2 {
font-size: 30px;
font-size: 3.0rem;
}
.text-3 {
font-size: 26px;
font-size: 2.6rem;
}
.text-4 {
font-size: 22px;
font-size: 2.2rem;
}
.text-5 {
font-size: 18px;
font-size: 1.8rem;
}
.text-6 {
font-size: 14px;
font-size: 1.4rem;
}
.text-7 {
font-size: 10px;
font-size: 1rem;
}
.text-3, .text-4 {
padding: 15px 0;
}
.text-5, .text-6, .text-7 {
padding: 10px 0;
}
.size {
font-family: helvetica, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: $brown;
background-color: $taupe-lt;
padding: 5px;
margin-right: 10px;
display: inline-block;
width: 25px;
margin-left: -50px;
}
}
Also see: Tab Triggers