Update example document

Author: bradlc

docs/components/MarkdownSample.mdx

@@ -2,6 +2,12 @@
 
 [View on GitHub](https://github.com/tailwindcss/typography)
 
+<p className="lead">
+  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+  when an unknown printer took a galley of type and scrambled it to make a type
+  specimen book.
+</p>
+
 A plugin that provides a `rich-text` class you can use to add sensible typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).
 
 ```html
@@ -12,6 +18,8 @@ A plugin that provides a `rich-text` class you can use to add sensible typograph
 
 What follows is just a big block of example content designed to dogfood the plugin.
 
+---
+
 It includes every sensible typographic element I could think of, like **bold text**, unordered lists, ordered lists, code blocks, block quotes, _and even italics_.
 
 It's important to cover all of these use cases for a few reasons:
@@ -21,7 +29,9 @@ It's important to cover all of these use cases for a few reasons:
 
 Now we're going to try out a header style.
 
-## Typography should be easy
+---
+
+## Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 
 So that's a header for you — with any luck by the time I'm done writing this plugin that will look pretty reasonable.
 
@@ -31,7 +41,17 @@ Something a wise person once told me about typography is:
 
 It's probably important that images look okay here by default as well:
 
-![Someone paying for something at a check out counter](https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80)
+<figure>
+  <img
+    src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+    alt=""
+  />
+  <figcaption>
+    Contrary to popular belief, Lorem Ipsum is not simply random text. It has
+    roots in a piece of classical Latin literature from 45 BC, making it over
+    2000 years old.
+  </figcaption>
+</figure>
 
 Now I'm going to show you an example of an unordered list to make sure that looks good, too:
 
@@ -47,7 +67,7 @@ And that's the end of this section.
 
 Sometimes you have headings directly underneath each other. In those cases you have to be careful not to use too much margin, because typically the space you need between a heading and a paragraph is more than you want between two headings.
 
-### When a heading comes after a paragraph...
+### Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 
 When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.