diff --git a/client/patterns/arrow-buttons/Details.tsx b/client/patterns/arrow-buttons/Details.tsx
index 779da39..0e03863 100644
--- a/client/patterns/arrow-buttons/Details.tsx
+++ b/client/patterns/arrow-buttons/Details.tsx
@@ -22,94 +22,43 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Up arrow button -->
-<button style="
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
+<button class="container">
     <!-- Arrow -->
-    <div style="
-        /* Transparent background */
-        background-color: transparent;
-
-        /* Edges */
-        border-left: 1px solid rgba(0, 0, 0, 0.3);
-        border-top: 1px solid rgba(0, 0, 0, 0.3);
-        transform: translateY(25%) rotate(45deg);
-
-        /* Size */
-        height: 12px;
-        width: 12px;
-    "></div>
+    <div class="container__arrow container__arrow--up"></div>
 
     <!-- Content -->
     ...
 </button>
 
 <!-- Right arrow button -->
-<button style="
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
+<button class="container">
     <!-- Content -->
     ...
 
     <!-- Arrow -->
-    <div style="
-        /* Transparent background */
-        background-color: transparent;
-
-        /* Edges */
-        border-right: 1px solid rgba(0, 0, 0, 0.3);
-        border-top: 1px solid rgba(0, 0, 0, 0.3);
-        transform: translateX(-25%) rotate(45deg);
-
-        /* Size */
-        height: 12px;
-        width: 12px;
-    "></div>
+    <div class="container__arrow container__arrow--right"></div>
 </button>
 
 <!-- Down arrow button -->
-<button style="
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
+<button class="container">
     <!-- Arrow -->
-    <div style="
-        /* Transparent background */
-        background-color: transparent;
-
-        /* Edges */
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        border-right: 1px solid rgba(0, 0, 0, 0.3);
-        transform: translateY(-25%) rotate(45deg);
-
-        /* Size */
-        height: 12px;
-        width: 12px;
-    "></div>
+    <div class="container__arrow container__arrow--down"></div>
 
     <!-- Content -->
     ...
 </button>
 
 <!-- Left arrow button -->
