diff --git a/patterns/accordion/Details.tsx b/pages/accordion/index.tsx
similarity index 100%
rename from patterns/accordion/Details.tsx
rename to pages/accordion/index.tsx
diff --git a/patterns/arrow-buttons/Details.tsx b/pages/arrow-buttons/index.tsx
similarity index 100%
rename from patterns/arrow-buttons/Details.tsx
rename to pages/arrow-buttons/index.tsx
diff --git a/patterns/avatar-list/Details.tsx b/pages/avatar-list/index.tsx
similarity index 100%
rename from patterns/avatar-list/Details.tsx
rename to pages/avatar-list/index.tsx
diff --git a/patterns/avatar/Details.tsx b/pages/avatar/index.tsx
similarity index 100%
rename from patterns/avatar/Details.tsx
rename to pages/avatar/index.tsx
diff --git a/patterns/badge/Details.tsx b/pages/badge/index.tsx
similarity index 100%
rename from patterns/badge/Details.tsx
rename to pages/badge/index.tsx
diff --git a/patterns/breadcrumb/Details.tsx b/pages/breadcrumb/index.tsx
similarity index 100%
rename from patterns/breadcrumb/Details.tsx
rename to pages/breadcrumb/index.tsx
diff --git a/patterns/button-with-icon/Details.tsx b/pages/button-with-icon/index.tsx
similarity index 100%
rename from patterns/button-with-icon/Details.tsx
rename to pages/button-with-icon/index.tsx
diff --git a/patterns/card-layout/Details.tsx b/pages/card-layout/index.tsx
similarity index 100%
rename from patterns/card-layout/Details.tsx
rename to pages/card-layout/index.tsx
diff --git a/patterns/card/Details.tsx b/pages/card/index.tsx
similarity index 100%
rename from patterns/card/Details.tsx
rename to pages/card/index.tsx
diff --git a/patterns/centering/Details.tsx b/pages/centering/index.tsx
similarity index 100%
rename from patterns/centering/Details.tsx
rename to pages/centering/index.tsx
diff --git a/pages/chip/InputChip.tsx b/pages/chip/InputChip.tsx
new file mode 100644
index 0000000..ea8748d
--- /dev/null
+++ b/pages/chip/InputChip.tsx
@@ -0,0 +1,60 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+const InputChip: React.FC<{}> = ({ children }) => {
+    return (
+        <div
+            style={{
+                alignItems: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                borderRadius: '9999px',
+                display: 'inline-flex',
+                justifyContent: 'center',
+                padding: '4px 8px',
+            }}
+        >
+            <div style={{ flex: 1, marginRight: '4px' }}>
+                {children}
+            </div>
+            <button
+                style={{
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    cursor: 'pointer',
+                    height: '16px',
+                    position: 'relative',
+                    width: '16px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        height: '1px',
+                        left: 0,
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translate(0%, -50%) rotate(45deg)',
+                        width: '100%',
+                    }}
+                />
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        height: '100%',
+                        left: '50%',
+                        position: 'absolute',
+                        top: 0,
+                        transform: 'translate(-50%, 0%) rotate(45deg)',
+                        width: '1px',
+                    }}
+                />
+            </button>
+        </div>
+    );
+};
+
+export default InputChip;
diff --git a/patterns/chip/Details.tsx b/pages/chip/index.tsx
similarity index 100%
rename from patterns/chip/Details.tsx
rename to pages/chip/index.tsx
diff --git a/patterns/circular-navigation/Details.tsx b/pages/circular-navigation/index.tsx
similarity index 100%
rename from patterns/circular-navigation/Details.tsx
rename to pages/circular-navigation/index.tsx
diff --git a/patterns/close-button/Details.tsx b/pages/close-button/index.tsx
similarity index 100%
rename from patterns/close-button/Details.tsx
rename to pages/close-button/index.tsx
diff --git a/patterns/color-swatch/Details.tsx b/pages/color-swatch/index.tsx
similarity index 100%
rename from patterns/color-swatch/Details.tsx
rename to pages/color-swatch/index.tsx
diff --git a/pages/concave-corners/concave-corners.css b/pages/concave-corners/concave-corners.css
new file mode 100644
index 0000000..c7155ae
--- /dev/null
+++ b/pages/concave-corners/concave-corners.css
@@ -0,0 +1,66 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --concave-corners-background: rgba(0, 0, 0, .3);
+    --concave-corners-size: 1rem;
+}
+
+.concave-corners {
+    background-color: var(--concave-corners-background);
+    
+    /* Used to position the corners */
+    position: relative;
+
+    /* Misc */
+    height: 100%;
+}
+
+.concave-corners__corner {
+    /* Absolute position */
+    position: absolute;
+
+    /* Size */
+    height: var(--concave-corners-size);    
+    width: var(--concave-corners-size);
+
+    background: #FFF;
+}
+
+.concave-corners__corner--tl {
+    /* Position */
+    left: 0;
+    top: 0;
+
+    /* Border radius */
+    border-radius: 0 0 var(--concave-corners-size) 0;
+}
+
+.concave-corners__corner--tr {
+    /* Position */ 
+    right: 0;
+    top: 0;
+
+    /* Border radius */
+    border-radius: 0 0 0 var(--concave-corners-size);
+}
+
+.concave-corners__corner--bl {
+    /* Position */
+    bottom: 0;
+    left: 0;
+
+    /* Border radius */
+    border-radius: 0 var(--concave-corners-size) 0 0;
+}
+
+.concave-corners__corner--br {
+    /* Position */
+    bottom: 0;
+    right: 0;
+
+    /* Border radius */
+    border-radius: var(--concave-corners-size) 0 0 0;
+}
\ No newline at end of file
diff --git a/patterns/concave-corners/Details.tsx b/pages/concave-corners/index.tsx
similarity index 100%
rename from patterns/concave-corners/Details.tsx
rename to pages/concave-corners/index.tsx
diff --git a/patterns/cookie-banner/Details.tsx b/pages/cookie-banner/index.tsx
similarity index 100%
rename from patterns/cookie-banner/Details.tsx
rename to pages/cookie-banner/index.tsx
diff --git a/patterns/corner-ribbon/Details.tsx b/pages/corner-ribbon/index.tsx
similarity index 100%
rename from patterns/corner-ribbon/Details.tsx
rename to pages/corner-ribbon/index.tsx
diff --git a/patterns/curved-background/Details.tsx b/pages/curved-background/index.tsx
similarity index 100%
rename from patterns/curved-background/Details.tsx
rename to pages/curved-background/index.tsx
diff --git a/patterns/custom-checkbox-button/Details.tsx b/pages/custom-checkbox-button/index.tsx
similarity index 100%
rename from patterns/custom-checkbox-button/Details.tsx
rename to pages/custom-checkbox-button/index.tsx
diff --git a/patterns/custom-radio-button/Details.tsx b/pages/custom-radio-button/index.tsx
similarity index 100%
rename from patterns/custom-radio-button/Details.tsx
rename to pages/custom-radio-button/index.tsx
diff --git a/patterns/diagonal-section/Details.tsx b/pages/diagonal-section/index.tsx
similarity index 100%
rename from patterns/diagonal-section/Details.tsx
rename to pages/diagonal-section/index.tsx
diff --git a/patterns/docked-at-corner/Details.tsx b/pages/docked-at-corner/index.tsx
similarity index 100%
rename from patterns/docked-at-corner/Details.tsx
rename to pages/docked-at-corner/index.tsx
diff --git a/patterns/dot-leader/Details.tsx b/pages/dot-leader/index.tsx
similarity index 100%
rename from patterns/dot-leader/Details.tsx
rename to pages/dot-leader/index.tsx
diff --git a/patterns/dot-navigation/Details.tsx b/pages/dot-navigation/index.tsx
similarity index 100%
rename from patterns/dot-navigation/Details.tsx
rename to pages/dot-navigation/index.tsx
diff --git a/patterns/drawer/Details.tsx b/pages/drawer/index.tsx
similarity index 100%
rename from patterns/drawer/Details.tsx
rename to pages/drawer/index.tsx
diff --git a/patterns/drop-area/Details.tsx b/pages/drop-area/index.tsx
similarity index 100%
rename from patterns/drop-area/Details.tsx
rename to pages/drop-area/index.tsx
diff --git a/pages/drop-cap/dropcap.css b/pages/drop-cap/dropcap.css
new file mode 100644
index 0000000..b12883d
--- /dev/null
+++ b/pages/drop-cap/dropcap.css
@@ -0,0 +1,14 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-drop-cap:first-letter {
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    float: left;
+    font-size: 64px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0 8px 0 0;
+    padding: 0 8px; 
+}
diff --git a/patterns/drop-cap/Details.tsx b/pages/drop-cap/index.tsx
similarity index 100%
rename from patterns/drop-cap/Details.tsx
rename to pages/drop-cap/index.tsx
diff --git a/pages/dropdown/dropdown.css b/pages/dropdown/dropdown.css
new file mode 100644
index 0000000..604ffe8
--- /dev/null
+++ b/pages/dropdown/dropdown.css
@@ -0,0 +1,12 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-dropdown-content {
+    display: none;
+}
+
+.p-dropdown:hover .p-dropdown-content {
+    display: block;
+}
diff --git a/patterns/dropdown/Details.tsx b/pages/dropdown/index.tsx
similarity index 100%
rename from patterns/dropdown/Details.tsx
rename to pages/dropdown/index.tsx
diff --git a/patterns/fading-long-section/Details.tsx b/pages/fading-long-section/index.tsx
similarity index 100%
rename from patterns/fading-long-section/Details.tsx
rename to pages/fading-long-section/index.tsx
diff --git a/patterns/feature-comparison/Details.tsx b/pages/feature-comparison/index.tsx
similarity index 100%
rename from patterns/feature-comparison/Details.tsx
rename to pages/feature-comparison/index.tsx
diff --git a/patterns/feature-list/Details.tsx b/pages/feature-list/index.tsx
similarity index 100%
rename from patterns/feature-list/Details.tsx
rename to pages/feature-list/index.tsx
diff --git a/patterns/fixed-at-corner/Details.tsx b/pages/fixed-at-corner/index.tsx
similarity index 100%
rename from patterns/fixed-at-corner/Details.tsx
rename to pages/fixed-at-corner/index.tsx
diff --git a/patterns/fixed-at-side/Details.tsx b/pages/fixed-at-side/index.tsx
similarity index 100%
rename from patterns/fixed-at-side/Details.tsx
rename to pages/fixed-at-side/index.tsx
diff --git a/pages/floating-label/floating-label.css b/pages/floating-label/floating-label.css
new file mode 100644
index 0000000..9fef476
--- /dev/null
+++ b/pages/floating-label/floating-label.css
@@ -0,0 +1,14 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-floating-container label {
+    opacity: 0;
+}
+
+.p-floating-container input:not(:placeholder-shown) + label {
+    background: #FFF;
+    transform: translate(0, -50%);
+    opacity: 1;
+}
diff --git a/patterns/floating-label/Details.tsx b/pages/floating-label/index.tsx
similarity index 100%
rename from patterns/floating-label/Details.tsx
rename to pages/floating-label/index.tsx
diff --git a/pages/folder-structure/folder-structure.css b/pages/folder-structure/folder-structure.css
new file mode 100644
index 0000000..502cec5
--- /dev/null
+++ b/pages/folder-structure/folder-structure.css
@@ -0,0 +1,54 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --folder-structure-item-height: 1rem;
+    --folder-structure-item-margin-left: 2rem;
+    --folder-structure-item-padding-top: 1rem;
+}
+
+.folder-structure ul {
+    /* Reset */
+    list-style-type: none;
+    margin: 0;
+}
+
+.folder-structure li {
+    padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
+    position: relative;
+}
+
+.folder-structure li::before {
+    border-left: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+    
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
+
+    /* Size */
+    height: 100%;
+}
+
+.folder-structure li::after {
+    border-bottom: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+    transform: translate(-100%, 0);
+
+    /* Size */
+    width: var(--folder-structure-item-margin-left);
+}
+
+/* Remove the border from the last item */
+.folder-structure li:last-child::before {
+    height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+}
diff --git a/patterns/folder-structure/Details.tsx b/pages/folder-structure/index.tsx
similarity index 100%
rename from patterns/folder-structure/Details.tsx
rename to pages/folder-structure/index.tsx
diff --git a/patterns/full-background/Details.tsx b/pages/full-background/index.tsx
similarity index 100%
rename from patterns/full-background/Details.tsx
rename to pages/full-background/index.tsx
diff --git a/patterns/full-screen-menu/Details.tsx b/pages/full-screen-menu/index.tsx
similarity index 100%
rename from patterns/full-screen-menu/Details.tsx
rename to pages/full-screen-menu/index.tsx
diff --git a/patterns/holy-grail/Details.tsx b/pages/holy-grail/index.tsx
similarity index 100%
rename from patterns/holy-grail/Details.tsx
rename to pages/holy-grail/index.tsx
diff --git a/patterns/initial-avatar/Details.tsx b/pages/initial-avatar/index.tsx
similarity index 100%
rename from patterns/initial-avatar/Details.tsx
rename to pages/initial-avatar/index.tsx
diff --git a/patterns/input-addon/Details.tsx b/pages/input-addon/index.tsx
similarity index 100%
rename from patterns/input-addon/Details.tsx
rename to pages/input-addon/index.tsx
diff --git a/patterns/inverted-corners/Details.tsx b/pages/inverted-corners/index.tsx
similarity index 100%
rename from patterns/inverted-corners/Details.tsx
rename to pages/inverted-corners/index.tsx
diff --git a/pages/inverted-corners/inverted-corners.css b/pages/inverted-corners/inverted-corners.css
new file mode 100644
index 0000000..b9b022b
--- /dev/null
+++ b/pages/inverted-corners/inverted-corners.css
@@ -0,0 +1,53 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --inverted-corners-background: #52525B;
+    --inverted-corners-size: 2rem;
+}
+
+.inverted-corners {
+    background-color: var(--inverted-corners-background);
+    
+    /* Used to position the corner */
+    position: relative;
+
+    /* Misc */
+    height: 100%;
+}
+
+.inverted-corners::before {
+    content: '';
+
+    /* Absolute position */
+    bottom: calc(-2 * var(--inverted-corners-size));
+    left: 0;
+    position: absolute;
+
+    /* Size */
+    height: calc(2 * var(--inverted-corners-size));
+    width: var(--inverted-corners-size);
+
+    /* Border */
+    background-color: transparent;
+    border-top-left-radius: var(--inverted-corners-size);
+    box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
+}
+
+/* Use case */
+.inverted-corners--speech {
+    /* Border radius */
+    border-bottom-right-radius: var(--inverted-corners-size);
+    border-top-left-radius: var(--inverted-corners-size);
+    border-top-right-radius: var(--inverted-corners-size);
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Misc */
+    color: #FFF;
+}
\ No newline at end of file
diff --git a/patterns/keyboard-shortcut/Details.tsx b/pages/keyboard-shortcut/index.tsx
similarity index 100%
rename from patterns/keyboard-shortcut/Details.tsx
rename to pages/keyboard-shortcut/index.tsx
diff --git a/patterns/layered-card/Details.tsx b/pages/layered-card/index.tsx
similarity index 100%
rename from patterns/layered-card/Details.tsx
rename to pages/layered-card/index.tsx
diff --git a/pages/layered-card/styles.css b/pages/layered-card/styles.css
new file mode 100644
index 0000000..4295d5a
--- /dev/null
+++ b/pages/layered-card/styles.css
@@ -0,0 +1,26 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.layered-card {
+    position: relative;
+}
+
+.layered-card::before {
+    background: rgba(0, 0, 0, 0.3);
+    content: '';
+    
+    /* Position */
+    top: 0;
+    left: 0;
+    position: absolute;
+    transform: translate(1rem, 1rem);
+
+    /* Size */
+    height: 100%;
+    width: 100%;
+
+    /* Display under the main content */
+    z-index: -1;
+}
diff --git a/patterns/lined-paper/Details.tsx b/pages/lined-paper/index.tsx
similarity index 100%
rename from patterns/lined-paper/Details.tsx
rename to pages/lined-paper/index.tsx
diff --git a/patterns/masonry-grid/Details.tsx b/pages/masonry-grid/index.tsx
similarity index 100%
rename from patterns/masonry-grid/Details.tsx
rename to pages/masonry-grid/index.tsx
diff --git a/pages/masonry-grid/masonry-grid.css b/pages/masonry-grid/masonry-grid.css
new file mode 100644
index 0000000..f26a81b
--- /dev/null
+++ b/pages/masonry-grid/masonry-grid.css
@@ -0,0 +1,20 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.masonry-grid {
+    column-count: 3;
+    column-gap: 1rem;
+
+    /* Misc */
+    width: 100%;
+}
+
+.masonry-grid__item {
+    /* Prevent a column from breaking into multiple columns */
+    break-inside: avoid;
+
+    /* Misc */
+    margin-bottom: 1rem;
+}
diff --git a/patterns/media-object/Details.tsx b/pages/media-object/index.tsx
similarity index 100%
rename from patterns/media-object/Details.tsx
rename to pages/media-object/index.tsx
diff --git a/patterns/mega-menu/Details.tsx b/pages/mega-menu/index.tsx
similarity index 100%
rename from patterns/mega-menu/Details.tsx
rename to pages/mega-menu/index.tsx
diff --git a/pages/mega-menu/mega-menu.css b/pages/mega-menu/mega-menu.css
new file mode 100644
index 0000000..b47f1b4
--- /dev/null
+++ b/pages/mega-menu/mega-menu.css
@@ -0,0 +1,22 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-mega-menu-container {
+    position: relative;
+}
+.p-mega-menu-content {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: none;
+    left: 0px;
+    margin-top: -1px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 9999;
+}
+.p-mega-menu-trigger:hover .p-mega-menu-content {
+    display: block;
+}
diff --git a/patterns/menu/Details.tsx b/pages/menu/index.tsx
similarity index 100%
rename from patterns/menu/Details.tsx
rename to pages/menu/index.tsx
diff --git a/pages/menu/menu.css b/pages/menu/menu.css
new file mode 100644
index 0000000..8dc8766
--- /dev/null
+++ b/pages/menu/menu.css
@@ -0,0 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-menu-item:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
diff --git a/patterns/modal/Details.tsx b/pages/modal/index.tsx
similarity index 100%
rename from patterns/modal/Details.tsx
rename to pages/modal/index.tsx
diff --git a/patterns/nested-dropdowns/Details.tsx b/pages/nested-dropdowns/index.tsx
similarity index 100%
rename from patterns/nested-dropdowns/Details.tsx
rename to pages/nested-dropdowns/index.tsx
diff --git a/pages/nested-dropdowns/nested-dropdowns.css b/pages/nested-dropdowns/nested-dropdowns.css
new file mode 100644
index 0000000..54cabce
--- /dev/null
+++ b/pages/nested-dropdowns/nested-dropdowns.css
@@ -0,0 +1,43 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-nested-dropdowns {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: flex;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.p-nested-dropdowns li {
+    padding: 8px;
+    position: relative;
+}
+
+.p-nested-dropdowns ul {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: none;
+    left: 0;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 100%;
+    width: 200px;
+}
+
+.p-nested-dropdowns ul ul {
+    left: 100%;
+    position: absolute;
+    top: 0;
+}
+
+.p-nested-dropdowns li:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.p-nested-dropdowns li:hover > ul {
+    display: block;
+}
diff --git a/patterns/notification/Details.tsx b/pages/notification/index.tsx
similarity index 100%
rename from patterns/notification/Details.tsx
rename to pages/notification/index.tsx
diff --git a/patterns/overlay-play-button/Details.tsx b/pages/overlay-play-button/index.tsx
similarity index 100%
rename from patterns/overlay-play-button/Details.tsx
rename to pages/overlay-play-button/index.tsx
diff --git a/patterns/pagination/Details.tsx b/pages/pagination/index.tsx
similarity index 100%
rename from patterns/pagination/Details.tsx
rename to pages/pagination/index.tsx
diff --git a/patterns/popover-arrow/Details.tsx b/pages/popover-arrow/index.tsx
similarity index 100%
rename from patterns/popover-arrow/Details.tsx
rename to pages/popover-arrow/index.tsx
diff --git a/patterns/presence-indicator/Details.tsx b/pages/presence-indicator/index.tsx
similarity index 100%
rename from patterns/presence-indicator/Details.tsx
rename to pages/presence-indicator/index.tsx
diff --git a/patterns/previous-next-buttons/Details.tsx b/pages/previous-next-buttons/index.tsx
similarity index 100%
rename from patterns/previous-next-buttons/Details.tsx
rename to pages/previous-next-buttons/index.tsx
diff --git a/patterns/price-tag/Details.tsx b/pages/price-tag/index.tsx
similarity index 100%
rename from patterns/price-tag/Details.tsx
rename to pages/price-tag/index.tsx
diff --git a/pages/price-tag/price-tag.css b/pages/price-tag/price-tag.css
new file mode 100644
index 0000000..f7be3ec
--- /dev/null
+++ b/pages/price-tag/price-tag.css
@@ -0,0 +1,65 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --price-tag-background: rgba(0, 0, 0, 0.3);
+    --price-tag-height: 2rem;
+}
+
+.price-tag {
+    background: var(--price-tag-background);
+    color: #FFF;
+
+    /* Center the price */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Used to position the triangle */
+    position: relative;
+
+    /* Size */
+    height: var(--price-tag-height);
+
+    /* Spacing */
+    padding: 0.25rem 0.5rem;
+}
+
+/* The triangle */
+.price-tag::before {
+    content: '';
+
+    border-color: transparent var(--price-tag-background) transparent transparent;
+    border-style: solid;
+    border-width: calc(var(--price-tag-height) / 2)
+                  calc(var(--price-tag-height) / 2)
+                  calc(var(--price-tag-height) / 2)
+                  0rem;
+    
+    /* Position */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+    transform: translate(-100%, 0px);
+}
+
+/* The dot */
+.price-tag::after {
+    content: '';
+
+    /* Make it like a cirle */ 
+    background: #FFF;
+    border-radius: 9999rem;
+    
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-0.5rem, -50%);
+
+    /* Size */
+    height: 0.5rem;
+    width: 0.5rem;
+}
diff --git a/patterns/pricing-table/Details.tsx b/pages/pricing-table/index.tsx
similarity index 100%
rename from patterns/pricing-table/Details.tsx
rename to pages/pricing-table/index.tsx
diff --git a/patterns/progress-bar/Details.tsx b/pages/progress-bar/index.tsx
similarity index 100%
rename from patterns/progress-bar/Details.tsx
rename to pages/progress-bar/index.tsx
diff --git a/patterns/property-list/Details.tsx b/pages/property-list/index.tsx
similarity index 100%
rename from patterns/property-list/Details.tsx
rename to pages/property-list/index.tsx
diff --git a/patterns/questions-and-answers/Details.tsx b/pages/questions-and-answers/index.tsx
similarity index 100%
rename from patterns/questions-and-answers/Details.tsx
rename to pages/questions-and-answers/index.tsx
diff --git a/patterns/radial-progress-bar/Details.tsx b/pages/radial-progress-bar/index.tsx
similarity index 100%
rename from patterns/radial-progress-bar/Details.tsx
rename to pages/radial-progress-bar/index.tsx
diff --git a/patterns/radio-button-group/Details.tsx b/pages/radio-button-group/index.tsx
similarity index 100%
rename from patterns/radio-button-group/Details.tsx
rename to pages/radio-button-group/index.tsx
diff --git a/pages/radio-button-group/radio-button-group.css b/pages/radio-button-group/radio-button-group.css
new file mode 100644
index 0000000..39d5284
--- /dev/null
+++ b/pages/radio-button-group/radio-button-group.css
@@ -0,0 +1,11 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-radio-button-group label {
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+}
+.p-radio-button-group label:last-child {
+    border-right-color: transparent;
+}
diff --git a/patterns/radio-switch/Details.tsx b/pages/radio-switch/index.tsx
similarity index 100%
rename from patterns/radio-switch/Details.tsx
rename to pages/radio-switch/index.tsx
diff --git a/pages/rating/Star.tsx b/pages/rating/Star.tsx
new file mode 100644
index 0000000..428d112
--- /dev/null
+++ b/pages/rating/Star.tsx
@@ -0,0 +1,22 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import './star.css';
+
+interface StarProps {
+    isActive: boolean;
+}
+
+const Star: React.FC<StarProps> = ({ isActive }) => {
+    return (
+        <button className="p-rating-star">
+            {isActive ? '★' : '☆'}
+        </button>
+    );
+};
+
+export default Star;
diff --git a/patterns/rating/Details.tsx b/pages/rating/index.tsx
similarity index 100%
rename from patterns/rating/Details.tsx
rename to pages/rating/index.tsx
diff --git a/pages/rating/star.css b/pages/rating/star.css
new file mode 100644
index 0000000..5494bb6
--- /dev/null
+++ b/pages/rating/star.css
@@ -0,0 +1,33 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-rating {
+    align-items: center;
+    display: flex;
+    font-size: 32px;
+    justify-content: center;
+    flex-direction: row-reverse;
+}
+
+.p-rating .p-rating-star:hover,
+.p-rating .p-rating-star:hover ~ .p-rating-star {
+    color: transparent;
+}
+
+.p-rating .p-rating-star:hover:before,
+.p-rating .p-rating-star:hover ~ .p-rating-star:before {
+    color: #00449e;
+    content: '\2605';
+    left: 0;
+    position: absolute;
+}
+
+.p-rating-star {
+    background-color: transparent;
+    border: transparent;
+    margin: 0 2px;
+    padding: 0;
+    position: relative;
+}
diff --git a/patterns/resizable-element/Details.tsx b/pages/resizable-element/index.tsx
similarity index 100%
rename from patterns/resizable-element/Details.tsx
rename to pages/resizable-element/index.tsx
diff --git a/patterns/ribbon/Details.tsx b/pages/ribbon/index.tsx
similarity index 100%
rename from patterns/ribbon/Details.tsx
rename to pages/ribbon/index.tsx
diff --git a/patterns/same-height-columns/Details.tsx b/pages/same-height-columns/index.tsx
similarity index 100%
rename from patterns/same-height-columns/Details.tsx
rename to pages/same-height-columns/index.tsx
diff --git a/patterns/search-box/Details.tsx b/pages/search-box/index.tsx
similarity index 100%
rename from patterns/search-box/Details.tsx
rename to pages/search-box/index.tsx
diff --git a/patterns/separator/Details.tsx b/pages/separator/index.tsx
similarity index 100%
rename from patterns/separator/Details.tsx
rename to pages/separator/index.tsx
diff --git a/patterns/sidebar/Details.tsx b/pages/sidebar/index.tsx
similarity index 100%
rename from patterns/sidebar/Details.tsx
rename to pages/sidebar/index.tsx
diff --git a/patterns/simple-grid/Details.tsx b/pages/simple-grid/index.tsx
similarity index 100%
rename from patterns/simple-grid/Details.tsx
rename to pages/simple-grid/index.tsx
diff --git a/patterns/slider/Details.tsx b/pages/slider/index.tsx
similarity index 100%
rename from patterns/slider/Details.tsx
rename to pages/slider/index.tsx
diff --git a/patterns/spin-button/Details.tsx b/pages/spin-button/index.tsx
similarity index 100%
rename from patterns/spin-button/Details.tsx
rename to pages/spin-button/index.tsx
diff --git a/patterns/split-navigation/Details.tsx b/pages/split-navigation/index.tsx
similarity index 100%
rename from patterns/split-navigation/Details.tsx
rename to pages/split-navigation/index.tsx
diff --git a/patterns/split-screen/Details.tsx b/pages/split-screen/index.tsx
similarity index 100%
rename from patterns/split-screen/Details.tsx
rename to pages/split-screen/index.tsx
diff --git a/patterns/stacked-cards/Details.tsx b/pages/stacked-cards/index.tsx
similarity index 100%
rename from patterns/stacked-cards/Details.tsx
rename to pages/stacked-cards/index.tsx
diff --git a/patterns/stamp-border/Details.tsx b/pages/stamp-border/index.tsx
similarity index 100%
rename from patterns/stamp-border/Details.tsx
rename to pages/stamp-border/index.tsx
diff --git a/patterns/statistic/Details.tsx b/pages/statistic/index.tsx
similarity index 100%
rename from patterns/statistic/Details.tsx
rename to pages/statistic/index.tsx
diff --git a/patterns/status-light/Details.tsx b/pages/status-light/index.tsx
similarity index 100%
rename from patterns/status-light/Details.tsx
rename to pages/status-light/index.tsx
diff --git a/patterns/stepper-input/Details.tsx b/pages/stepper-input/index.tsx
similarity index 100%
rename from patterns/stepper-input/Details.tsx
rename to pages/stepper-input/index.tsx
diff --git a/patterns/sticky-footer/Details.tsx b/pages/sticky-footer/index.tsx
similarity index 100%
rename from patterns/sticky-footer/Details.tsx
rename to pages/sticky-footer/index.tsx
diff --git a/patterns/sticky-header/Details.tsx b/pages/sticky-header/index.tsx
similarity index 100%
rename from patterns/sticky-header/Details.tsx
rename to pages/sticky-header/index.tsx
diff --git a/patterns/sticky-sections/Details.tsx b/pages/sticky-sections/index.tsx
similarity index 100%
rename from patterns/sticky-sections/Details.tsx
rename to pages/sticky-sections/index.tsx
diff --git a/patterns/sticky-table-column/Details.tsx b/pages/sticky-table-column/index.tsx
similarity index 100%
rename from patterns/sticky-table-column/Details.tsx
rename to pages/sticky-table-column/index.tsx
diff --git a/patterns/sticky-table-headers/Details.tsx b/pages/sticky-table-headers/index.tsx
similarity index 100%
rename from patterns/sticky-table-headers/Details.tsx
rename to pages/sticky-table-headers/index.tsx
diff --git a/patterns/switch/Details.tsx b/pages/switch/index.tsx
similarity index 100%
rename from patterns/switch/Details.tsx
rename to pages/switch/index.tsx
diff --git a/patterns/tab/Details.tsx b/pages/tab/index.tsx
similarity index 100%
rename from patterns/tab/Details.tsx
rename to pages/tab/index.tsx
diff --git a/patterns/teardrop/Details.tsx b/pages/teardrop/index.tsx
similarity index 100%
rename from patterns/teardrop/Details.tsx
rename to pages/teardrop/index.tsx
diff --git a/patterns/three-dimensions-card/Details.tsx b/pages/three-dimensions-card/index.tsx
similarity index 100%
rename from patterns/three-dimensions-card/Details.tsx
rename to pages/three-dimensions-card/index.tsx
diff --git a/pages/three-dimensions-card/styles.css b/pages/three-dimensions-card/styles.css
new file mode 100644
index 0000000..41f9ab6
--- /dev/null
+++ b/pages/three-dimensions-card/styles.css
@@ -0,0 +1,46 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --three-dimensions-card-left-side-width: 1rem;
+}
+
+.three-dimensions-card {
+    position: relative;
+}
+
+/* The left side */
+.three-dimensions-card::before { 
+    background: rgba(0, 0, 0, 0.3);
+    content: '';
+    
+    /* Position */
+    top: var(--three-dimensions-card-left-side-width);
+    left: 0px;
+    position: absolute;
+    transform: translate(-100%, 0) skewY(-45deg);
+    transform-origin: left top;
+
+    /* Size */
+    height: 100%;
+    width: var(--three-dimensions-card-left-side-width);
+}
+
+/* The bottom side */
+.three-dimensions-card::after {
+    background: rgba(0, 0, 0, 0.3);
+    content: '';    
+    
+    /* Position */
+    bottom: 0px;
+    left: 0px;
+    position: absolute;
+    transform: translate(0, 100%) skewX(-45deg);
+    transform-origin: left top;
+
+    /* Size */
+    height: var(--three-dimensions-card-left-side-width);
+    width: 100%;
+}
diff --git a/patterns/timeline/Details.tsx b/pages/timeline/index.tsx
similarity index 100%
rename from patterns/timeline/Details.tsx
rename to pages/timeline/index.tsx
diff --git a/patterns/toggle-password-visibility/Details.tsx b/pages/toggle-password-visibility/index.tsx
similarity index 100%
rename from patterns/toggle-password-visibility/Details.tsx
rename to pages/toggle-password-visibility/index.tsx
diff --git a/patterns/tooltip/Details.tsx b/pages/tooltip/index.tsx
similarity index 100%
rename from patterns/tooltip/Details.tsx
rename to pages/tooltip/index.tsx
diff --git a/pages/tooltip/tooltip.css b/pages/tooltip/tooltip.css
new file mode 100644
index 0000000..2447273
--- /dev/null
+++ b/pages/tooltip/tooltip.css
@@ -0,0 +1,37 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-tooltip {
+    position: relative;
+}
+.p-tooltip:hover .p-tooltip-arrow,
+.p-tooltip:hover .p-tooltip-content {
+    opacity: 1;
+    pointer-events: initial;
+}
+.p-tooltip-arrow {
+    border: 8px solid transparent;
+    border-top-color: #00439e;
+    bottom: 100%;
+    height: 0;
+    left: 50%;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(-50%, 8px);
+    width: 0;
+    z-index: 10;
+}
+.p-tooltip-content {
+    background-color: #00439e;
+    border-radius: 2px;
+    bottom: 100%;
+    left: 50%;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(-50%, -8px);
+    z-index: 10;
+}
diff --git a/patterns/tree-diagram/Details.tsx b/pages/tree-diagram/index.tsx
similarity index 100%
rename from patterns/tree-diagram/Details.tsx
rename to pages/tree-diagram/index.tsx
diff --git a/pages/tree-diagram/tree-diagram.css b/pages/tree-diagram/tree-diagram.css
new file mode 100644
index 0000000..306134e
--- /dev/null
+++ b/pages/tree-diagram/tree-diagram.css
@@ -0,0 +1,67 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.tree-diagram ul {
+    display: flex;
+    position: relative;
+
+    /* Reset */
+    list-style-type: none;
+    margin: 0;
+    padding: 1rem 0.5rem 0rem 0.5rem;
+}
+
+.tree-diagram ul ul::before {
+    border-right: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+    height: 1rem;
+    position: absolute;
+    top: 0;
+    right: 50%;
+    width: 50%;
+}
+
+.tree-diagram li {
+    padding: 1rem 0.5rem 0rem 0.5rem;
+    position: relative;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;    
+    flex-direction: column;
+}
+
+.tree-diagram li::before {
+    border-right: 1px solid rgba(0, 0, 0, .3);
+    border-top: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+    height: 1rem;
+
+    /* Position */
+    position: absolute;
+    top: 0;
+    right: 50%;
+    width: 50%;
+}
+
+.tree-diagram li::after {
+    border-top: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+
+    /* Position */
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+}
+
+.tree-diagram li:first-child::before,
+.tree-diagram li:last-child::after {
+    border-top: none;
+}
+
+li.tree-diagram__root::before {
+    border-right: none;
+}
diff --git a/patterns/triangle-buttons/Details.tsx b/pages/triangle-buttons/index.tsx
similarity index 100%
rename from patterns/triangle-buttons/Details.tsx
rename to pages/triangle-buttons/index.tsx
diff --git a/patterns/upload-button/Details.tsx b/pages/upload-button/index.tsx
similarity index 100%
rename from patterns/upload-button/Details.tsx
rename to pages/upload-button/index.tsx
diff --git a/patterns/validation-icon/Details.tsx b/pages/validation-icon/index.tsx
similarity index 100%
rename from patterns/validation-icon/Details.tsx
rename to pages/validation-icon/index.tsx
diff --git a/patterns/video-background/Details.tsx b/pages/video-background/index.tsx
similarity index 100%
rename from patterns/video-background/Details.tsx
rename to pages/video-background/index.tsx
diff --git a/patterns/voting/Details.tsx b/pages/voting/index.tsx
similarity index 100%
rename from patterns/voting/Details.tsx
rename to pages/voting/index.tsx
diff --git a/patterns/watermark/Details.tsx b/pages/watermark/index.tsx
similarity index 100%
rename from patterns/watermark/Details.tsx
rename to pages/watermark/index.tsx
diff --git a/patterns/wizard/Details.tsx b/pages/wizard/index.tsx
similarity index 100%
rename from patterns/wizard/Details.tsx
rename to pages/wizard/index.tsx
diff --git a/patterns/zigzag-timeline/Details.tsx b/pages/zigzag-timeline/index.tsx
similarity index 100%
rename from patterns/zigzag-timeline/Details.tsx
rename to pages/zigzag-timeline/index.tsx
diff --git a/pages/zigzag-timeline/zigzag-timeline.css b/pages/zigzag-timeline/zigzag-timeline.css
new file mode 100644
index 0000000..46cbfde
--- /dev/null
+++ b/pages/zigzag-timeline/zigzag-timeline.css
@@ -0,0 +1,48 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.zigzag-timeline__item {
+    /* Used to position the milestone */
+    position: relative;
+
+    /* Border */
+    border-bottom: 1px solid #71717A;
+
+    /* Take full width */
+    width: 100%;
+}
+
+.zigzag-timeline__milestone {
+    /* Absolute position */
+    position: absolute;    
+    top: 50%;
+
+    /* Circle it */
+    border-radius: 50%;
+    height: 2rem;
+    width: 2rem;
+
+    /* Misc */
+    background: #71717A;
+}
+
+/* Styles for even items */
+.zigzag-timeline__item:nth-child(2n) {
+    border-left: 1px solid #71717A;
+    
+}
+.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
+    left: 0;
+    transform: translate(-50%, -50%);    
+}
+
+/* Styles for odd items */
+.zigzag-timeline__item:nth-child(2n + 1) {
+    border-right: 1px solid #71717A;
+}
+.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
+    right: 0;
+    transform: translate(50%, -50%);
+}
\ No newline at end of file