feat: Add file names to snippets

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;

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;

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;
 }

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%;

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;

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;

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;

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;

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);

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;
 

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;

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;

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;

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;
 }

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;

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;

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;
 

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;

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;
 }

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;

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;

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;

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;

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)

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;

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;

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%;

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;

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;

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;
 }

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)

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;

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;
 

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;
 }

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%;

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).

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;

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;

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%;

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;

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;

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;

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;

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;

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);

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;
 

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);

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;

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;

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;

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;

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;

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;

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;
 }

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;

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;
 

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)

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;
 }

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;

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;

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;

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;

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;

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;
 }

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;

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;
 

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;

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;

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;

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;

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;
 }

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;
 

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;

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;
 }

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;
 

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;

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;

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;

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;

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;
 }

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;

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;

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;

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;

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;
 

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;

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;

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;

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;

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;

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;
 

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;

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;

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;
 }

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;

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;
 

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;

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;

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)

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;