From a080bf39664d2063f86694ebdf1458087adba46b Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 1 Sep 2023 07:43:57 +0700
Subject: [PATCH] feat: Add file names to snippets

---
 contents/accordion.mdx                  | 4 ++--
 contents/arrow-buttons.mdx              | 4 ++--
 contents/avatar-list.mdx                | 4 ++--
 contents/avatar.mdx                     | 4 ++--
 contents/badge.mdx                      | 4 ++--
 contents/box-selector.mdx               | 4 ++--
 contents/breadcrumb.mdx                 | 4 ++--
 contents/button-with-icon.mdx           | 4 ++--
 contents/calendar.mdx                   | 4 ++--
 contents/card-layout.mdx                | 4 ++--
 contents/card.mdx                       | 4 ++--
 contents/centering.mdx                  | 4 ++--
 contents/chip.mdx                       | 4 ++--
 contents/circular-navigation.mdx        | 4 ++--
 contents/close-button.mdx               | 4 ++--
 contents/color-swatch.mdx               | 4 ++--
 contents/concave-corners.mdx            | 4 ++--
 contents/cookie-banner.mdx              | 4 ++--
 contents/corner-ribbon.mdx              | 4 ++--
 contents/curved-background.mdx          | 4 ++--
 contents/custom-checkbox-button.mdx     | 4 ++--
 contents/custom-radio-button.mdx        | 4 ++--
 contents/diagonal-section.mdx           | 4 ++--
 contents/docked-at-corner.mdx           | 8 ++++++--
 contents/dot-leader.mdx                 | 4 ++--
 contents/dot-navigation.mdx             | 4 ++--
 contents/drawer.mdx                     | 4 ++--
 contents/drop-area.mdx                  | 4 ++--
 contents/drop-cap.mdx                   | 4 ++--
 contents/dropdown.mdx                   | 4 ++--
 contents/fading-long-section.mdx        | 8 ++++++--
 contents/feature-comparison.mdx         | 4 ++--
 contents/feature-list.mdx               | 4 ++--
 contents/fixed-at-corner.mdx            | 4 ++--
 contents/fixed-at-side.mdx              | 4 ++--
 contents/floating-label.mdx             | 8 ++++++--
 contents/folder-structure.mdx           | 4 ++--
 contents/full-background.mdx            | 4 ++--
 contents/full-screen-menu.mdx           | 4 ++--
 contents/holy-grail.mdx                 | 4 ++--
 contents/indeterminate-progress-bar.mdx | 4 ++--
 contents/initial-avatar.mdx             | 4 ++--
 contents/input-addon.mdx                | 4 ++--
 contents/inverted-corners.mdx           | 4 ++--
 contents/keyboard-shortcut.mdx          | 4 ++--
 contents/layered-card.mdx               | 4 ++--
 contents/lined-paper.mdx                | 4 ++--
 contents/masonry-grid.mdx               | 4 ++--
 contents/media-object.mdx               | 4 ++--
 contents/mega-menu.mdx                  | 4 ++--
 contents/menu.mdx                       | 4 ++--
 contents/modal.mdx                      | 4 ++--
 contents/nested-dropdowns.mdx           | 4 ++--
 contents/notification.mdx               | 4 ++--
 contents/overlay-play-button.mdx        | 4 ++--
 contents/pagination.mdx                 | 4 ++--
 contents/popover-arrow.mdx              | 9 +++++++--
 contents/presence-indicator.mdx         | 4 ++--
 contents/previous-next-buttons.mdx      | 4 ++--
 contents/price-tag.mdx                  | 4 ++--
 contents/pricing-table.mdx              | 4 ++--
 contents/progress-bar.mdx               | 4 ++--
 contents/property-list.mdx              | 4 ++--
 contents/questions-and-answers.mdx      | 4 ++--
 contents/radial-progress-bar.mdx        | 4 ++--
 contents/radio-button-group.mdx         | 4 ++--
 contents/radio-switch.mdx               | 4 ++--
 contents/rating.mdx                     | 4 ++--
 contents/resizable-element.mdx          | 4 ++--
 contents/ribbon.mdx                     | 4 ++--
 contents/same-height-columns.mdx        | 4 ++--
 contents/search-box.mdx                 | 4 ++--
 contents/separator.mdx                  | 4 ++--
 contents/sidebar.mdx                    | 4 ++--
 contents/simple-grid.mdx                | 4 ++--
 contents/slider.mdx                     | 4 ++--
 contents/spin-button.mdx                | 4 ++--
 contents/spinner.mdx                    | 4 ++--
 contents/split-navigation.mdx           | 4 ++--
 contents/split-screen.mdx               | 4 ++--
 contents/stacked-cards.mdx              | 4 ++--
 contents/stamp-border.mdx               | 4 ++--
 contents/statistic.mdx                  | 4 ++--
 contents/status-light.mdx               | 4 ++--
 contents/stepper-input.mdx              | 4 ++--
 contents/sticky-footer.mdx              | 4 ++--
 contents/sticky-header.mdx              | 4 ++--
 contents/sticky-sections.mdx            | 4 ++--
 contents/sticky-table-column.mdx        | 4 ++--
 contents/sticky-table-headers.mdx       | 4 ++--
 contents/switch.mdx                     | 4 ++--
 contents/tab.mdx                        | 4 ++--
 contents/teardrop.mdx                   | 4 ++--
 contents/three-dimensions-card.mdx      | 4 ++--
 contents/timeline.mdx                   | 4 ++--
 contents/toggle-password-visibility.mdx | 4 ++--
 contents/tooltip.mdx                    | 4 ++--
 contents/tree-diagram.mdx               | 4 ++--
 contents/triangle-buttons.mdx           | 9 +++++++--
 contents/upload-button.mdx              | 4 ++--
 contents/validation-icon.mdx            | 4 ++--
 contents/video-background.mdx           | 4 ++--
 contents/voting.mdx                     | 4 ++--
 contents/watermark.mdx                  | 4 ++--
 contents/wizard.mdx                     | 4 ++--
 contents/zigzag-timeline.mdx            | 4 ++--
 106 files changed, 234 insertions(+), 212 deletions(-)

diff --git a/contents/accordion.mdx b/contents/accordion.mdx
index daa8b33..48bba16 100644
--- a/contents/accordion.mdx
+++ b/contents/accordion.mdx
@@ -9,7 +9,7 @@ title: Accordion
 
 ## HTML
 
-```html
+```html index.html
 <!-- Container -->
 <div class="accordion">
     <!-- Collapsed item -->
@@ -37,7 +37,7 @@ title: Accordion
 
 ## CSS
 
