Add CSS panel for display patterns

client/patterns/arrow-buttons/Details.tsx

@@ -22,94 +22,43 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Up arrow button -->
-<button style="
+<button class="container">
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
     <!-- Arrow -->
-    <div style="
+    <div class="container__arrow container__arrow--up"></div>
-        /* 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>
 
     <!-- Content -->
     ...
 </button>
 
 <!-- Right arrow button -->
-<button style="
+<button class="container">
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
     <!-- Content -->
     ...
 
     <!-- Arrow -->
-    <div style="
+    <div class="container__arrow container__arrow--right"></div>
-        /* 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>
 </button>
 
 <!-- Down arrow button -->
-<button style="
+<button class="container">
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
     <!-- Arrow -->
-    <div style="
+    <div class="container__arrow container__arrow--down"></div>
-        /* 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>
 
     <!-- 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 */
+.container__arrow {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    /* Transparent background */
-        border-left: 1px solid rgba(0, 0, 0, 0.3);
+    background-color: transparent;
-        transform: translateX(25%) rotate(45deg);
 
-        /* Size */
+    /* Size */
-        height: 12px;
+    height: 12px;
-        width: 12px;
+    width: 12px;
-    "></div>
+}
 
-    <!-- Content -->
+.container__arrow--up {
-    ...
+    /* Edges */
-</button>
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
-`}
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
-css={`
+    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

client/patterns/avatar-list/Details.tsx

@@ -41,26 +41,10 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    display: flex;
-">
     <!-- Avatar item -->
-    <div style="
+    <div class="container__item">
-        /* Nagative margin make avatar overlap to previous one */
+        <div class="container__avatar">
-        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;
-        ">
             <!-- 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={{

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 */
+.container__avatar {
-            height: 100%;
+    /* Rounded border */
-            width: 100%;
+    border-radius: 50%;
-        "
+
-    />
+    /* Take full size */
-</div>
+    height: 100%;
+    width: 100%;
+}
 `}
-css={``}
                 >
                     <div
                         style={{

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={{

client/patterns/card/Details.tsx

@@ -23,29 +23,35 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    display: flex;
-    flex-direction: column;
-">
     <!-- Cover -->
-    <div style="
+    <div class="container__cover">
-        height: 150px;
-        width: 100%;
-    ">
         ...
     </div>
 
     <!-- Content -->
-    <div style="
+    <div class="container__content">
-        /* Take available height */
-        flex: 1;
-    ">
         ...
     </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={{

client/patterns/centering/Details.tsx

@@ -22,15 +22,17 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    align-items: center;
-    display: flex;
-    justify-content: center;
-">
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+`}
                 >
                     <div
                         style={{

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 */
+.container__line {
-        left: 0px;
+    /* Background color */
-        position: absolute;
+    background-color: rgba(0, 0, 0, 0.3);
-        top: 50%;
-        transform: translate(0%, -50%) rotate(45deg);
 
-        /* Size */
+    /* Position */
-        height: 1px;
+    position: absolute;
-        width: 100%;
-    " />
 
-    <div style="
+    /* Size */
-        /* Background color */
+    height: 1px;
-        background-color: rgba(0, 0, 0, 0.3);
+    width: 100%;
+}
 
-        /* Position */
+.container__line--first {
-        left: 50%;
+    /* Position */
-        position: absolute;
+    left: 0px;
-        top: 0px;
+    top: 50%;
-        transform: translate(-50%, 0%) rotate(45deg);
+    transform: translate(0%, -50%) rotate(45deg);
 
-        /* Size */
+    /* Size */
-        height: 100%;
+    height: 1px;
-        width: 1px;
+    width: 100%;
-    " />
+}
-</button>
+
+.container__line--second {
+    /* Position */
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0%) rotate(45deg);
+
+    /* Size */
+    height: 100%;
+    width: 1px;
+}
 `}
-css={``}
                 >
                     <div
                         style={{

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 -->
+.container__content {
-    ...
+    /* Take available width */
-</div>
+    flex: 1;
+}
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/corner-ribbon/Details.tsx

@@ -23,49 +23,55 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    position: relative;
-">
     <!-- The container -->
-    <div style="
+    <div class="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;
-    ">
         <!-- The ribbon -->
-        <div style="
+        <div class="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>
     </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={{

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={{

client/patterns/diagonal-section/Details.tsx

@@ -22,36 +22,40 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Used to position the diagonal area */
-    position: relative;
-">
     <!-- The diagonal area -->
-    <div style="
+    <div class="container__diagonal"></div>
-        /* 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;
-    " />
 
     <!-- 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={{

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="
+<div class="container">
-    position: relative;
-">
     <!-- Docked at the top right corner -->
-    <div style="
+    <div class="container__docker">
-        position: absolute;
-        right: 0;
-        top: 0;
-        transform: translate(50%, -50%);
-
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-    ">
         ...
     </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={{

client/patterns/dot-leader/Details.tsx

@@ -24,32 +24,36 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-">
     <!-- Left side -->
     <div>...</div>
 
     <!-- Dots -->
-    <div style="
+    <div class="container__dots"></div>
-        /* Bottom border */
-        border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
-
-        /* Take remaining width */
-        flex: 1;
-
-        /* Spacing */
-        margin: 0px 4px;
-    " />
 
     <!-- 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={{

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={{

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={{

client/patterns/fading-long-section/Details.tsx

@@ -24,38 +24,44 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container"
-    /* Used to position the faded element */
-    position: relative;
-">
     <!-- Main content -->
-    <div style="
+    <div class="container__content">
-        /* Height */
-        height: 200px;
-
-        /* Scrollable */
-        overflow-y: scroll;
-    ">
         ...
     </div>
 
     <!-- The faded element -->
-    <div style="
+    <div class="container__fading"></div>
-        /* 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>
 `}
-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={{

client/patterns/feature-comparison/Details.tsx

@@ -24,36 +24,14 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    align-items: center;
-    display: flex;
-
-    /* Bottom border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Spacing */
-    padding: 12px 0px;
-">
     <!-- Feature name -->
-    <div style="
+    <div class="container__feature">
-        /* Take available width */
-        flex: 1;
-
-        /* Spacing */
-        margin-right: 16px;
-    ">
         ...
     </div>
 
     <!-- The model -->
-    <div style="
+    <div class="container__model">
-        /* Center the content */
-        display: flex;
-        justify-content: center;
-
-        /* Spacing */
-        margin-right: 16px;
-    ">
         <!--
         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={{

client/patterns/feature-list/Details.tsx

@@ -25,27 +25,14 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Feature item -->
-<div style="
+<div class="container">
-    display: flex;
-
-    /* OPTIONAL: Reverse the order of image and content */
-    flex-direction: row-reverse;
-
-    /* OPTIONAL: Spacing between items */
-    margin: 16px 0;
-">
     <!-- Image -->
-    <div style="
+    <div class="container__image">
-        width: 128px;
-    ">
         ...
     </div>
 
     <!-- Right side -->
-    <div style="
+    <div class="container__feature">
-        /* Take the remaining width */
-        flex: 1;
-    ">
         ...
     </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={{

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="
+<div class="container">
-    position: relative;
-">
     <!-- Top-left corner -->
-    <div style="
+    <div class="container__corner container__corner--tl">
-        left: 0;
-        position: absolute;
-        top: 0;
-    ">
         ...
     </div>
 
     <!-- Top-right corner -->
-    <div style="
+    <div class="container__corner container__corner--tr">
-        position: absolute;
-        top: 0;
-        right: 0;
-    ">
         ...
     </div>
 
     <!-- Bottom-right corner -->
-    <div style="
+    <div class="container__corner container__corner--br">
-        bottom: 0;
-        position: absolute;
-        right: 0;
-    ">
         ...
     </div>
 
     <!-- Bottom-left corner -->
-    <div style="
+    <div class="container__corner container__corner--bl">    
-        bottom: 0;
-        left: 0;
-        position: absolute;
-    ">
         ...
     </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 }}>

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={{

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={{

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 */
+.container__letters {
-        left: 50%;
+    /* Center the content */
-        position: absolute;
+    left: 50%;
-        top: 50%;
+    position: absolute;
-        transform: translate(-50%, -50%);
+    top: 50%;
-    ">
+    transform: translate(-50%, -50%);
-        <!-- The letters -->
+}
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

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={{

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={{

client/patterns/media-object/Details.tsx

@@ -23,31 +23,37 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Align sub-items to top */
-    align-items: start;
-    display: flex;
-">
     <!-- Media object -->
-    <div style="
+    <div class="container__media">
-        margin-right: 16px;
-
-        /* Set the width for the media object */
-        width: 200px;
-    ">
         ...
     </div>
 
     <!-- Main content -->
-    <div style="
+    <div class="container__content">
-        /* Take the remaining width */
-        flex: 1;
-    ">
         ...
     </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={{

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="
+<div class="container">
-    /* Used to position the overlay */
-    position: relative;
-">
     <!-- The video element -->
     <video src="..." />
 
     <!-- The overlay area -->
-    <div style="
+    <div class="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)',
-    ">
         <!-- 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={{

client/patterns/pricing-table/Details.tsx

@@ -29,30 +29,9 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-">
     <!-- Pricing column -->
-    <div style="
+    <div class="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;
-    ">
         <!-- 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={{

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={{

client/patterns/questions-and-answers/Details.tsx

@@ -62,15 +62,9 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Each question and answer item -->
-<div style="
+<div class="container">
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-">
     <!-- Heading -->
-    <div style="
+    <div class="container__heading">
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    ">
         <!-- 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={{

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 -->
+.container__side {
-    <div style="
+    bottom: -8px;
-        /* Position */
+    position: absolute;
-        bottom: -8px;
-        position: absolute;
-        left: -24px;
 
-        /* Displayed under the container */
+    /* Displayed under the container */
-        z-index: -1;
+    z-index: -1;
 
-        /* Background */
+    /* Background */
-        border: 16px solid #CCC;
+    border: 16px solid #CCC;
-        border-left-color: transparent;
+    border-left-color: transparent;
-    "
+}
-    />
 
-    <!-- The left triangle displayed below the content -->
+.container__side--left {
-    <div style="
+    /* Position */
-        left: 0;
+    left: -24px;
-        position: absolute;
+}
-        top: 100%;
 
-        /* Background */
+.container__side--right {
-        border: 8px solid transparent;
+    /* Position */
-        border-bottom-width: 0;
+    right: -24px;
-        border-right-width: 0;
+}
-        border-top-color: #AAA;
-    " />
 
-    <!-- The right triangle displayed below the content -->
+.container__triangle {
-    <div style="
+    position: absolute;
-        position: absolute;
+    top: 100%;
-        right: 0;
-        top: 100%;
 
-        /* Background */
+    border: 8px solid transparent;
-        border: 8px solid transparent;
+    border-bottom-width: 0;
-        border-bottom-width: 0;
+    border-top-color: #AAA;
-        border-left-width: 0;
+}
-        border-top-color: #AAA;
-    " />
 
-    <!-- The right side -->
+.container__triangle--left {
-    <div style="
+    border-right-width: 0;
-        /* Position */
+    left: 0;
-        bottom: -8px;
+}
-        position: absolute;
-        right: -24px;
 
-        /* Displayed under the container */
+.container__triangle--right {
-        z-index: -1;
+    border-left-width: 0;
-
+    right: 0;
-        /* Background */
+}
-        border: 16px solid #CCC;
-        border-right-color: transparent;
-    "
-    />
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

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 */
+.container__content {
-        left: 50%;
+    /* We won't see the separator line */
-        position: absolute;
+    background: #FFF;
-        top: 50%;
-        transform: translate(-50%, -50%);
-    ">
-        ...
-    </div>
 
-    <!-- Separator line -->
+    /* Displayed at the center of container */
-    <div style="
+    left: 50%;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    position: absolute;
-        height: 1px;
+    top: 50%;
-        width: 100%;
+    transform: translate(-50%, -50%);
-    " />
+}
-</div>
+
+.container__separator {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    height: 1px;
+    width: 100%;
+}
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/stacked-cards/Details.tsx

@@ -21,37 +21,41 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Used to position the stacked cards */
-    position: relative;
-">
     <!-- Repeat if you want to have more cards -->
-    <div style="
+    <div class="container__card"></div>
-        /* 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);
-    " />
 
     <!-- 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={{

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="
+.container__inner {
-        /* Background */
+    /* Background */
-        background-color: #ccc;
+    background-color: #ccc;
-    ">
+}
-        <!-- Content -->
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/statistic/Details.tsx

@@ -21,35 +21,41 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-    flex-direction: column;
-">
     <!-- Value -->
-    <div style="
+    <div class="container__value">
-        /* Big font size */
-        font-size: 4rem;
-        font-weight: 500;
-    ">
         ...
     </div>
 
     <!-- Label -->
-    <div style="
+    <div class="container__label">
-        /* Smaller font size */
-        font-size: 1rem;
-        font-weight: 700;
-
-        /* Uppercase the label */
-        text-transform: uppercase;
-    ">
         ...
     </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={{

client/patterns/status-light/Details.tsx

@@ -22,37 +22,43 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Center the content */
-    align-items: center;
-    display: flex;
-">
     <!-- Status light -->
-    <div style="
+    <div class="container__status"></div>
-        /* Background color */
-        background-color: rgb(66, 153, 225);
-
-        /* Rounded border */
-        border-radius: 9999px;
-
-        /* Size */
-        height: 8px;
-        width: 8px;
-
-        /* Spacing */
-        margin-right: 8px;
-    "></div>
 
     <!-- Content -->
-    <div style="
+    <div class="container__content">
-        /* Take available width */
-        flex: 1;
-    ">
         ...
     </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={{

client/patterns/sticky-table-column/Details.tsx

@@ -31,17 +31,7 @@ html={`
 <table>
     <thead>
         <tr>
-            <th style="
+            <th class="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;
-            ">
                 ...
             </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={{

client/patterns/sticky-table-headers/Details.tsx

@@ -29,17 +29,7 @@ html={`
 <table>
     <thead>
         <tr>
-            <th style="
+            <th class="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;
-            ">
                 ...
             </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={{

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="
+.container__content {
-        transform: rotate(-45deg);
+    transform: rotate(-45deg);
-    ">
+}
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/timeline/Details.tsx

@@ -23,64 +23,27 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Used to position the left vertical line */
-    position: relative;
-">
     <!-- Left vertical line -->
-    <div style="
+    <div class="container__line"></div>
-        /* Border */
-        border-right: 2px solid #aaa;
-
-        /* Positioned at the left */
-        left: 16px;
-        position: absolute;
-        top: 0px;
-
-        /* Take full height */
-        height: 100%;
-    " />
 
     <!-- The timeline items container -->
-    <ul style="
+    <ul class="container__items">
-        /* Reset styles */
-        list-style-type: none;
-        margin: 0px;
-        padding: 0px;
-    ">
         <!-- Each timeline item -->
-        <li style="margin-bottom: 8px;">
+        <li class="container__item">
             <!-- The circle and title -->
-            <div style="
+            <div class="container__top">
-                /* Center the content horizontally */
-                align-items: center;
-                display: flex;
-            ">
                 <!-- The circle -->
-                <div style="
+                <div class="container__circle"></div>
-                    /* Rounded border */
-                    background-color: rgb(170, 170, 170);
-                    border-radius: 9999px;
-
-                    /* Size */
-                    height: 32px;
-                    width: 32px;
-                " />
 
                 <!-- The title -->
-                <div style="
+                <div class="container__title">
-                    /* Take available width */
-                    flex: 1;
-                ">
                     ...
                 </div>
             </div>
 
             <!-- The description -->
-            <div style="
+            <div class="container__desc">
-                /* Make it align with the title */
-                margin-left: 48px;
-            ">
                 ...
             </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={{

client/patterns/triangle-buttons/Details.tsx

@@ -22,82 +22,43 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <!-- Up triangle button -->
-<button style="
+<button class="container">
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
     <!-- Triangle -->
-    <div style="
+    <div class="container__triangle container__triangle--up"></div>
-        border-color: transparent transparent rgba(0, 0, 0, 0.3);
-        border-style: solid;
-        border-width: 0px 8px 8px;
-
-        /* Size */
-        height: 0px;
-        width: 0px;
-    "></div>
 
     <!-- Content -->
     ...
 </button>
 
 <!-- Right triangle button -->
-<button style="
+<button class="container">
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
     <!-- Content -->
     ...
 
     <!-- Triangle -->
-    <div style="
+    <div class="container__triangle container__triangle--right"></div>
-        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>
 </button>
 
 <!-- Down triangle button -->
-<button style="
+<button class="container">
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-">
     <!-- Triangle -->
-    <div style="
+    <div class="container__triangle container__triangle--down"></div>
-        border-color: rgba(0, 0, 0, 0.3) transparent transparent;
-        border-style: solid;
-        border-width: 8px 8px 0px;
-
-        /* Size */
-        height: 0px;
-        width: 0px;
-    "></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 */
+.container__triangle {
-        height: 0px;
+    border-style: solid;
-        width: 0px;
-    "></div>
 
-    <!-- Content -->
+    /* Size */
-    ...
+    height: 0px;
-</button>
+    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={{

client/patterns/video-background/Details.tsx

@@ -25,63 +25,70 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Used to position the video and content */
-    position: relative;
-">
     <!-- The video container -->
-    <div style="
+    <div class="container__wrapper">
-        /* Positioned at the top left corner */
+        <video class="container__video" src="...">
-        left: 0px;
+            ...
-        position: absolute;
+        </video>
-        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>
 
     <!-- The content -->
-    <div style="
+    <div class="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>
 </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={{

client/patterns/watermark/Details.tsx

@@ -21,42 +21,11 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Used to position the watermark */
-    position: relative;
-">
     <!-- Watermark container -->
-    <div style="
+    <div class="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%;
-    ">
         <!-- The watermark -->
-        <div style="
+        <div class="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;
-        ">
             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={{