-<button style="
+<button class="container">
+    <!-- Arrow -->
+    <div class="container__arrow container__arrow--left"></div>
+
+    <!-- Content -->
+    ...
+</button>
+`}
+css={`
+.container {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -117,27 +66,44 @@ html={`
 
     /* Spacing */
     padding: 8px;
-">
-    <!-- Arrow -->
-    <div style="
-        /* Transparent background */
-        background-color: transparent;
+}
 
-        /* Edges */
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        border-left: 1px solid rgba(0, 0, 0, 0.3);
-        transform: translateX(25%) rotate(45deg);
+.container__arrow {
+    /* Transparent background */
+    background-color: transparent;
 
-        /* Size */
-        height: 12px;
-        width: 12px;
-    "></div>
+    /* Size */
+    height: 12px;
+    width: 12px;
+}
 
-    <!-- Content -->
-    ...
-</button>
-`}
-css={`
+.container__arrow--up {
+    /* Edges */
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
+    transform: translateY(25%) rotate(45deg);
+}
+
+.container__arrow--right {
+    /* Edges */
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
+    transform: translateX(-25%) rotate(45deg);
+}
+
+.container__arrow--down {
+    /* Edges */
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+    transform: translateY(-25%) rotate(45deg);
+}
+
+.container__arrow--left {
+    /* Edges */
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
+    transform: translateX(25%) rotate(45deg);
+}
 `}
                 >
                     <div
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
index a3e376e..4d13158 100644
--- a/client/patterns/avatar-list/Details.tsx
+++ b/client/patterns/avatar-list/Details.tsx
@@ -41,26 +41,10 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    display: flex;
-">
+<div class="container">
     <!-- Avatar item -->
-    <div style="
-        /* Nagative margin make avatar overlap to previous one */
-        margin-left: -4px;
-    ">
-        <div style="
-            /* Add a white curve between avatars */
-            box-shadow: 0 0 0 4px #FFF;
-
-            /* Center the content */
-            align-items: center;
-            display: flex;
-            justify-content: center;
-
-            /* Rounded border */
-            border-radius: 9999px;
-        ">
+    <div class="container__item">
+        <div class="container__avatar">
             <!-- Image -->
             ...
         </div>
@@ -70,7 +54,29 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+}
+
+.container__item {
+    /* Nagative margin make avatar overlap to previous one */
+    margin-left: -4px;
+}
+
+.container__avatar {
+    /* Add a white curve between avatars */
+    box-shadow: 0 0 0 4px #FFF;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Rounded border */
+    border-radius: 9999px;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/avatar/Details.tsx b/client/patterns/avatar/Details.tsx
index 8ae94d1..3a67f0d 100644
--- a/client/patterns/avatar/Details.tsx
+++ b/client/patterns/avatar/Details.tsx
@@ -21,27 +21,28 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Avatar image -->
+    <img class="container__avatar" src="..." />
+</div>
+`}
+css={`
+.container {
     /* Rounded border */
     border-radius: 50%;
     height: 64px;
     width: 64px;
-">
-    <!-- Avatar image -->
-    <img
-        src="..."
-        style="
-            /* Rounded border */
-            border-radius: 50%;
+}
 
-            /* Take full size */
-            height: 100%;
-            width: 100%;
-        "
-    />
-</div>
+.container__avatar {
+    /* Rounded border */
+    border-radius: 50%;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
index 9d853f7..bff571e 100644
--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    ...
+</div>
+`}
+css={`
+.container {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -35,11 +40,8 @@ html={`
     border-radius: 9999px;
     height: 32px;
     width: 32px;
-">
-    ...
-</div>
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index c504f95..5a059a3 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -23,29 +23,35 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    display: flex;
-    flex-direction: column;
-">
+<div class="container">
     <!-- Cover -->
-    <div style="
-        height: 150px;
-        width: 100%;
-    ">
+    <div class="container__cover">
         ...
     </div>
 
     <!-- Content -->
-    <div style="
-        /* Take available height */
-        flex: 1;
-    ">
+    <div class="container__content">
         ...
     </div>
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.container__cover {
+    height: 150px;
+    width: 100%;
+}
+
+.container__content {
+    /* Take available height */
+    flex: 1;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
index 7cbfa4b..8b6b7b3 100644
--- a/client/patterns/centering/Details.tsx
+++ b/client/patterns/centering/Details.tsx
@@ -22,15 +22,17 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    align-items: center;
-    display: flex;
-    justify-content: center;
-">
+<div class="container">
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
index d26689d..6365d41 100644
--- a/client/patterns/close-button/Details.tsx
+++ b/client/patterns/close-button/Details.tsx
@@ -21,7 +21,14 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<button style="
+<button class="container">
+    <div class="container__line container__line--first"></div>
+
+    <div class="container__line container__line--second"></div>
+</button>
+`}
+css={`
+.container {
     /* Reset */
     background-color: transparent;
     border-color: transparent;
@@ -35,39 +42,42 @@ html={`
 
     /* Used to position the inner */
     position: relative;
-">
-    <div style="
-        /* Background color */
-        background-color: rgba(0, 0, 0, 0.3);
+}
 
-        /* Position */
-        left: 0px;
-        position: absolute;
-        top: 50%;
-        transform: translate(0%, -50%) rotate(45deg);
+.container__line {
+    /* Background color */
+    background-color: rgba(0, 0, 0, 0.3);
 
-        /* Size */
-        height: 1px;
-        width: 100%;
-    " />
+    /* Position */
+    position: absolute;
 
-    <div style="
-        /* Background color */
-        background-color: rgba(0, 0, 0, 0.3);
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
 
-        /* Position */
-        left: 50%;
-        position: absolute;
-        top: 0px;
-        transform: translate(-50%, 0%) rotate(45deg);
+.container__line--first {
+    /* Position */
+    left: 0px;
+    top: 50%;
+    transform: translate(0%, -50%) rotate(45deg);
 
-        /* Size */
-        height: 100%;
-        width: 1px;
-    " />
-</button>
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.container__line--second {
+    /* Position */
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0%) rotate(45deg);
+
+    /* Size */
+    height: 100%;
+    width: 1px;
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx
index 6469e28..db557ff 100644
--- a/client/patterns/cookie-banner/Details.tsx
+++ b/client/patterns/cookie-banner/Details.tsx
@@ -23,7 +23,18 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Tells visitors that the website uses cookie -->
+    <div class="container__content">
+        ...
+    </div>
+
+    <!-- Close button -->
+    ...
+</div>
+`}
+css={`
+.container {
     /* Banner is displayed at the bottom */
     bottom: 0;
     left: 0;
@@ -34,20 +45,13 @@ html={`
     align-items: center;
     display: flex;
     justify-content: center;
-">
-    <!-- Tells visitors that the website uses cookie -->
-    <div style="
-        /* Take available width */
-        flex: 1;
-    ">
-        ...
-    </div>
+}
 
-    <!-- Close button -->
-    ...
-</div>
+.container__content {
+    /* Take available width */
+    flex: 1;
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/corner-ribbon/Details.tsx b/client/patterns/corner-ribbon/Details.tsx
index 1b9f96a..bbbe58f 100644
--- a/client/patterns/corner-ribbon/Details.tsx
+++ b/client/patterns/corner-ribbon/Details.tsx
@@ -23,49 +23,55 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    position: relative;
-">
+<div class="container">
     <!-- The container -->
-    <div style="
-        /* Displayed at the top left corner */
-        left: 0px;
-        position: absolute;
-        top: 0px;
-
-        /* Size */
-        height: 100px;
-        width: 100px;
-
-        /* Hide the part of its children which is displayed outside */
-        overflow: hidden;
-    ">
+    <div class="container__wrapper">
         <!-- The ribbon -->
-        <div style="
-            /* Position */
-            left: -64px;
-            position: absolute;
-            top: 32px;
-
-            /* Size */
-            height: 24px;
-            width: 206px;
-
-            /* Displayed diagonally */
-            transform: rotate(-45deg);
-
-            /* Background color */
-            background-color: rgba(0, 0, 0, 0.3);
-
-            /* Centerize the text content */
-            text-align: center;
-        ">
+        <div class="container__ribbon">
             ...
         </div>
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    position: relative;
+}
+
+.container__wrapper {
+    /* Displayed at the top left corner */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+
+    /* Size */
+    height: 100px;
+    width: 100px;
+
+    /* Hide the part of its children which is displayed outside */
+    overflow: hidden;
+}
+
+.container__ribbon {
+    /* Position */
+    left: -64px;
+    position: absolute;
+    top: 32px;
+
+    /* Size */
+    height: 24px;
+    width: 206px;
+
+    /* Displayed diagonally */
+    transform: rotate(-45deg);
+
+    /* Background color */
+    background-color: rgba(0, 0, 0, 0.3);
+
+    /* Centerize the text content */
+    text-align: center;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/curved-background/Details.tsx b/client/patterns/curved-background/Details.tsx
index d09fb7b..bc9eaf2 100644
--- a/client/patterns/curved-background/Details.tsx
+++ b/client/patterns/curved-background/Details.tsx
@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    ...
+</div>
+`}
+css={`
+.container {
     /* Background color */
     background-color: rgba(0, 0, 0, 0.3);
 
@@ -31,11 +36,8 @@ html={`
     /* Curved corners */
     border-bottom-left-radius: 50% 40%;
     border-bottom-right-radius: 50% 40%;
-">
-    ...
-</div>
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/diagonal-section/Details.tsx b/client/patterns/diagonal-section/Details.tsx
index a00a3e5..98f227f 100644
--- a/client/patterns/diagonal-section/Details.tsx
+++ b/client/patterns/diagonal-section/Details.tsx
@@ -22,36 +22,40 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    /* Used to position the diagonal area */
-    position: relative;
-">
+<div class="container">
     <!-- The diagonal area -->
-    <div style="
-        /* Absolute position */
-        left: 0px;
-        position: absolute;
-        top: 0px;
-
-        /* Take full size */
-        height: 100%;
-        width: 100%;
-
-        /* Create diagonal sides */
-        transform: skewY(-5deg);
-
-        /* Background color */
-        background-color: rgba(0, 0, 0, 0.3);
-
-        /* Displayed under the main content */
-        z-index: -1;
-    " />
+    <div class="container__diagonal"></div>
 
     <!-- Content -->
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Used to position the diagonal area */
+    position: relative;
+}
+
+.container__diagonal {
+    /* Absolute position */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* Create diagonal sides */
+    transform: skewY(-5deg);
+
+    /* Background color */
+    background-color: rgba(0, 0, 0, 0.3);
+
+    /* Displayed under the main content */
+    z-index: -1;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/docked-at-corner/Details.tsx b/client/patterns/docked-at-corner/Details.tsx
index e00ac80..cf86a72 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -23,28 +23,32 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    position: relative;
-">
+<div class="container">
     <!-- Docked at the top right corner -->
-    <div style="
-        position: absolute;
-        right: 0;
-        top: 0;
-        transform: translate(50%, -50%);
-
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-    ">
+    <div class="container__docker">
         ...
     </div>
 
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    position: relative;
+}
+
+.container__docker {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(50%, -50%);
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/dot-leader/Details.tsx b/client/patterns/dot-leader/Details.tsx
index 581434e..bb0a7ef 100644
--- a/client/patterns/dot-leader/Details.tsx
+++ b/client/patterns/dot-leader/Details.tsx
@@ -24,32 +24,36 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-">
+<div class="container">
     <!-- Left side -->
     <div>...</div>
 
     <!-- Dots -->
-    <div style="
-        /* Bottom border */
-        border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
-
-        /* Take remaining width */
-        flex: 1;
-
-        /* Spacing */
-        margin: 0px 4px;
-    " />
+    <div class="container__dots"></div>
 
     <!-- Right side -->
     <div>...</div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.container__dots {
+    /* Bottom border */
+    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
+
+    /* Take remaining width */
+    flex: 1;
+
+    /* Spacing */
+    margin: 0px 4px;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx
index fb27e34..9a84042 100644
--- a/client/patterns/drop-area/Details.tsx
+++ b/client/patterns/drop-area/Details.tsx
@@ -21,7 +21,12 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    ...
+</div>
+`}
+css={`
+.container {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -30,11 +35,8 @@ html={`
     /* Border */
     border: 4px dashed rgba(0, 0, 0, 0.3),
     border-radius: 4px;
-">
-    ...
-</div>
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/drop-cap/Details.tsx b/client/patterns/drop-cap/Details.tsx
index 6830e07..73ac2ac 100644
--- a/client/patterns/drop-cap/Details.tsx
+++ b/client/patterns/drop-cap/Details.tsx
@@ -22,9 +22,13 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<style>
+<div class="container">
+    ...
+</div>
+`}
+css={`
 /* Styles for the first letter */
-.p-drop-cap:first-letter {
+.container:first-letter {
     /* Display at the left */
     float: left;
     line-height: 1;
@@ -37,13 +41,7 @@ html={`
     font-size: 64px;
     font-weight: 700;
 }
-</style>
-
-<div class="p-drop-cap">
-    ...
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/fading-long-section/Details.tsx b/client/patterns/fading-long-section/Details.tsx
index 692642f..eeb86e5 100644
--- a/client/patterns/fading-long-section/Details.tsx
+++ b/client/patterns/fading-long-section/Details.tsx
@@ -24,38 +24,44 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
-    /* Used to position the faded element */
-    position: relative;
-">
+<div class="container"
     <!-- Main content -->
-    <div style="
-        /* Height */
-        height: 200px;
-
-        /* Scrollable */
-        overflow-y: scroll;
-    ">
+    <div class="container__content">
         ...
     </div>
 
     <!-- The faded element -->
-    <div style="
-        /* Displayed at the bottom */
-        bottom: 0;
-        left: 0;
-        position: absolute;
-
-        /* Size */
-        height: 30px;
-        width: 100%;
-
-        /* Gradient background */
-        background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
-    " />
+    <div class="container__fading"></div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Used to position the faded element */
+    position: relative;
+}
+
+.container__content {
+    /* Height */
+    height: 200px;
+
+    /* Scrollable */
+    overflow-y: scroll;
+}
+
+.container__fading {
+    /* Displayed at the bottom */
+    bottom: 0;
+    left: 0;
+    position: absolute;
+
+    /* Size */
+    height: 30px;
+    width: 100%;
+
+    /* Gradient background */
+    background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx
index 7038763..c9e9dbc 100644
--- a/client/patterns/feature-comparison/Details.tsx
+++ b/client/patterns/feature-comparison/Details.tsx
@@ -24,36 +24,14 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    align-items: center;
-    display: flex;
-
-    /* Bottom border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Spacing */
-    padding: 12px 0px;
-">
+<div class="container">
     <!-- Feature name -->
-    <div style="
-        /* Take available width */
-        flex: 1;
-
-        /* Spacing */
-        margin-right: 16px;
-    ">
+    <div class="container__feature">
         ...
     </div>
 
     <!-- The model -->
-    <div style="
-        /* Center the content */
-        display: flex;
-        justify-content: center;
-
-        /* Spacing */
-        margin-right: 16px;
-    ">
+    <div class="container__model">
         <!--
         For the first row: display the model name (Basic, Pro, etc.)
         From the second row: display a yes/no icon indicating the feature is available or not
@@ -68,7 +46,35 @@ html={`
 <!-- Repeated items -->
 ...
 `}
-css={``}
+css={`
+.container {
+    align-items: center;
+    display: flex;
+
+    /* Bottom border */
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+
+    /* Spacing */
+    padding: 12px 0px;
+}
+
+.container__feature {
+    /* Take available width */
+    flex: 1;
+
+    /* Spacing */
+    margin-right: 16px;
+}
+
+.container__model {
+    /* Center the content */
+    display: flex;
+    justify-content: center;
+
+    /* Spacing */
+    margin-right: 16px;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
index 972365b..df0cfc0 100644
--- a/client/patterns/feature-list/Details.tsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -25,27 +25,14 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Feature item -->
-<div style="
-    display: flex;
-
-    /* OPTIONAL: Reverse the order of image and content */
-    flex-direction: row-reverse;
-
-    /* OPTIONAL: Spacing between items */
-    margin: 16px 0;
-">
+<div class="container">
     <!-- Image -->
-    <div style="
-        width: 128px;
-    ">
+    <div class="container__image">
         ...
     </div>
 
     <!-- Right side -->
-    <div style="
-        /* Take the remaining width */
-        flex: 1;
-    ">
+    <div class="container__feature">
         ...
     </div>
 </div>
@@ -53,7 +40,26 @@ html={`
 <!-- Repeated items -->
 ...
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+
+    /* OPTIONAL: Reverse the order of image and content */
+    flex-direction: row-reverse;
+
+    /* OPTIONAL: Spacing between items */
+    margin: 16px 0;
+}
+
+.container__image {
+    width: 128px;
+}
+
+.container__feature {
+    /* Take the remaining width */
+    flex: 1;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index b716900..fefaaa8 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -22,47 +22,57 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    position: relative;
-">
+<div class="container">
     <!-- Top-left corner -->
-    <div style="
-        left: 0;
-        position: absolute;
-        top: 0;
-    ">
+    <div class="container__corner container__corner--tl">
         ...
     </div>
 
     <!-- Top-right corner -->
-    <div style="
-        position: absolute;
-        top: 0;
-        right: 0;
-    ">
+    <div class="container__corner container__corner--tr">
         ...
     </div>
 
     <!-- Bottom-right corner -->
-    <div style="
-        bottom: 0;
-        position: absolute;
-        right: 0;
-    ">
+    <div class="container__corner container__corner--br">
         ...
     </div>
 
     <!-- Bottom-left corner -->
-    <div style="
-        bottom: 0;
-        left: 0;
-        position: absolute;
-    ">
+    <div class="container__corner container__corner--bl">    
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    position: relative;
+}
+
+.container__corner {
+    position: absolute;
+}
+
+.container__corner--tl {
+    left: 0;        
+    top: 0;
+}
+
+.container__corner--tr {
+    top: 0;
+    right: 0;
+}
+
+.container__corner--br {
+    bottom: 0;
+    right: 0;
+}
+
+.container__corner--bl {
+    bottom: 0;
+    left: 0;
+}
+`}
                 >
                     <div style={{ height: '100%', position: 'relative' }}>
                         <div style={{ left: 0, position: 'absolute', top: 0 }}>
diff --git a/client/patterns/fixed-at-side/Details.tsx b/client/patterns/fixed-at-side/Details.tsx
index b74b17d..8ed71c2 100644
--- a/client/patterns/fixed-at-side/Details.tsx
+++ b/client/patterns/fixed-at-side/Details.tsx
@@ -23,16 +23,18 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Fixed at the middle of side -->
-<div style="
+<div class="container">
+    ...
+</div>
+`}
+css={`
+.container {
     right: 0;
     position: fixed;
     top: 50%;
     transform: translate(0px, -50%);
-">
-    ...
-</div>
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/full-background/Details.tsx b/client/patterns/full-background/Details.tsx
index 219ab85..6ffd862 100644
--- a/client/patterns/full-background/Details.tsx
+++ b/client/patterns/full-background/Details.tsx
@@ -22,7 +22,12 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    ...
+</div>
+`}
+css={`
+.container {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -35,11 +40,8 @@ html={`
 
     /* Background */
     background: url('/assets/full-background.jpeg') center center / cover no-repeat;
-">
-    ...
-</div>
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/initial-avatar/Details.tsx b/client/patterns/initial-avatar/Details.tsx
index 39dde5e..2fa161d 100644
--- a/client/patterns/initial-avatar/Details.tsx
+++ b/client/patterns/initial-avatar/Details.tsx
@@ -26,7 +26,15 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <div class="container__letters">
+        <!-- The letters -->
+        ...
+    </div>
+</div>
+`}
+css={`
+.container {
     /* Center the content */
     display: inline-block;
     vertical-align: middle;
@@ -42,20 +50,16 @@ html={`
     border-radius: 50%;
     height: 48px;
     width: 48px;
-">
-    <div style="
-        /* Center the content */
-        left: 50%;
-        position: absolute;
-        top: 50%;
-        transform: translate(-50%, -50%);
-    ">
-        <!-- The letters -->
-        ...
-    </div>
-</div>
+}
+
+.container__letters {
+    /* Center the content */
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/keyboard-shortcut/Details.tsx b/client/patterns/keyboard-shortcut/Details.tsx
index 9d347b3..16683ab 100644
--- a/client/patterns/keyboard-shortcut/Details.tsx
+++ b/client/patterns/keyboard-shortcut/Details.tsx
@@ -57,22 +57,25 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<kbd style="
+<kbd class="container">
+    ...
+</kbd>
+`}
+css={`
+.container {
     /* Background and color */
     background-color: rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     color: rgba(0, 0, 0, 0.7);
 
     /* Bottom shadow */
-    box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
+    box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, 
+                rgba(0, 0, 0, 0.4) 0px 1px 1px;
 
     /* Spacing */
     padding: 8px;
-">
-    ...
-</kbd>
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/lined-paper/Details.tsx b/client/patterns/lined-paper/Details.tsx
index e6b3b8f..3454a51 100644
--- a/client/patterns/lined-paper/Details.tsx
+++ b/client/patterns/lined-paper/Details.tsx
@@ -20,7 +20,12 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    ...
+</div>
+`}
+css={`
+.container {
     /* Lined background */
     background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
     background-size: 100% 2em;
@@ -31,11 +36,8 @@ html={`
     */
     background-position-y: 24px;
     line-height: 2em;
-">
-    ...
-</div>
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx
index 74eb200..4e6ecaf 100644
--- a/client/patterns/media-object/Details.tsx
+++ b/client/patterns/media-object/Details.tsx
@@ -23,31 +23,37 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    /* Align sub-items to top */
-    align-items: start;
-    display: flex;
-">
+<div class="container">
     <!-- Media object -->
-    <div style="
-        margin-right: 16px;
-
-        /* Set the width for the media object */
-        width: 200px;
-    ">
+    <div class="container__media">
         ...
     </div>
 
     <!-- Main content -->
-    <div style="
-        /* Take the remaining width */
-        flex: 1;
-    ">
+    <div class="container__content">
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Align sub-items to top */
+    align-items: start;
+    display: flex;
+}
+
+.container__media {
+    margin-right: 16px;
+
+    /* Set the width for the media object */
+    width: 200px;
+}
+
+.container__content {
+    /* Take the remaining width */
+    flex: 1;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx
index 18bcf06..0bc2d2d 100644
--- a/client/patterns/overlay-play-button/Details.tsx
+++ b/client/patterns/overlay-play-button/Details.tsx
@@ -22,38 +22,42 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    /* Used to position the overlay */
-    position: relative;
-">
+<div class="container">
     <!-- The video element -->
     <video src="..." />
 
     <!-- The overlay area -->
-    <div style="
-        /* Position */
-        left: 0;
-        position: absolute;
-        top: 0;
-
-        /* Take full size */
-        height: 100%;
-        width: 100%;
-
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-
-        /* Add a dark background */
-        background-color: 'rgba(0, 0, 0, 0.25)',
-    ">
+    <div class="container__overlay">
         <!-- The player button -->
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Used to position the overlay */
+    position: relative;
+}
+
+.container__overlay {
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Add a dark background */
+    background-color: rgba(0, 0, 0, 0.25);
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index e52cdf1..f604cd7 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -29,30 +29,9 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-">
+<div class="container">
     <!-- Pricing column -->
-    <div style="
-        /* Content is centered vertically */
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        /* Make all columns have the same width */
-        flex: 1;
-
-        /* OPTIONAL: Space between columns */
-        margin: 0 8px;
-
-        /* OPTIONAL: Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-        border-radius: 4px;
-    ">
+    <div class="container__column">
         <!-- Title -->
         ...
 
@@ -70,7 +49,32 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Content is centered horizontally */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.container__column {
+    /* Content is centered vertically */
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    /* Make all columns have the same width */
+    flex: 1;
+
+    /* OPTIONAL: Space between columns */
+    margin: 0 8px;
+
+    /* OPTIONAL: Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx
index c39ac4d..d697f97 100644
--- a/client/patterns/property-list/Details.tsx
+++ b/client/patterns/property-list/Details.tsx
@@ -42,7 +42,16 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- A property item -->
-<dl style="
+<dl class="container">
+    <!-- Property name -->
+    <dt>...</dt>
+
+    <!-- Property value -->
+    <dd>...</dd>
+</dl>
+`}
+css={`
+.container {
     /* Content is center horizontally */
     align-items: center;
     display: flex;
@@ -58,15 +67,8 @@ html={`
     /* Spacing */
     margin: 0px;
     padding: 8px 0px;
-">
-    <!-- Property name -->
-    <dt>...</dt>
-
-    <!-- Property value -->
-    <dd>...</dd>
-</dl>
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
index 8593c4b..2a8661a 100644
--- a/client/patterns/questions-and-answers/Details.tsx
+++ b/client/patterns/questions-and-answers/Details.tsx
@@ -62,15 +62,9 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Each question and answer item -->
-<div style="
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-">
+<div class="container">
     <!-- Heading -->
-    <div style="
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    ">
+    <div class="container__heading">
         <!-- Question -->
         ...
 
@@ -81,7 +75,17 @@ html={`
     <!-- Answer -->
 </div>
 `}
-css={``}
+css={`
+.container {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+.container__heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx
index 22513e3..258f7e1 100644
--- a/client/patterns/ribbon/Details.tsx
+++ b/client/patterns/ribbon/Details.tsx
@@ -22,7 +22,25 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- The content -->
+    ...
+
+    <!-- The left side -->
+    <div class="container__side container__side--left"></div>
+
+    <!-- The left triangle displayed below the content -->
+    <div class="container__triangle container__triangle--left"></div>
+
+    <!-- The right triangle displayed below the content -->
+    <div class="container__triangle container__triangle--right"></div>
+
+    <!-- The right side -->
+    <div class="container__side container__side--right"></div>
+</div>
+`}
+css={`
+.container {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -36,70 +54,49 @@ html={`
 
     /* Use to position the corners */
     position: relative;
-">
-    <!-- The content -->
-    ...
+}
 
-    <!-- The left side -->
-    <div style="
-        /* Position */
-        bottom: -8px;
-        position: absolute;
-        left: -24px;
+.container__side {
+    bottom: -8px;
+    position: absolute;
 
-        /* Displayed under the container */
-        z-index: -1;
+    /* Displayed under the container */
+    z-index: -1;
 
-        /* Background */
-        border: 16px solid #CCC;
-        border-left-color: transparent;
-    "
-    />
+    /* Background */
+    border: 16px solid #CCC;
+    border-left-color: transparent;
+}
 
-    <!-- The left triangle displayed below the content -->
-    <div style="
-        left: 0;
-        position: absolute;
-        top: 100%;
+.container__side--left {
+    /* Position */
+    left: -24px;
+}
 
-        /* Background */
-        border: 8px solid transparent;
-        border-bottom-width: 0;
-        border-right-width: 0;
-        border-top-color: #AAA;
-    " />
+.container__side--right {
+    /* Position */
+    right: -24px;
+}
 
-    <!-- The right triangle displayed below the content -->
-    <div style="
-        position: absolute;
-        right: 0;
-        top: 100%;
+.container__triangle {
+    position: absolute;
+    top: 100%;
 
-        /* Background */
-        border: 8px solid transparent;
-        border-bottom-width: 0;
-        border-left-width: 0;
-        border-top-color: #AAA;
-    " />
+    border: 8px solid transparent;
+    border-bottom-width: 0;
+    border-top-color: #AAA;
+}
 
-    <!-- The right side -->
-    <div style="
-        /* Position */
-        bottom: -8px;
-        position: absolute;
-        right: -24px;
+.container__triangle--left {
+    border-right-width: 0;
+    left: 0;
+}
 
-        /* Displayed under the container */
-        z-index: -1;
-
-        /* Background */
-        border: 16px solid #CCC;
-        border-right-color: transparent;
-    "
-    />
-</div>
+.container__triangle--right {
+    border-left-width: 0;
+    right: 0;
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/separator/Details.tsx b/client/patterns/separator/Details.tsx
index b85ca4c..163e467 100644
--- a/client/patterns/separator/Details.tsx
+++ b/client/patterns/separator/Details.tsx
@@ -21,37 +21,43 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Text -->
+    <div class="container__content">
+        ...
+    </div>
+
+    <!-- Separator line -->
+    <div class="container__separator"></div>
+</div>
+`}
+css={`
+.container {
     /* Content is centered horizontally */
     align-items: center;
     display: flex;
 
     /* Used to set the position of text */
     position: relative;
-">
-    <!-- Text -->
-    <div style="
-        /* We won't see the separator line */
-        background: #FFF;
+}
 
-        /* Displayed at the center of container */
-        left: 50%;
-        position: absolute;
-        top: 50%;
-        transform: translate(-50%, -50%);
-    ">
-        ...
-    </div>
+.container__content {
+    /* We won't see the separator line */
+    background: #FFF;
 
-    <!-- Separator line -->
-    <div style="
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        height: 1px;
-        width: 100%;
-    " />
-</div>
+    /* Displayed at the center of container */
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.container__separator {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    height: 1px;
+    width: 100%;
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/stacked-cards/Details.tsx b/client/patterns/stacked-cards/Details.tsx
index 5c591fc..33275c8 100644
--- a/client/patterns/stacked-cards/Details.tsx
+++ b/client/patterns/stacked-cards/Details.tsx
@@ -21,37 +21,41 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    /* Used to position the stacked cards */
-    position: relative;
-">
+<div class="container">
     <!-- Repeat if you want to have more cards -->
-    <div style="
-        /* Absolute position */
-        left: 0px;
-        position: absolute;
-        top: 0px;
-
-        /* Take full size */
-        height: 100%;
-        width: 100%;
-
-        /* Displayed under the container */
-        z-index: -1;
-
-        /* Background and border colors */
-        background-color: rgb(255, 255, 255);
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
-        /* Rotate it. Change the number of degrees for the following cards */
-        transform: rotate(5deg);
-    " />
+    <div class="container__card"></div>
 
     <!-- Main card's content -->
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Used to position the stacked cards */
+    position: relative;
+}
+
+.container__card {
+    /* Absolute position */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* Displayed under the container */
+    z-index: -1;
+
+    /* Background and border colors */
+    background-color: rgb(255, 255, 255);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+
+    /* Rotate it. Change the number of degrees for the following cards */
+    transform: rotate(5deg);
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/stamp-border/Details.tsx b/client/patterns/stamp-border/Details.tsx
index 2360593..6e7ba10 100644
--- a/client/patterns/stamp-border/Details.tsx
+++ b/client/patterns/stamp-border/Details.tsx
@@ -20,7 +20,16 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Inner -->
+    <div class="container__inner">
+        <!-- Content -->
+        ...
+    </div>
+</div>
+`}
+css={`
+.container {
     /* Background */
     background-color: #ccc;
     background-image: radial-gradient(#fff 50%, transparent 50%);
@@ -30,18 +39,13 @@ html={`
 
     /* Spacing */
     padding: 5px;
-">
-    <!-- Inner -->
-    <div style="
-        /* Background */
-        background-color: #ccc;
-    ">
-        <!-- Content -->
-        ...
-    </div>
-</div>
+}
+
+.container__inner {
+    /* Background */
+    background-color: #ccc;
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/statistic/Details.tsx b/client/patterns/statistic/Details.tsx
index 7dbad3b..90528b0 100644
--- a/client/patterns/statistic/Details.tsx
+++ b/client/patterns/statistic/Details.tsx
@@ -21,35 +21,41 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-    flex-direction: column;
-">
+<div class="container">
     <!-- Value -->
-    <div style="
-        /* Big font size */
-        font-size: 4rem;
-        font-weight: 500;
-    ">
+    <div class="container__value">
         ...
     </div>
 
     <!-- Label -->
-    <div style="
-        /* Smaller font size */
-        font-size: 1rem;
-        font-weight: 700;
-
-        /* Uppercase the label */
-        text-transform: uppercase;
-    ">
+    <div class="container__label">
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Center the content */
+    align-items: center;
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.container__value {
+    /* Big font size */
+    font-size: 4rem;
+    font-weight: 500;
+}
+
+.container__label {
+    /* Smaller font size */
+    font-size: 1rem;
+    font-weight: 700;
+
+    /* Uppercase the label */
+    text-transform: uppercase;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/status-light/Details.tsx b/client/patterns/status-light/Details.tsx
index b6b33cf..fac6058 100644
--- a/client/patterns/status-light/Details.tsx
+++ b/client/patterns/status-light/Details.tsx
@@ -22,37 +22,43 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    /* Center the content */
-    align-items: center;
-    display: flex;
-">
+<div class="container">
     <!-- Status light -->
-    <div style="
-        /* Background color */
-        background-color: rgb(66, 153, 225);
-
-        /* Rounded border */
-        border-radius: 9999px;
-
-        /* Size */
-        height: 8px;
-        width: 8px;
-
-        /* Spacing */
-        margin-right: 8px;
-    "></div>
+    <div class="container__status"></div>
 
     <!-- Content -->
-    <div style="
-        /* Take available width */
-        flex: 1;
-    ">
+    <div class="container__content">
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+}
+
+.container__status {
+    /* Background color */
+    background-color: rgb(66, 153, 225);
+
+    /* Rounded border */
+    border-radius: 9999px;
+
+    /* Size */
+    height: 8px;
+    width: 8px;
+
+    /* Spacing */
+    margin-right: 8px;
+}
+
+.container__content {
+    /* Take available width */
+    flex: 1;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/sticky-table-column/Details.tsx b/client/patterns/sticky-table-column/Details.tsx
index 726a40e..1da113a 100644
--- a/client/patterns/sticky-table-column/Details.tsx
+++ b/client/patterns/sticky-table-column/Details.tsx
@@ -31,17 +31,7 @@ html={`
 <table>
     <thead>
         <tr>
-            <th style="
-                /* Background color */
-                background-color: #ddd;
-
-                /* Stick to the left */
-                left: 0;
-                position: sticky;
-
-                /* Displayed on top of other rows when scrolling */
-                z-index: 9999;
-            ">
+            <th class="header">
                 ...
             </th>
 
@@ -52,7 +42,19 @@ html={`
     </tbody>
 </table>
 `}
-css={``}
+css={`
+.header {
+    /* Background color */
+    background-color: #ddd;
+
+    /* Stick to the left */
+    left: 0;
+    position: sticky;
+
+    /* Displayed on top of other rows when scrolling */
+    z-index: 9999;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/sticky-table-headers/Details.tsx b/client/patterns/sticky-table-headers/Details.tsx
index e58eca3..d1e4e92 100644
--- a/client/patterns/sticky-table-headers/Details.tsx
+++ b/client/patterns/sticky-table-headers/Details.tsx
@@ -29,17 +29,7 @@ html={`
 <table>
     <thead>
         <tr>
-            <th style="
-                /* Background color */
-                background-color: #ddd;
-
-                /* Stick to the top */
-                position: sticky;
-                top: 0;
-
-                /* Displayed on top of other rows when scrolling */
-                z-index: 9999;
-            ">
+            <th class="header">
                 ...
             </th>
 
@@ -50,7 +40,19 @@ html={`
     </tbody>
 </table>
 `}
-css={``}
+css={`
+.header {
+    /* Background color */
+    background-color: #ddd;
+
+    /* Stick to the top */
+    position: sticky;
+    top: 0;
+
+    /* Displayed on top of other rows when scrolling */
+    z-index: 9999;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/teardrop/Details.tsx b/client/patterns/teardrop/Details.tsx
index 975d648..02af921 100644
--- a/client/patterns/teardrop/Details.tsx
+++ b/client/patterns/teardrop/Details.tsx
@@ -24,7 +24,15 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Display the content vertically -->
+    <div class="container__content">
+        ...
+    </div>
+</div>
+`}
+css={`
+.container {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -40,16 +48,12 @@ html={`
     /* Size */
     height: 64px;
     width: 64px;
-">
-    <!-- Display the content vertically -->
-    <div style="
-        transform: rotate(-45deg);
-    ">
-        ...
-    </div>
-</div>
+}
+
+.container__content {
+    transform: rotate(-45deg);
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/timeline/Details.tsx b/client/patterns/timeline/Details.tsx
index 7d2bf36..f720d8e 100644
--- a/client/patterns/timeline/Details.tsx
+++ b/client/patterns/timeline/Details.tsx
@@ -23,64 +23,27 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    /* Used to position the left vertical line */
-    position: relative;
-">
+<div class="container">
     <!-- Left vertical line -->
-    <div style="
-        /* Border */
-        border-right: 2px solid #aaa;
-
-        /* Positioned at the left */
-        left: 16px;
-        position: absolute;
-        top: 0px;
-
-        /* Take full height */
-        height: 100%;
-    " />
+    <div class="container__line"></div>
 
     <!-- The timeline items container -->
-    <ul style="
-        /* Reset styles */
-        list-style-type: none;
-        margin: 0px;
-        padding: 0px;
-    ">
+    <ul class="container__items">
         <!-- Each timeline item -->
-        <li style="margin-bottom: 8px;">
+        <li class="container__item">
             <!-- The circle and title -->
-            <div style="
-                /* Center the content horizontally */
-                align-items: center;
-                display: flex;
-            ">
+            <div class="container__top">
                 <!-- The circle -->
-                <div style="
-                    /* Rounded border */
-                    background-color: rgb(170, 170, 170);
-                    border-radius: 9999px;
-
-                    /* Size */
-                    height: 32px;
-                    width: 32px;
-                " />
+                <div class="container__circle"></div>
 
                 <!-- The title -->
-                <div style="
-                    /* Take available width */
-                    flex: 1;
-                ">
+                <div class="container__title">
                     ...
                 </div>
             </div>
 
             <!-- The description -->
-            <div style="
-                /* Make it align with the title */
-                margin-left: 48px;
-            ">
+            <div class="container__desc">
                 ...
             </div>
         </li>
@@ -90,7 +53,62 @@ html={`
     </ul>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Used to position the left vertical line */
+    position: relative;
+}
+
+.container__line {
+    /* Border */
+    border-right: 2px solid #aaa;
+
+    /* Positioned at the left */
+    left: 16px;
+    position: absolute;
+    top: 0px;
+
+    /* Take full height */
+    height: 100%;
+}
+
+.container__items {
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0px;
+    padding: 0px;
+}
+
+.container__item {
+    margin-bottom: 8px;
+}
+
+.container__top {
+    /* Center the content horizontally */
+    align-items: center;
+    display: flex;
+}
+
+.container__circle {
+    /* Rounded border */
+    background-color: rgb(170, 170, 170);
+    border-radius: 9999px;
+
+    /* Size */
+    height: 32px;
+    width: 32px;
+}
+
+.container__title {
+    /* Take available width */
+    flex: 1;
+}
+
+.container__desc {
+    /* Make it align with the title */
+    margin-left: 48px;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/triangle-buttons/Details.tsx b/client/patterns/triangle-buttons/Details.tsx
index 924d7fb..d121549 100644
--- a/client/patterns/triangle-buttons/Details.tsx
+++ b/client/patterns/triangle-buttons/Details.tsx
@@ -22,82 +22,43 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Up triangle button -->
-<button style="
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
+<button class="container">
     <!-- Triangle -->
-    <div style="
-        border-color: transparent transparent rgba(0, 0, 0, 0.3);
-        border-style: solid;
-        border-width: 0px 8px 8px;
-
-        /* Size */
-        height: 0px;
-        width: 0px;
-    "></div>
+    <div class="container__triangle container__triangle--up"></div>
 
     <!-- Content -->
     ...
 </button>
 
 <!-- Right triangle button -->
-<button style="
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
+<button class="container">
     <!-- Content -->
     ...
 
     <!-- Triangle -->
-    <div style="
-        border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
-        border-style: solid;
-        border-width: 8px 0px 8px 8px;
-
-        /* Size */
-        height: 0px;
-        width: 0px;
-    "></div>
+    <div class="container__triangle container__triangle--right"></div>
 </button>
 
 <!-- Down triangle button -->
-<button style="
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
+<button class="container">
     <!-- Triangle -->
-    <div style="
-        border-color: rgba(0, 0, 0, 0.3) transparent transparent;
-        border-style: solid;
-        border-width: 8px 8px 0px;
-
-        /* Size */
-        height: 0px;
-        width: 0px;
-    "></div>
+    <div class="container__triangle container__triangle--down"></div>
 
     <!-- Content -->
     ...
 </button>
 
 <!-- Left triangle button -->
-<button style="
+<button class="container">
+    <!-- Triangle -->
+    <div class="container__triangle container__triangle--left"></div>
+
+    <!-- Content -->
+    ...
+</button>
+`}
+css={`
+.container {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -105,23 +66,36 @@ html={`
 
     /* Spacing */
     padding: 8px;
-">
-    <!-- Triangle -->
-    <div style="
-        border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
-        border-style: solid;
-        border-width: 8px 8px 8px 0px;
+}
 
-        /* Size */
-        height: 0px;
-        width: 0px;
-    "></div>
+.container__triangle {
+    border-style: solid;
 
-    <!-- Content -->
-    ...
-</button>
+    /* Size */
+    height: 0px;
+    width: 0px;
+}
+
+.container__triangle--up {
+    border-color: transparent transparent rgba(0, 0, 0, 0.3);
+    border-width: 0px 8px 8px;
+}
+
+.container__triangle--right {
+    border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
+    border-width: 8px 0px 8px 8px;
+}
+
+.container__triangle--down {
+    border-color: rgba(0, 0, 0, 0.3) transparent transparent;
+    border-width: 8px 8px 0px;
+}
+
+.container__triangle--left {
+    border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
+    border-width: 8px 8px 8px 0px;
+}
 `}
-css={``}
                 >
                     <div
                         style={{
diff --git a/client/patterns/video-background/Details.tsx b/client/patterns/video-background/Details.tsx
index e20cf60..e2339a7 100644
--- a/client/patterns/video-background/Details.tsx
+++ b/client/patterns/video-background/Details.tsx
@@ -25,63 +25,70 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
-    /* Used to position the video and content */
-    position: relative;
-">
+<div class="container">
     <!-- The video container -->
-    <div style="
-        /* Positioned at the top left corner */
-        left: 0px;
-        position: absolute;
-        top: 0px;
-
-        /* Take full size */
-        height: 100%;
-        width: 100%;
-
-        /* Hide the scrollbar */
-        overflow: hidden;
-    ">
-        <video
-            style="
-                object-fit: cover;
-
-                /* Center the video */
-                left: 50%;
-                position: absolute;
-                top: 50%;
-                transform: translate(-50%, -50%);
-
-                /* Take full width */
-                width: 100%;
-            "
-            src="..."
-        >
+    <div class="container__wrapper">
+        <video class="container__video" src="...">
+            ...
+        </video>
     </div>
 
     <!-- The content -->
-    <div style="
-        /* Positioned at the top left corner */
-        left: 0px;
-        position: absolute;
-        top: 0px;
-
-        /* Take full size */
-        height: 100%;
-        width: 100%;
-
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    ">
+    <div class="container__content">
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Used to position the video and content */
+    position: relative;
+}
+
+.container__wrapper {
+    /* Positioned at the top left corner */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* Hide the scrollbar */
+    overflow: hidden;
+}
+
+.container__video {
+    object-fit: cover;
+
+    /* Center the video */
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    /* Take full width */
+    width: 100%;
+}
+
+.container__content {
+    /* Positioned at the top left corner */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+`}
                 >
                     <div
                         style={{
diff --git a/client/patterns/watermark/Details.tsx b/client/patterns/watermark/Details.tsx
index 9a8a3c1..c856a56 100644
--- a/client/patterns/watermark/Details.tsx
+++ b/client/patterns/watermark/Details.tsx
@@ -21,42 +21,11 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
-    /* Used to position the watermark */
-    position: relative;
-">
+<div class="container">
     <!-- Watermark container -->
-    <div style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-
-        /* Absolute position */
-        left: 0px;
-        position: absolute;
-        top: 0px;
-
-        /* Take full size */
-        height: 100%;
-        width: 100%;
-    ">
+    <div class="container__wrapper">
         <!-- The watermark -->
-        <div style="
-            /* Text color */
-            color: rgba(0, 0, 0, 0.2);
-
-            /* Text styles */
-            font-size: 3rem;
-            font-weight: bold;
-            text-transform: uppercase;
-
-            /* Rotate the text */
-            transform: rotate(-45deg);
-
-            /* Disable the selection */
-            user-select: none;
-        ">
+        <div class="container__watermark">
             Draft
         </div>
     </div>
@@ -65,7 +34,44 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Used to position the watermark */
+    position: relative;
+}
+
+.container__wrapper {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Absolute position */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+}
+
+.container__watermark {
+    /* Text color */
+    color: rgba(0, 0, 0, 0.2);
+
+    /* Text styles */
+    font-size: 3rem;
+    font-weight: bold;
+    text-transform: uppercase;
+
+    /* Rotate the text */
+    transform: rotate(-45deg);
+
+    /* Disable the selection */
+    user-select: none;
+}
+`}
                 >
                     <div
                         style={{