-```css
+```css styles.css
 .accordion {
     /* Border */
     border: 1px solid #d1d5db;
diff --git a/contents/arrow-buttons.mdx b/contents/arrow-buttons.mdx
index dbdb338..e293741 100644
--- a/contents/arrow-buttons.mdx
+++ b/contents/arrow-buttons.mdx
@@ -10,7 +10,7 @@ updated: '2021-04-01'
 
 ## HTML
 
-```html
+```html index.html
 <!-- Up arrow button -->
 <button class="arrow-buttons">
     <!-- Arrow -->
@@ -50,7 +50,7 @@ updated: '2021-04-01'
 
 ## CSS
 
-```css
+```css styles.css
 .arrow-button {
     /* Transparent background */
     background-color: transparent;
diff --git a/contents/avatar-list.mdx b/contents/avatar-list.mdx
index 4232669..c6cff35 100644
--- a/contents/avatar-list.mdx
+++ b/contents/avatar-list.mdx
@@ -9,7 +9,7 @@ title: Avatar list
 
 ## HTML
 
-```html
+```html index.html
 <div class="avatars">
     <!-- Avatar item -->
     <div class="avatars__item">
@@ -26,7 +26,7 @@ title: Avatar list
 
 ## CSS
 
-```css
+```css styles.css
 .avatars {
     display: flex;
 }
diff --git a/contents/avatar.mdx b/contents/avatar.mdx
index ded8663..84ae607 100644
--- a/contents/avatar.mdx
+++ b/contents/avatar.mdx
@@ -9,7 +9,7 @@ title: Avatar
 
 ## HTML
 
-```html
+```html index.html
 <div class="avatar">
     <!-- Avatar image -->
     <img class="avatar__image" src="..." />
@@ -18,7 +18,7 @@ title: Avatar
 
 ## CSS
 
-```css
+```css styles.css
 .avatar {
     /* Rounded border */
     border-radius: 50%;
diff --git a/contents/badge.mdx b/contents/badge.mdx
index 5b4c2be..fc0f86d 100644
--- a/contents/badge.mdx
+++ b/contents/badge.mdx
@@ -9,13 +9,13 @@ title: Badge
 
 ## HTML
 
-```html
+```html index.html
 <div class="badge">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 .badge {
     /* Center the content */
     align-items: center;
diff --git a/contents/box-selector.mdx b/contents/box-selector.mdx
index be12ea5..da91b76 100644
--- a/contents/box-selector.mdx
+++ b/contents/box-selector.mdx
@@ -9,7 +9,7 @@ title: Box selector
 
 ## HTML
 
-```html
+```html index.html
 <div class="box-selector">...</div>
 
 <!-- The selected variant -->
@@ -18,7 +18,7 @@ title: Box selector
 
 ## CSS
 
-```css
+```css styles.css
 .box-selector {
     border: 1px solid #d1d5db;
     border-radius: 0.25rem;
diff --git a/contents/breadcrumb.mdx b/contents/breadcrumb.mdx
index c0b47d9..6f7ba77 100644
--- a/contents/breadcrumb.mdx
+++ b/contents/breadcrumb.mdx
@@ -9,7 +9,7 @@ title: Breadcrumb
 
 ## HTML
 
-```html
+```html index.html
 <div class="breadcrumb">
     <!-- Breadcrumb item -->
     <div class="breadcrumb__item">...</div>
@@ -21,7 +21,7 @@ title: Breadcrumb
 
 ## CSS
 
-```css
+```css styles.css
 .breadcrumb {
     /* Content is centered vertically */
     align-items: center;
diff --git a/contents/button-with-icon.mdx b/contents/button-with-icon.mdx
index a8b2ae0..e91db65 100644
--- a/contents/button-with-icon.mdx
+++ b/contents/button-with-icon.mdx
@@ -9,7 +9,7 @@ title: Button with icon
 
 ## HTML
 
-```html
+```html index.html
 <button class="button-with-icon">
     <!-- Icon -->
     ...
@@ -21,7 +21,7 @@ title: Button with icon
 
 ## CSS
 
-```css
+```css styles.css
 .button-with-icon {
     /* Center the content */
     align-items: center;
diff --git a/contents/calendar.mdx b/contents/calendar.mdx
index 00236a8..892c607 100644
--- a/contents/calendar.mdx
+++ b/contents/calendar.mdx
@@ -9,7 +9,7 @@ title: Calendar
 
 ## HTML
 
-```html
+```html index.html
 <div class="calendar">
     <!-- Week days -->
     <div class="calendar__weekday">Mon</div>
@@ -39,7 +39,7 @@ title: Calendar
 
 ## CSS
 
-```css
+```css styles.css
 .calendar {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
diff --git a/contents/card-layout.mdx b/contents/card-layout.mdx
index e43aeff..6c983c0 100644
--- a/contents/card-layout.mdx
+++ b/contents/card-layout.mdx
@@ -9,7 +9,7 @@ title: Card layout
 
 ## HTML
 
-```html
+```html index.html
 <div class="card-layout">
     <!-- A card with given width -->
     <div class="card-layout__item">...</div>
@@ -21,7 +21,7 @@ title: Card layout
 
 ## CSS
 
-```css
+```css styles.css
 .card-layout {
     display: flex;
 
diff --git a/contents/card.mdx b/contents/card.mdx
index 0ec08f0..40e6397 100644
--- a/contents/card.mdx
+++ b/contents/card.mdx
@@ -9,7 +9,7 @@ title: Card
 
 ## HTML
 
-```html
+```html index.html
 <div class="card">
     <!-- Cover -->
     <div class="card__cover">...</div>
@@ -22,7 +22,7 @@ title: Card
 
 ## CSS
 
-```css
+```css styles.css
 .card {
     display: flex;
     flex-direction: column;
diff --git a/contents/centering.mdx b/contents/centering.mdx
index 8090a2e..78ead14 100644
--- a/contents/centering.mdx
+++ b/contents/centering.mdx
@@ -9,13 +9,13 @@ title: Centering
 
 ## HTML
 
-```html
+```html index.html
 <div class="centering">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 .centering {
     align-items: center;
     display: flex;
diff --git a/contents/chip.mdx b/contents/chip.mdx
index d009ca0..97c272c 100644
--- a/contents/chip.mdx
+++ b/contents/chip.mdx
@@ -9,7 +9,7 @@ title: Chip
 
 ## HTML
 
-```html
+```html index.html
 <div class="chip">
     <!-- Content -->
     <div class="chip__content">...</div>
@@ -24,7 +24,7 @@ title: Chip
 
 ## CSS
 
-```css
+```css styles.css
 .chip {
     /* Center the content */
     align-items: center;
diff --git a/contents/circular-navigation.mdx b/contents/circular-navigation.mdx
index 22d6dbc..6093de2 100644
--- a/contents/circular-navigation.mdx
+++ b/contents/circular-navigation.mdx
@@ -9,7 +9,7 @@ title: Circular navigation
 
 ## HTML
 
-```html
+```html index.html
 <div class="circular-navigation">
     <!-- The trigger element that will show all circles when user clicks it -->
     ...
@@ -27,7 +27,7 @@ title: Circular navigation
 
 ## CSS
 
-```css
+```css styles.css
 .circular-navigation {
     position: relative;
 }
diff --git a/contents/close-button.mdx b/contents/close-button.mdx
index 17ef69a..0be9541 100644
--- a/contents/close-button.mdx
+++ b/contents/close-button.mdx
@@ -9,7 +9,7 @@ title: Close button
 
 ## HTML
 
-```html
+```html index.html
 <button class="close-button">
     <div class="close-button__line close-button__line--first"></div>
     <div class="close-button__line close-button__line--second"></div>
@@ -18,7 +18,7 @@ title: Close button
 
 ## CSS
 
-```css
+```css styles.css
 .close-button {
     /* Reset */
     background-color: transparent;
diff --git a/contents/color-swatch.mdx b/contents/color-swatch.mdx
index 071ede7..0afac1a 100644
--- a/contents/color-swatch.mdx
+++ b/contents/color-swatch.mdx
@@ -9,7 +9,7 @@ title: Color swatch
 
 ## HTML
 
-```html
+```html index.html
 <div class="swatch">
     <div class="swatch__item" style="background-color: ..."></div>
 
@@ -20,7 +20,7 @@ title: Color swatch
 
 ## CSS
 
-```css
+```css styles.css
 .swatch {
     /* Wrap the items */
     display: flex;
diff --git a/contents/concave-corners.mdx b/contents/concave-corners.mdx
index 9efac83..6f8993f 100644
--- a/contents/concave-corners.mdx
+++ b/contents/concave-corners.mdx
@@ -9,7 +9,7 @@ title: Concave corners
 
 ## HTML
 
-```html
+```html index.html
 <div class="concave-corners">
     <!-- The top-left corner -->
     <div class="concave-corners__corner concave-corners__corner--tl"></div>
@@ -30,7 +30,7 @@ title: Concave corners
 
 ## CSS
 
-```css
+```css styles.css
 .concave-corners {
     background-color: #d1d5db;
 
diff --git a/contents/cookie-banner.mdx b/contents/cookie-banner.mdx
index 937095d..e7f8238 100644
--- a/contents/cookie-banner.mdx
+++ b/contents/cookie-banner.mdx
@@ -9,7 +9,7 @@ title: Cookie banner
 
 ## HTML
 
-```html
+```html index.html
 <div class="cookie-banner">
     <!-- Tells visitors that the website uses cookie -->
     <div class="cookie-banner__content">...</div>
@@ -21,7 +21,7 @@ title: Cookie banner
 
 ## CSS
 
-```css
+```css styles.css
 .cookie-banner {
     /* Banner is displayed at the bottom */
     bottom: 0;
diff --git a/contents/corner-ribbon.mdx b/contents/corner-ribbon.mdx
index 742edd9..25343b8 100644
--- a/contents/corner-ribbon.mdx
+++ b/contents/corner-ribbon.mdx
@@ -9,7 +9,7 @@ title: Corner ribbon
 
 ## HTML
 
-```html
+```html index.html
 <div class="corner-ribbon">
     <!-- The container -->
     <div class="corner-ribbon__inner">
@@ -21,7 +21,7 @@ title: Corner ribbon
 
 ## CSS
 
-```css
+```css styles.css
 .corner-ribbon {
     position: relative;
 }
diff --git a/contents/curved-background.mdx b/contents/curved-background.mdx
index 5f4c1f6..60a073d 100644
--- a/contents/curved-background.mdx
+++ b/contents/curved-background.mdx
@@ -9,7 +9,7 @@ title: Curved background
 
 ## HTML
 
-```html
+```html index.html
 <div class="curved-background">
     <div class="curved-background__curved"></div>
 </div>
@@ -17,7 +17,7 @@ title: Curved background
 
 ## CSS
 
-```css
+```css styles.css
 .curved-background__curved {
     /* Background color */
     background-color: #d1d5db;
diff --git a/contents/custom-checkbox-button.mdx b/contents/custom-checkbox-button.mdx
index 538b858..c07cfe5 100644
--- a/contents/custom-checkbox-button.mdx
+++ b/contents/custom-checkbox-button.mdx
@@ -9,7 +9,7 @@ title: Custom checkbox button
 
 ## HTML
 
-```html
+```html index.html
 <label class="custom-checkbox-button">
     <!-- The real checkbox -->
     <input type="checkbox" class="custom-checkbox-button__input" />
@@ -27,7 +27,7 @@ title: Custom checkbox button
 
 ## CSS
 
-```css
+```css styles.css
 .custom-checkbox-button {
     /* Center the content horizontally */
     align-items: center;
diff --git a/contents/custom-radio-button.mdx b/contents/custom-radio-button.mdx
index ee679c9..c6a060e 100644
--- a/contents/custom-radio-button.mdx
+++ b/contents/custom-radio-button.mdx
@@ -9,7 +9,7 @@ title: Custom radio button
 
 ## HTML
 
-```html
+```html index.html
 <label class="custom-radio-button">
     <!-- The real radio -->
     <input type="radio" class="custom-radio-button__input" />
@@ -27,7 +27,7 @@ title: Custom radio button
 
 ## CSS
 
-```css
+```css styles.css
 .custom-radio-button {
     /* Center the content horizontally */
     align-items: center;
diff --git a/contents/diagonal-section.mdx b/contents/diagonal-section.mdx
index 1bd6a46..dbb490b 100644
--- a/contents/diagonal-section.mdx
+++ b/contents/diagonal-section.mdx
@@ -9,7 +9,7 @@ title: Diagonal section
 
 ## HTML
 
-```html
+```html index.html
 <div class="diagonal-section">
     <!-- The diagonal area -->
     <div class="diagonal-section__diagonal"></div>
@@ -21,7 +21,7 @@ title: Diagonal section
 
 ## CSS
 
-```css
+```css styles.css
 .diagonal-section {
     /* Used to position the diagonal area */
     position: relative;
diff --git a/contents/docked-at-corner.mdx b/contents/docked-at-corner.mdx
index f57cd27..a7d4b6d 100644
--- a/contents/docked-at-corner.mdx
+++ b/contents/docked-at-corner.mdx
@@ -9,7 +9,7 @@ title: Docked at corner
 
 ## HTML
 
-```html
+```html index.html
 <div class="docked-at-corner">
     <!-- Docked at the top right corner -->
     <div class="docked-at-corner__docker"></div>
@@ -18,7 +18,7 @@ title: Docked at corner
 
 ## CSS
 
-```css
+```css styles.css
 .docked-at-corner {
     position: relative;
 }
@@ -77,3 +77,7 @@ body {
 </div>
 ```
 </Playground>
+
+## See also
+
+-   Discover how to animate a docked element using the [pulse animation](https://phuoc.ng/collection/css-animation/pulse-animation)
diff --git a/contents/dot-leader.mdx b/contents/dot-leader.mdx
index 526746c..b3d584f 100644
--- a/contents/dot-leader.mdx
+++ b/contents/dot-leader.mdx
@@ -9,7 +9,7 @@ title: Dot leader
 
 ## HTML
 
-```html
+```html index.html
 <div class="dot-leader">
     <!-- Left side -->
     <div>...</div>
@@ -24,7 +24,7 @@ title: Dot leader
 
 ## CSS
 
-```css
+```css styles.css
 .dot-leader {
     /* Center the content */
     align-items: center;
diff --git a/contents/dot-navigation.mdx b/contents/dot-navigation.mdx
index 366d76a..9c6cf88 100644
--- a/contents/dot-navigation.mdx
+++ b/contents/dot-navigation.mdx
@@ -9,7 +9,7 @@ title: Dot navigation
 
 ## HTML
 
-```html
+```html index.html
 <div class="dot-navigation">
     <div class="dot-navigation__item"></div>
 
@@ -20,7 +20,7 @@ title: Dot navigation
 
 ## CSS
 
-```css
+```css styles.css
 .dot-navigation {
     /* Center the content */
     align-items: center;
diff --git a/contents/drawer.mdx b/contents/drawer.mdx
index b08c5f7..b3fabe9 100644
--- a/contents/drawer.mdx
+++ b/contents/drawer.mdx
@@ -11,7 +11,7 @@ This pattern is also known as off-canvas.
 
 ## HTML
 
-```html
+```html index.html
 <div class="drawer">
     <!-- Backdrop -->
     <div class="drawer__overlay"></div>
@@ -23,7 +23,7 @@ This pattern is also known as off-canvas.
 
 ## CSS
 
-```css
+```css styles.css
 .drawer {
     /* Take full size */
     height: 100%;
diff --git a/contents/drop-area.mdx b/contents/drop-area.mdx
index 07bfdfc..bf7a17b 100644
--- a/contents/drop-area.mdx
+++ b/contents/drop-area.mdx
@@ -9,13 +9,13 @@ title: Drop area
 
 ## HTML
 
-```html
+```html index.html
 <div class="drop-area">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 .drop-area {
     /* Center the content */
     align-items: center;
diff --git a/contents/drop-cap.mdx b/contents/drop-cap.mdx
index fd85271..9925cb3 100644
--- a/contents/drop-cap.mdx
+++ b/contents/drop-cap.mdx
@@ -9,13 +9,13 @@ title: Drop cap
 
 ## HTML
 
-```html
+```html index.html
 <div class="drop-cap">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 .drop-cap:first-letter {
     /* Display at the left */
     float: left;
diff --git a/contents/dropdown.mdx b/contents/dropdown.mdx
index f5a8ebe..5469c9f 100644
--- a/contents/dropdown.mdx
+++ b/contents/dropdown.mdx
@@ -9,7 +9,7 @@ title: Dropdown
 
 ## HTML
 
-```html
+```html index.html
 <div class="dropdown">
     <!-- The trigger element -->
     <div class="dropdown__trigger">...</div>
@@ -21,7 +21,7 @@ title: Dropdown
 
 ## CSS
 
-```css
+```css styles.css
 .dropdown {
     position: relative;
 }
diff --git a/contents/fading-long-section.mdx b/contents/fading-long-section.mdx
index abf7743..bb9834e 100644
--- a/contents/fading-long-section.mdx
+++ b/contents/fading-long-section.mdx
@@ -11,7 +11,7 @@ The pattern is often used to indicate there is more content.
 
 ## HTML
 
-```html
+```html index.html
 <div class="fading-long-section">
     <!-- Main content -->
     <div class="fading-long-section__content">...</div>
@@ -23,7 +23,7 @@ The pattern is often used to indicate there is more content.
 
 ## CSS
 
-```css
+```css styles.css
 .fading-long-section {
     /* Used to position the faded element */
     position: relative;
@@ -177,3 +177,7 @@ The pattern is often used to indicate there is more content.
 </div>
 ```
 </Playground>
+
+## See also
+
+-   [Customer logos marquee](https://phuoc.ng/collection/css-animation/customer-logos-marquee)
diff --git a/contents/feature-comparison.mdx b/contents/feature-comparison.mdx
index bba150d..1c68483 100644
--- a/contents/feature-comparison.mdx
+++ b/contents/feature-comparison.mdx
@@ -9,7 +9,7 @@ title: Feature comparison
 
 ## HTML
 
-```html
+```html index.html
 <div class="feature-comparison">
     <!-- Feature name -->
     <div class="feature-comparison__feature">...</div>
@@ -33,7 +33,7 @@ title: Feature comparison
 
 ## CSS
 
-```css
+```css styles.css
 .feature-comparison {
     align-items: center;
     display: flex;
diff --git a/contents/feature-list.mdx b/contents/feature-list.mdx
index b4591fa..5c1729f 100644
--- a/contents/feature-list.mdx
+++ b/contents/feature-list.mdx
@@ -9,7 +9,7 @@ title: Feature list
 
 ## HTML
 
-```html
+```html index.html
 <!-- Feature item -->
 <div class="feature-list">
     <!-- Image -->
@@ -25,7 +25,7 @@ title: Feature list
 
 ## CSS
 
-```css
+```css styles.css
 .feature-list {
     display: flex;
 
diff --git a/contents/fixed-at-corner.mdx b/contents/fixed-at-corner.mdx
index 46dad48..eae4359 100644
--- a/contents/fixed-at-corner.mdx
+++ b/contents/fixed-at-corner.mdx
@@ -9,7 +9,7 @@ title: Fixed at corner
 
 ## HTML
 
-```html
+```html index.html
 <div class="fixed-at-corner">
     <!-- Top-left corner -->
     <div class="fixed-at-corner__corner fixed-at-corner__corner--tl">...</div>
@@ -27,7 +27,7 @@ title: Fixed at corner
 
 ## CSS
 
-```css
+```css styles.css
 .fixed-at-corner {
     position: relative;
 }
diff --git a/contents/fixed-at-side.mdx b/contents/fixed-at-side.mdx
index 6cb710e..3432125 100644
--- a/contents/fixed-at-side.mdx
+++ b/contents/fixed-at-side.mdx
@@ -9,7 +9,7 @@ title: Fixed at side
 
 ## HTML
 
-```html
+```html index.html
 <!-- Fixed at the middle of left side -->
 <div class="fixed-at-side fixed-at-side--l">...</div>
 
@@ -19,7 +19,7 @@ title: Fixed at side
 
 ## CSS
 
-```css
+```css styles.css
 .fixed-at-side {
     position: fixed;
     top: 50%;
diff --git a/contents/floating-label.mdx b/contents/floating-label.mdx
index b1ff32e..c45fa21 100644
--- a/contents/floating-label.mdx
+++ b/contents/floating-label.mdx
@@ -9,7 +9,7 @@ title: Floating label
 
 ## HTML
 
-```html
+```html index.html
 <div class="floating-label">
     <!-- The input -->
     <input placeholder="Placeholder" class="floating-label__input" />
@@ -21,7 +21,7 @@ title: Floating label
 
 ## CSS
 
-```css
+```css styles.css
 .floating-label {
     border: 1px solid #d1d5db;
     border-radius: 0.25rem;
@@ -115,3 +115,7 @@ placeholder of input isn't shown
 </div>
 ```
 </Playground>
+
+## See also
+
+-   Explore some ways to [animate a floating label](https://phuoc.ng/collection/css-animation/floating-label).
diff --git a/contents/folder-structure.mdx b/contents/folder-structure.mdx
index 10b9960..7d14115 100644
--- a/contents/folder-structure.mdx
+++ b/contents/folder-structure.mdx
@@ -9,7 +9,7 @@ title: Folder structure
 
 ## HTML
 
-```html
+```html index.html
 <div class="folder-structure">
     <ul>
         <li>
@@ -42,7 +42,7 @@ title: Folder structure
 
 ## CSS
 
-```css
+```css styles.css
 :root {
     --folder-structure-item-height: 0.5rem;
     --folder-structure-item-margin-left: 2.25rem;
diff --git a/contents/full-background.mdx b/contents/full-background.mdx
index bd37419..f8d99b6 100644
--- a/contents/full-background.mdx
+++ b/contents/full-background.mdx
@@ -9,13 +9,13 @@ title: Full background
 
 ## HTML
 
-```html
+```html index.html
 <div class="full-background">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 .full-background {
     /* Center the content */
     align-items: center;
diff --git a/contents/full-screen-menu.mdx b/contents/full-screen-menu.mdx
index 6862e4d..ccbb478 100644
--- a/contents/full-screen-menu.mdx
+++ b/contents/full-screen-menu.mdx
@@ -9,7 +9,7 @@ title: Full screen menu
 
 ## HTML
 
-```html
+```html index.html
 <div class="full-screen-menu">
     <!-- The navigation menu -->
     <ul>
@@ -23,7 +23,7 @@ title: Full screen menu
 
 ## CSS
 
-```css
+```css styles.css
 .full-screen-menu {
     /* Full screen overlay */
     height: 100%;
diff --git a/contents/holy-grail.mdx b/contents/holy-grail.mdx
index f6e8afa..d0520f4 100644
--- a/contents/holy-grail.mdx
+++ b/contents/holy-grail.mdx
@@ -9,7 +9,7 @@ title: Holy grail
 
 ## HTML
 
-```html
+```html index.html
 <div class="holy-grail">
     <header>...</header>
     <main class="holy-grail__main">
@@ -28,7 +28,7 @@ title: Holy grail
 
 ## CSS
 
-```css
+```css styles.css
 .holy-grail {
     display: flex;
     flex-direction: column;
diff --git a/contents/indeterminate-progress-bar.mdx b/contents/indeterminate-progress-bar.mdx
index 717166f..c58f079 100644
--- a/contents/indeterminate-progress-bar.mdx
+++ b/contents/indeterminate-progress-bar.mdx
@@ -9,7 +9,7 @@ title: Indeterminate progress bar
 
 ## HTML
 
-```html
+```html index.html
 <div class="indeterminate-progress-bar">
     <div class="indeterminate-progress-bar__progress"></div>
 </div>
@@ -17,7 +17,7 @@ title: Indeterminate progress bar
 
 ## CSS
 
-```css
+```css styles.css
 .indeterminate-progress-bar {
     /* Color */
     background-color: #d1d5db;
diff --git a/contents/initial-avatar.mdx b/contents/initial-avatar.mdx
index fb852d8..0faf09e 100644
--- a/contents/initial-avatar.mdx
+++ b/contents/initial-avatar.mdx
@@ -9,13 +9,13 @@ title: Initial avatar
 
 ## HTML
 
-```html
+```html index.html
 <div class="initial-avatar">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 .initial-avatar {
     /* Center the content */
     align-items: center;
diff --git a/contents/input-addon.mdx b/contents/input-addon.mdx
index c808876..5b9d363 100644
--- a/contents/input-addon.mdx
+++ b/contents/input-addon.mdx
@@ -9,7 +9,7 @@ title: Input addon
 
 ## HTML
 
-```html
+```html index.html
 <!-- Add-on prepended -->
 <div class="input-addon">
     <!-- Add-on -->
@@ -43,7 +43,7 @@ title: Input addon
 
 ## CSS
 
-```css
+```css styles.css
 .input-addon {
     border: 1px solid #d1d5db;
     border-radius: 0.25rem;
diff --git a/contents/inverted-corners.mdx b/contents/inverted-corners.mdx
index 412bda4..bb830c6 100644
--- a/contents/inverted-corners.mdx
+++ b/contents/inverted-corners.mdx
@@ -9,13 +9,13 @@ title: Inverted corners
 
 ## HTML
 
-```html
+```html index.html
 <div class="inverted-corners">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 :root {
     --inverted-corners-background: #d1d5db;
     --inverted-corners-size: 2rem;
diff --git a/contents/keyboard-shortcut.mdx b/contents/keyboard-shortcut.mdx
index 6e76f25..c659717 100644
--- a/contents/keyboard-shortcut.mdx
+++ b/contents/keyboard-shortcut.mdx
@@ -11,13 +11,13 @@ We use the native `kbd` tag to display the keyboard shortcut.
 
 ## HTML
 
-```html
+```html index.html
 <kbd class="keyboard-shortcut">...</kbd>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 .keyboard-shortcut {
     /* Background and color */
     background-color: rgba(0, 0, 0, 0.1);
diff --git a/contents/layered-card.mdx b/contents/layered-card.mdx
index 96b72fb..5dea2fc 100644
--- a/contents/layered-card.mdx
+++ b/contents/layered-card.mdx
@@ -9,7 +9,7 @@ title: Layered card
 
 ## HTML
 
-```html
+```html index.html
 <div class="layered-card">
     <div class="layered-card__content"></div>
 </div>
@@ -17,7 +17,7 @@ title: Layered card
 
 ## CSS
 
-```css
+```css styles.css
 .layered-card {
     position: relative;
 
diff --git a/contents/lined-paper.mdx b/contents/lined-paper.mdx
index 2cfd12d..c17e684 100644
--- a/contents/lined-paper.mdx
+++ b/contents/lined-paper.mdx
@@ -9,13 +9,13 @@ title: Lined paper
 
 ## HTML
 
-```html
+```html index.html
 <div class="lined-paper">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 .lined-paper {
     /* Lined background */
     background-image: linear-gradient(#d1d5db 1px, transparent 0px);
diff --git a/contents/masonry-grid.mdx b/contents/masonry-grid.mdx
index 4a3d4ae..712090c 100644
--- a/contents/masonry-grid.mdx
+++ b/contents/masonry-grid.mdx
@@ -9,7 +9,7 @@ title: Masonry grid
 
 ## HTML
 
-```html
+```html index.html
 <div class="masonry-grid">
     <!--Item -->
     <div class="masonry-grid__item">...</div>
@@ -20,7 +20,7 @@ title: Masonry grid
 
 ## CSS
 
-```css
+```css styles.css
 .masonry-grid {
     /* It is split into 3 columns */
     column-count: 3;
diff --git a/contents/media-object.mdx b/contents/media-object.mdx
index f58c013..f8dd1a3 100644
--- a/contents/media-object.mdx
+++ b/contents/media-object.mdx
@@ -9,7 +9,7 @@ title: Media object
 
 ## HTML
 
-```html
+```html index.html
 <div class="media-object">
     <!-- Media object -->
     <div class="media-object__media">...</div>
@@ -20,7 +20,7 @@ title: Media object
 
 ## CSS
 
-```css
+```css styles.css
 .media-object {
     /* Align sub-items to top */
     align-items: start;
diff --git a/contents/mega-menu.mdx b/contents/mega-menu.mdx
index e12e1cf..6e664c9 100644
--- a/contents/mega-menu.mdx
+++ b/contents/mega-menu.mdx
@@ -9,7 +9,7 @@ title: Mega menu
 
 ## HTML
 
-```html
+```html index.html
 <div class="mega-menu">
     <!-- Item -->
     <div class="mega-menu__item">...</div>
@@ -30,7 +30,7 @@ title: Mega menu
 
 ## CSS
 
-```css
+```css styles.css
 .mega-menu {
     /* Used to position the mega menu */
     position: relative;
diff --git a/contents/menu.mdx b/contents/menu.mdx
index f947f69..8337318 100644
--- a/contents/menu.mdx
+++ b/contents/menu.mdx
@@ -9,7 +9,7 @@ title: Menu
 
 ## HTML
 
-```html
+```html index.html
 <div class="menu">
     <!-- Normal menu item -->
     <div class="menu__item">...</div>
@@ -41,7 +41,7 @@ title: Menu
 
 ## CSS
 
-```css
+```css styles.css
 .menu {
     display: flex;
     flex-direction: column;
diff --git a/contents/modal.mdx b/contents/modal.mdx
index 008f1de..d7e700a 100644
--- a/contents/modal.mdx
+++ b/contents/modal.mdx
@@ -9,7 +9,7 @@ title: Modal
 
 ## HTML
 
-```html
+```html index.html
 <div class="modal">
     <!-- Header -->
     <div class="modal__header">
@@ -29,7 +29,7 @@ title: Modal
 
 ## CSS
 
-```css
+```css styles.css
 .modal {
     /* Border */
     border: 1px solid #d1d5db;
diff --git a/contents/nested-dropdowns.mdx b/contents/nested-dropdowns.mdx
index ba6561d..80296c2 100644
--- a/contents/nested-dropdowns.mdx
+++ b/contents/nested-dropdowns.mdx
@@ -9,7 +9,7 @@ title: Nested dropdowns
 
 ## HTML
 
-```html
+```html index.html
 <ul class="nested-dropdowns">
     <li>A</li>
     <li>
@@ -43,7 +43,7 @@ title: Nested dropdowns
 
 ## CSS
 
-```css
+```css styles.css
 .nested-dropdowns {
     /* Border */
     border: 1px solid #d1d5db;
diff --git a/contents/notification.mdx b/contents/notification.mdx
index c15488a..4e99325 100644
--- a/contents/notification.mdx
+++ b/contents/notification.mdx
@@ -9,7 +9,7 @@ title: Notification
 
 ## HTML
 
-```html
+```html index.html
 <div class="notification">
     <!-- Content -->
     <div class="notification__body">...</div>
@@ -24,7 +24,7 @@ title: Notification
 
 ## CSS
 
-```css
+```css styles.css
 .notification {
     display: flex;
 }
diff --git a/contents/overlay-play-button.mdx b/contents/overlay-play-button.mdx
index 9ed22e9..fc7378d 100644
--- a/contents/overlay-play-button.mdx
+++ b/contents/overlay-play-button.mdx
@@ -9,7 +9,7 @@ title: Overlay play button
 
 ## HTML
 
-```html
+```html index.html
 <div class="overlay-play-button">
     <!-- The video element -->
     <video src="..." />
@@ -24,7 +24,7 @@ title: Overlay play button
 
 ## CSS
 
-```css
+```css styles.css
 .overlay-play-button {
     /* Used to position the overlay */
     position: relative;
diff --git a/contents/pagination.mdx b/contents/pagination.mdx
index c6233b5..0389c41 100644
--- a/contents/pagination.mdx
+++ b/contents/pagination.mdx
@@ -9,7 +9,7 @@ title: Pagination
 
 ## HTML
 
-```html
+```html index.html
 <div class="pagination">
     <!-- Pagination item -->
     <div class="pagination__item">...</div>
@@ -21,7 +21,7 @@ title: Pagination
 
 ## CSS
 
-```css
+```css styles.css
 .pagination {
     display: flex;
 
diff --git a/contents/popover-arrow.mdx b/contents/popover-arrow.mdx
index 08e6329..882a946 100644
--- a/contents/popover-arrow.mdx
+++ b/contents/popover-arrow.mdx
@@ -9,7 +9,7 @@ title: Popover arrow
 
 ## HTML
 
-```html
+```html index.html
 <div class="popover-arrow">
     <!-- The content -->
     ...
@@ -54,7 +54,7 @@ title: Popover arrow
 
 ## CSS
 
-```css
+```css styles.css
 .popover-arrow {
     /* Border */
     border: 1px solid #d1d5db;
@@ -386,3 +386,8 @@ body {
 </div>
 ```
 </Playground>
+
+## See also
+
+-   [Speech bubble](https://phuoc.ng/collection/css-layout/speech-bubble)
+-   [Triangle buttons](https://phuoc.ng/collection/css-layout/triangle-buttons)
diff --git a/contents/presence-indicator.mdx b/contents/presence-indicator.mdx
index 6094065..54f978c 100644
--- a/contents/presence-indicator.mdx
+++ b/contents/presence-indicator.mdx
@@ -9,7 +9,7 @@ title: Presence indicator
 
 ## HTML
 
-```html
+```html index.html
 <div class="presence-indicator">
     <!-- Other element such as avatar -->
     ...
@@ -21,7 +21,7 @@ title: Presence indicator
 
 ## CSS
 
-```css
+```css styles.css
 .presence-indicator {
     position: relative;
 }
diff --git a/contents/previous-next-buttons.mdx b/contents/previous-next-buttons.mdx
index 175d7e3..fb0a949 100644
--- a/contents/previous-next-buttons.mdx
+++ b/contents/previous-next-buttons.mdx
@@ -9,7 +9,7 @@ title: Previous next buttons
 
 ## HTML
 
-```html
+```html index.html
 <div class="previous-next-buttons">
     <!-- Previous link sticks to the left -->
     <div class="previous-next-buttons__nav">
@@ -25,7 +25,7 @@ title: Previous next buttons
 
 ## CSS
 
-```css
+```css styles.css
 .previous-next-buttons {
     align-items: center;
     display: flex;
diff --git a/contents/price-tag.mdx b/contents/price-tag.mdx
index 67e82b4..45c6000 100644
--- a/contents/price-tag.mdx
+++ b/contents/price-tag.mdx
@@ -9,13 +9,13 @@ title: Price tag
 
 ## HTML
 
-```html
+```html index.html
 <div class="price-tag">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 :root {
     --price-tag-background: #d1d5db;
     --price-tag-height: 2rem;
diff --git a/contents/pricing-table.mdx b/contents/pricing-table.mdx
index 6c1659b..095bbe4 100644
--- a/contents/pricing-table.mdx
+++ b/contents/pricing-table.mdx
@@ -9,7 +9,7 @@ title: Pricing table
 
 ## HTML
 
-```html
+```html index.html
 <div class="pricing-table">
     <!-- Pricing column -->
     <div class="pricing-table__column">
@@ -33,7 +33,7 @@ title: Pricing table
 
 ## CSS
 
-```css
+```css styles.css
 .pricing-table {
     /* Content is centered horizontally */
     align-items: center;
diff --git a/contents/progress-bar.mdx b/contents/progress-bar.mdx
index 74694c2..23c047a 100644
--- a/contents/progress-bar.mdx
+++ b/contents/progress-bar.mdx
@@ -9,7 +9,7 @@ title: Progress bar
 
 ## HTML
 
-```html
+```html index.html
 <div class="container">
     <!-- Width based on the number of percentages -->
     <div class="container__progress" style="width: 40%;">
@@ -21,7 +21,7 @@ title: Progress bar
 
 ## CSS
 
-```css
+```css styles.css
 .progress-bar {
     /* Colors */
     background-color: #d1d5db;
diff --git a/contents/property-list.mdx b/contents/property-list.mdx
index e764e18..a29800e 100644
--- a/contents/property-list.mdx
+++ b/contents/property-list.mdx
@@ -9,7 +9,7 @@ title: Property list
 
 ## HTML
 
-```html
+```html index.html
 <!-- A property item -->
 <dl class="property-list">
     <!-- Property name -->
@@ -25,7 +25,7 @@ title: Property list
 
 ## CSS
 
-```css
+```css styles.css
 .property-list {
     /* Content is center horizontally */
     align-items: center;
diff --git a/contents/questions-and-answers.mdx b/contents/questions-and-answers.mdx
index fa7a3ac..60ffbff 100644
--- a/contents/questions-and-answers.mdx
+++ b/contents/questions-and-answers.mdx
@@ -9,7 +9,7 @@ title: Questions and answers
 
 ## HTML
 
-```html
+```html index.html
 <!-- Collapsed question and answer item -->
 <div class="questions-and-answers__item questions-and-answers__item--collapsed">
     <!-- Heading -->
@@ -31,7 +31,7 @@ title: Questions and answers
 
 ## CSS
 
-```css
+```css styles.css
 .questions-and-answers__item:not(:last-child) {
     border-bottom: 1px solid #d1d5db;
 }
diff --git a/contents/radial-progress-bar.mdx b/contents/radial-progress-bar.mdx
index e8903ca..bda6363 100644
--- a/contents/radial-progress-bar.mdx
+++ b/contents/radial-progress-bar.mdx
@@ -9,7 +9,7 @@ title: Radial progress bar
 
 ## HTML
 
-```html
+```html index.html
 <div class="radial-progress-bar">
     <!-- Show number of percentages -->
     <div class="radial-progress-bar__percentages">...</div>
@@ -27,7 +27,7 @@ title: Radial progress bar
 
 ## CSS
 
-```css
+```css styles.css
 :root {
     --radial-progress-bar-size: 8rem;
     --radial-progress-bar-border-width: 0.75rem;
diff --git a/contents/radio-button-group.mdx b/contents/radio-button-group.mdx
index e6fce51..76224ab 100644
--- a/contents/radio-button-group.mdx
+++ b/contents/radio-button-group.mdx
@@ -9,7 +9,7 @@ title: Radio button group
 
 ## HTML
 
-```html
+```html index.html
 <div class="radio-button-group">
     <!-- Each radio item -->
     <label class="radio-button-group__label">
@@ -30,7 +30,7 @@ title: Radio button group
 
 ## CSS
 
-```css
+```css styles.css
 .radio-button-group {
     display: flex;
 
diff --git a/contents/radio-switch.mdx b/contents/radio-switch.mdx
index 63ba72f..5b5e622 100644
--- a/contents/radio-switch.mdx
+++ b/contents/radio-switch.mdx
@@ -9,7 +9,7 @@ title: Radio switch
 
 ## HTML
 
-```html
+```html index.html
 <div class="radio-switch">
     <!-- Radio container -->
     <label class="radio-switch__label radio-switch__label--selected">
@@ -26,7 +26,7 @@ title: Radio switch
 
 ## CSS
 
-```css
+```css styles.css
 .radio-switch {
     background-color: #d1d5db;
     border-radius: 9999px;
diff --git a/contents/rating.mdx b/contents/rating.mdx
index 20a8650..1684b1a 100644
--- a/contents/rating.mdx
+++ b/contents/rating.mdx
@@ -9,7 +9,7 @@ title: Rating
 
 ## HTML
 
-```html
+```html index.html
 <div class="rating">
     <button class="rating__star">☆</button>
     <button class="rating__star">☆</button>
@@ -21,7 +21,7 @@ title: Rating
 
 ## CSS
 
-```css
+```css styles.css
 .rating {
     /* Center the content */
     align-items: center;
diff --git a/contents/resizable-element.mdx b/contents/resizable-element.mdx
index 888f3c2..e062f13 100644
--- a/contents/resizable-element.mdx
+++ b/contents/resizable-element.mdx
@@ -9,7 +9,7 @@ title: Resizable element
 
 ## HTML
 
-```html
+```html index.html
 <div class="resizable-element">
     <!-- The content -->
     ...
@@ -42,7 +42,7 @@ title: Resizable element
 
 ## CSS
 
-```css
+```css styles.css
 .resizable-element {
     /* Border */
     border: 1px dashed #d1d5db;
diff --git a/contents/ribbon.mdx b/contents/ribbon.mdx
index 6ba4681..dfc9b19 100644
--- a/contents/ribbon.mdx
+++ b/contents/ribbon.mdx
@@ -9,7 +9,7 @@ title: Ribbon
 
 ## HTML
 
-```html
+```html index.html
 <div class="ribbon">
     <!-- The left side -->
     <div class="ribbon__side ribbon__side--l"></div>
@@ -30,7 +30,7 @@ title: Ribbon
 
 ## CSS
 
-```css
+```css styles.css
 .ribbon {
     /* Center the content */
     align-items: center;
diff --git a/contents/same-height-columns.mdx b/contents/same-height-columns.mdx
index 3a95e83..67f61ba 100644
--- a/contents/same-height-columns.mdx
+++ b/contents/same-height-columns.mdx
@@ -9,7 +9,7 @@ title: Same height columns
 
 ## HTML
 
-```html
+```html index.html
 <div class="same-height-columns">
     <!-- Column -->
     <div class="same-height-columns__column">
@@ -30,7 +30,7 @@ title: Same height columns
 
 ## CSS
 
-```css
+```css styles.css
 .same-height-columns {
     display: flex;
 }
diff --git a/contents/search-box.mdx b/contents/search-box.mdx
index ca99648..b9ca1d1 100644
--- a/contents/search-box.mdx
+++ b/contents/search-box.mdx
@@ -9,7 +9,7 @@ title: Search box
 
 ## HTML
 
-```html
+```html index.html
 <div class="search-box">
     <!-- Text input -->
     <input type="text" class="search-box__input" />
@@ -21,7 +21,7 @@ title: Search box
 
 ## CSS
 
-```css
+```css styles.css
 .search-box {
     display: flex;
 
diff --git a/contents/separator.mdx b/contents/separator.mdx
index 6dfb384..7ef9bdc 100644
--- a/contents/separator.mdx
+++ b/contents/separator.mdx
@@ -9,7 +9,7 @@ title: Separator
 
 ## HTML
 
-```html
+```html index.html
 <div class="separator">
     <!-- Text -->
     <div class="separator__content">...</div>
@@ -21,7 +21,7 @@ title: Separator
 
 ## CSS
 
-```css
+```css styles.css
 .separator {
     /* Content is centered horizontally */
     align-items: center;
diff --git a/contents/sidebar.mdx b/contents/sidebar.mdx
index d610e96..a1fbd6f 100644
--- a/contents/sidebar.mdx
+++ b/contents/sidebar.mdx
@@ -9,7 +9,7 @@ title: Sidebar
 
 ## HTML
 
-```html
+```html index.html
 <div class="sidebar">
     <!-- Sidebar -->
     <aside class="sidebar__sidebar">...</aside>
@@ -21,7 +21,7 @@ title: Sidebar
 
 ## CSS
 
-```css
+```css styles.css
 .sidebar {
     display: flex;
 }
diff --git a/contents/simple-grid.mdx b/contents/simple-grid.mdx
index 9e7ee5b..3859d82 100644
--- a/contents/simple-grid.mdx
+++ b/contents/simple-grid.mdx
@@ -9,7 +9,7 @@ title: Simple grid
 
 ## HTML
 
-```html
+```html index.html
 <!-- Row -->
 <div class="simple-grid">
     <!--Cell with given width. Replace 25% with whatever you want -->
@@ -22,7 +22,7 @@ title: Simple grid
 
 ## CSS
 
-```css
+```css styles.css
 .simple-grid {
     display: flex;
 
diff --git a/contents/slider.mdx b/contents/slider.mdx
index a847469..361e40f 100644
--- a/contents/slider.mdx
+++ b/contents/slider.mdx
@@ -9,7 +9,7 @@ title: Slider
 
 ## HTML
 
-```html
+```html index.html
 <div class="slider">
     <!-- Left side -->
     <!-- Width based on the current value -->
@@ -25,7 +25,7 @@ title: Slider
 
 ## CSS
 
-```css
+```css styles.css
 .slider {
     /* Content is centered horizontally */
     align-items: center;
diff --git a/contents/spin-button.mdx b/contents/spin-button.mdx
index 37e6df9..4ce89f6 100644
--- a/contents/spin-button.mdx
+++ b/contents/spin-button.mdx
@@ -9,7 +9,7 @@ title: Spin button
 
 ## HTML
 
-```html
+```html index.html
 <div class="spin-button">
     <!-- Input -->
     <input type="text" class="spin-button__input" />
@@ -27,7 +27,7 @@ title: Spin button
 
 ## CSS
 
-```css
+```css styles.css
 .spin-button {
     border: 1px solid #d1d5db;
     border-radius: 0.25rem;
diff --git a/contents/spinner.mdx b/contents/spinner.mdx
index 0fbf31f..4d01ebe 100644
--- a/contents/spinner.mdx
+++ b/contents/spinner.mdx
@@ -9,13 +9,13 @@ title: Spinner
 
 ## HTML
 
-```html
+```html index.html
 <div class="spinner"></div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 .spinner {
     /* Size */
     height: 4rem;
diff --git a/contents/split-navigation.mdx b/contents/split-navigation.mdx
index a8758bf..8ce1fb7 100644
--- a/contents/split-navigation.mdx
+++ b/contents/split-navigation.mdx
@@ -9,7 +9,7 @@ title: Split navigation
 
 ## HTML
 
-```html
+```html index.html
 <ul class="split-navigation">
     <!-- Navigation item -->
     <li class="split-navigation__item">
@@ -25,7 +25,7 @@ title: Split navigation
 
 ## CSS
 
-```css
+```css styles.css
 .split-navigation {
     /* Content is centered horizontally */
     align-items: center;
diff --git a/contents/split-screen.mdx b/contents/split-screen.mdx
index ac9ae2b..120636b 100644
--- a/contents/split-screen.mdx
+++ b/contents/split-screen.mdx
@@ -9,7 +9,7 @@ title: Split screen
 
 ## HTML
 
-```html
+```html index.html
 <div class="split-screen">
     <!-- Left content -->
     <div class="split-screen__half">...</div>
@@ -21,7 +21,7 @@ title: Split screen
 
 ## CSS
 
-```css
+```css styles.css
 .split-screen {
     display: flex;
 }
diff --git a/contents/stacked-cards.mdx b/contents/stacked-cards.mdx
index 75f61c8..e01307d 100644
--- a/contents/stacked-cards.mdx
+++ b/contents/stacked-cards.mdx
@@ -9,7 +9,7 @@ title: Stacked cards
 
 ## HTML
 
-```html
+```html index.html
 <div class="stacked-cards">
     <!-- Repeat if you want to have more cards -->
     <div class="stacked-cards__card"></div>
@@ -21,7 +21,7 @@ title: Stacked cards
 
 ## CSS
 
-```css
+```css styles.css
 .stacked-cards {
     /* Used to position the stacked cards */
     position: relative;
diff --git a/contents/stamp-border.mdx b/contents/stamp-border.mdx
index 6c5b815..7e186b3 100644
--- a/contents/stamp-border.mdx
+++ b/contents/stamp-border.mdx
@@ -9,7 +9,7 @@ title: Stamp border
 
 ## HTML
 
-```html
+```html index.html
 <div class="stamp-border">
     <div class="stamp-border__content"></div>
 </div>
@@ -17,7 +17,7 @@ title: Stamp border
 
 ## CSS
 
-```css
+```css styles.css
 .stamp-border {
     /* Background */
     background-color: #d1d5db;
diff --git a/contents/statistic.mdx b/contents/statistic.mdx
index 705984c..f13088a 100644
--- a/contents/statistic.mdx
+++ b/contents/statistic.mdx
@@ -9,7 +9,7 @@ title: Statistic
 
 ## HTML
 
-```html
+```html index.html
 <div class="statistic">
     <!-- Value -->
     <div class="statistic__value">...</div>
@@ -21,7 +21,7 @@ title: Statistic
 
 ## CSS
 
-```css
+```css styles.css
 .statistic {
     /* Center the content */
     align-items: center;
diff --git a/contents/status-light.mdx b/contents/status-light.mdx
index e6a0a99..4f8d481 100644
--- a/contents/status-light.mdx
+++ b/contents/status-light.mdx
@@ -9,7 +9,7 @@ title: Status light
 
 ## HTML
 
-```html
+```html index.html
 <div class="status-light">
     <!-- Status light -->
     <div class="status-light__status"></div>
@@ -21,7 +21,7 @@ title: Status light
 
 ## CSS
 
-```css
+```css styles.css
 .status-light {
     /* Center the content */
     align-items: center;
diff --git a/contents/stepper-input.mdx b/contents/stepper-input.mdx
index efc2bc5..a3c2bed 100644
--- a/contents/stepper-input.mdx
+++ b/contents/stepper-input.mdx
@@ -9,7 +9,7 @@ title: Stepper input
 
 ## HTML
 
-```html
+```html index.html
 <div class="stepper-input">
     <!-- Minus button -->
     <button class="stepper-input__button">-</button>
@@ -26,7 +26,7 @@ title: Stepper input
 
 ## CSS
 
-```css
+```css styles.css
 .stepper-input {
     display: flex;
 
diff --git a/contents/sticky-footer.mdx b/contents/sticky-footer.mdx
index 94069be..e754178 100644
--- a/contents/sticky-footer.mdx
+++ b/contents/sticky-footer.mdx
@@ -9,7 +9,7 @@ title: Sticky footer
 
 ## HTML
 
-```html
+```html index.html
 <div class="sticky-footer">
     <header class="sticky-footer__header">...</header>
     <main class="sticky-footer__main">...</main>
@@ -19,7 +19,7 @@ title: Sticky footer
 
 ## CSS
 
-```css
+```css styles.css
 .sticky-footer {
     display: flex;
     flex-direction: column;
diff --git a/contents/sticky-header.mdx b/contents/sticky-header.mdx
index 82b3d49..08107ad 100644
--- a/contents/sticky-header.mdx
+++ b/contents/sticky-header.mdx
@@ -9,7 +9,7 @@ title: Sticky header
 
 ## HTML
 
-```html
+```html index.html
 <div>
     <header class="sticky-header__header">...</header>
     <main>...</main>
@@ -18,7 +18,7 @@ title: Sticky header
 
 ## CSS
 
-```css
+```css styles.css
 .sticky-header__header {
     /* Stick to the top */
     position: sticky;
diff --git a/contents/sticky-sections.mdx b/contents/sticky-sections.mdx
index a8d7aef..86182ac 100644
--- a/contents/sticky-sections.mdx
+++ b/contents/sticky-sections.mdx
@@ -9,7 +9,7 @@ title: Sticky sections
 
 ## HTML
 
-```html
+```html index.html
 <div class="sticky-sections">
     <section class="sticky-sections__section">...</section>
 
@@ -20,7 +20,7 @@ title: Sticky sections
 
 ## CSS
 
-```css
+```css styles.css
 .sticky-sections {
     height: 100%;
     overflow: scroll;
diff --git a/contents/sticky-table-column.mdx b/contents/sticky-table-column.mdx
index 3aec2f8..1785cfa 100644
--- a/contents/sticky-table-column.mdx
+++ b/contents/sticky-table-column.mdx
@@ -9,7 +9,7 @@ title: Sticky table column
 
 ## HTML
 
-```html
+```html index.html
 <table class="sticky-table-column">
     <thead>
         <tr>
@@ -29,7 +29,7 @@ title: Sticky table column
 
 ## CSS
 
-```css
+```css styles.css
 .sticky-table-headers__sticky {
     /* Background color */
     background-color: #9ca3af;
diff --git a/contents/sticky-table-headers.mdx b/contents/sticky-table-headers.mdx
index 05faa66..abe4895 100644
--- a/contents/sticky-table-headers.mdx
+++ b/contents/sticky-table-headers.mdx
@@ -9,7 +9,7 @@ title: Sticky table headers
 
 ## HTML
 
-```html
+```html index.html
 <table class="sticky-table-headers">
     <thead>
         <tr class="sticky-table-headers__sticky"></tr>
@@ -22,7 +22,7 @@ title: Sticky table headers
 
 ## CSS
 
-```css
+```css styles.css
 .sticky-table-headers__sticky {
     /* Background color */
     background-color: #9ca3af;
diff --git a/contents/switch.mdx b/contents/switch.mdx
index 7ac6300..13e00f5 100644
--- a/contents/switch.mdx
+++ b/contents/switch.mdx
@@ -11,7 +11,7 @@ The checkbox is placed inside a label. So when clicking on the label, the checkb
 
 ## HTML
 
-```html
+```html index.html
 <label class="switch switch--on">
     <input type="checkbox" class="switch__input" />
 
@@ -29,7 +29,7 @@ The checkbox is placed inside a label. So when clicking on the label, the checkb
 
 ## CSS
 
-```css
+```css styles.css
 .switch {
     display: flex;
 
diff --git a/contents/tab.mdx b/contents/tab.mdx
index 8d2b099..c573f0c 100644
--- a/contents/tab.mdx
+++ b/contents/tab.mdx
@@ -9,7 +9,7 @@ title: Tab
 
 ## HTML
 
-```html
+```html index.html
 <div class="tab">
     <!-- Active tab -->
     <div class="tab__item tab__item--active">...</div>
@@ -21,7 +21,7 @@ title: Tab
 
 ## CSS
 
-```css
+```css styles.css
 .tab {
     /* Center the content */
     align-items: center;
diff --git a/contents/teardrop.mdx b/contents/teardrop.mdx
index efa35df..9a987a2 100644
--- a/contents/teardrop.mdx
+++ b/contents/teardrop.mdx
@@ -9,7 +9,7 @@ title: Teardrop
 
 ## HTML
 
-```html
+```html index.html
 <div class="teardrop">
     <!-- Display the content vertically -->
     <div class="teardrop__content">...</div>
@@ -18,7 +18,7 @@ title: Teardrop
 
 ## CSS
 
-```css
+```css styles.css
 .teardrop {
     /* Center the content */
     align-items: center;
diff --git a/contents/three-dimensions-card.mdx b/contents/three-dimensions-card.mdx
index 4f621aa..7e94396 100644
--- a/contents/three-dimensions-card.mdx
+++ b/contents/three-dimensions-card.mdx
@@ -9,13 +9,13 @@ title: Three dimensions card
 
 ## HTML
 
-```html
+```html index.html
 <div class="three-dimensions-card">...</div>
 ```
 
 ## CSS
 
-```css
+```css styles.css
 :root {
     --three-dimensions-card-left-side-width: 1rem;
 }
diff --git a/contents/timeline.mdx b/contents/timeline.mdx
index 4a9c1ea..0ba3f12 100644
--- a/contents/timeline.mdx
+++ b/contents/timeline.mdx
@@ -9,7 +9,7 @@ title: Timeline
 
 ## HTML
 
-```html
+```html index.html
 <div class="timeline">
     <!-- Left vertical line -->
     <div class="timeline__line"></div>
@@ -39,7 +39,7 @@ title: Timeline
 
 ## CSS
 
-```css
+```css styles.css
 .timeline {
     /* Used to position the left vertical line */
     position: relative;
diff --git a/contents/toggle-password-visibility.mdx b/contents/toggle-password-visibility.mdx
index 94a3361..6041c3c 100644
--- a/contents/toggle-password-visibility.mdx
+++ b/contents/toggle-password-visibility.mdx
@@ -9,7 +9,7 @@ title: Toggle password visibility
 
 ## HTML
 
-```html
+```html index.html
 <div class="toggle-password-visibility">
     <!-- Text input -->
     <input type="text" class="toggle-password-visibility__input" />
@@ -21,7 +21,7 @@ title: Toggle password visibility
 
 ## CSS
 
-```css
+```css styles.css
 .toggle-password-visibility {
     display: flex;
 
diff --git a/contents/tooltip.mdx b/contents/tooltip.mdx
index b39e124..6a6c553 100644
--- a/contents/tooltip.mdx
+++ b/contents/tooltip.mdx
@@ -12,7 +12,7 @@ updated: '2021-10-01'
 
 ## HTML
 
-```html
+```html index.html
 <div class="tooltip">
     <!-- The tooltip content -->
     <div class="tooltip__content">...</div>
@@ -27,7 +27,7 @@ updated: '2021-10-01'
 
 ## CSS
 
-```css
+```css styles.css
 .tooltip {
     /* Used to position the arrow */
     position: relative;
diff --git a/contents/tree-diagram.mdx b/contents/tree-diagram.mdx
index 4b57518..40d74ee 100644
--- a/contents/tree-diagram.mdx
+++ b/contents/tree-diagram.mdx
@@ -9,7 +9,7 @@ title: Tree diagram
 
 ## HTML
 
-```html
+```html index.html
 <div class="tree-diagram">
     <ul>
         <li>
@@ -42,7 +42,7 @@ title: Tree diagram
 
 ## CSS
 
-```css
+```css styles.css
 .tree-diagram ul {
     display: flex;
     position: relative;
diff --git a/contents/triangle-buttons.mdx b/contents/triangle-buttons.mdx
index 4183463..8577197 100644
--- a/contents/triangle-buttons.mdx
+++ b/contents/triangle-buttons.mdx
@@ -9,7 +9,7 @@ title: Triangle buttons
 
 ## HTML
 
-```html
+```html index.html
 <!-- Up triangle button -->
 <button class="triangle-buttons">
     <!-- Triangle -->
@@ -49,7 +49,7 @@ title: Triangle buttons
 
 ## CSS
 
-```css
+```css styles.css
 .triangle-buttons {
     /* Center the content */
     align-items: center;
@@ -170,3 +170,8 @@ body {
 </div>
 ```
 </Playground>
+
+## See also
+
+-   [Popover arrow](https://phuoc.ng/collection/css-layout/popover-arrow)
+-   [Speech bubble](https://phuoc.ng/collection/css-layout/speech-bubble)
diff --git a/contents/upload-button.mdx b/contents/upload-button.mdx
index 43740d8..8eff98b 100644
--- a/contents/upload-button.mdx
+++ b/contents/upload-button.mdx
@@ -9,7 +9,7 @@ title: Upload button
 
 ## HTML
 
-```html
+```html index.html
 <div class="upload-button">
     <!-- The real file input -->
     <input type="file" class="upload-button__input" />
@@ -24,7 +24,7 @@ title: Upload button
 
 ## CSS
 
-```css
+```css styles.css
 .upload-button {
     /* Used to position the input */
     position: relative;
diff --git a/contents/validation-icon.mdx b/contents/validation-icon.mdx
index 2d3cee1..b23aa88 100644
--- a/contents/validation-icon.mdx
+++ b/contents/validation-icon.mdx
@@ -9,7 +9,7 @@ title: Validation icon
 
 ## HTML
 
-```html
+```html index.html
 <div class="validation-icon">
     <!-- The input -->
     <input class="validation-icon__input" />
@@ -24,7 +24,7 @@ title: Validation icon
 
 ## CSS
 
-```css
+```css styles.css
 .validation-icon {
     /* Used to position the validation icon */
     position: relative;
diff --git a/contents/video-background.mdx b/contents/video-background.mdx
index f62d820..73bd56a 100644
--- a/contents/video-background.mdx
+++ b/contents/video-background.mdx
@@ -11,7 +11,7 @@ In this pattern, the video is displayed in the background.
 
 ## HTML
 
-```html
+```html index.html
 <div class="video-background">
     <!-- The video container -->
     <div class="video-background__inner">
@@ -25,7 +25,7 @@ In this pattern, the video is displayed in the background.
 
 ## CSS
 
-```css
+```css styles.css
 .video-background {
     /* Used to position the video and content */
     position: relative;
diff --git a/contents/voting.mdx b/contents/voting.mdx
index f6e0811..9bfca2c 100644
--- a/contents/voting.mdx
+++ b/contents/voting.mdx
@@ -9,7 +9,7 @@ title: Voting
 
 ## HTML
 
-```html
+```html index.html
 <div class="voting">
     <!-- Up button -->
     <button class="voting__button">
@@ -28,7 +28,7 @@ title: Voting
 
 ## CSS
 
-```css
+```css styles.css
 .voting {
     border: 1px solid #d1d5db;
     border-radius: 0.25rem;
diff --git a/contents/watermark.mdx b/contents/watermark.mdx
index 1a97ce8..9a9f6bb 100644
--- a/contents/watermark.mdx
+++ b/contents/watermark.mdx
@@ -9,7 +9,7 @@ title: Watermark
 
 ## HTML
 
-```html
+```html index.html
 <div class="watermark">
     <!-- Watermark container -->
     <div class="watermark__inner">
@@ -24,7 +24,7 @@ title: Watermark
 
 ## CSS
 
-```css
+```css styles.css
 .watermark {
     /* Used to position the watermark */
     position: relative;
diff --git a/contents/wizard.mdx b/contents/wizard.mdx
index 710fbb3..eb8d972 100644
--- a/contents/wizard.mdx
+++ b/contents/wizard.mdx
@@ -9,7 +9,7 @@ title: Wizard
 
 ## HTML
 
-```html
+```html index.html
 <div class="wizard">
     <!-- Step -->
     <div class="wizard__step">
@@ -35,7 +35,7 @@ title: Wizard
 
 ## CSS
 
-```css
+```css styles.css
 .wizard {
     display: flex;
 }
diff --git a/contents/zigzag-timeline.mdx b/contents/zigzag-timeline.mdx
index 30bdaca..40b18b5 100644
--- a/contents/zigzag-timeline.mdx
+++ b/contents/zigzag-timeline.mdx
@@ -9,7 +9,7 @@ title: Zigzag timeline
 
 ## HTML
 
-```html
+```html index.html
 <div class="zigzag-timeline__item">
     <!-- Milestone -->
     <div className="zigzag-timeline__milestone">...</div>
@@ -24,7 +24,7 @@ title: Zigzag timeline
 
 ## CSS
 
-```css
+```css styles.css
 .zigzag-timeline__item {
     /* Used to position the milestone */
     position: relative;