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="
+.container__arrow {
     /* 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);
-
     /* Size */
     height: 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,15 +41,30 @@ 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">
+        <div class="container__avatar">
+            <!-- Image -->
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat other avatars -->
+    ...
+</div>
+`}
+css={`
+.container {
+    display: flex;
+}
+
+.container__item {
     /* Nagative margin make avatar overlap to previous one */
     margin-left: -4px;
-    ">
+}
-        <div style="
+
+.container__avatar {
     /* Add a white curve between avatars */
     box-shadow: 0 0 0 4px #FFF;
 
@@ -60,17 +75,8 @@ html={`
 
     /* Rounded border */
     border-radius: 9999px;
-        ">
+}
-            <!-- Image -->
-            ...
-        </div>
-    </div>
-
-    <!-- Repeat other avatars -->
-    ...
-</div>
 `}
-css={``}
                 >
                     <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
+.container__avatar {
-        src="..."
-        style="
     /* Rounded border */
     border-radius: 50%;
 
     /* Take full size */
     height: 100%;
     width: 100%;
-        "
+}
-    />
-</div>
 `}
-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="
+
+.container__line {
     /* Background color */
     background-color: rgba(0, 0, 0, 0.3);
 
     /* Position */
-        left: 0px;
     position: absolute;
+
+    /* Size */
+    height: 1px;
+    width: 100%;
+}
+
+.container__line--first {
+    /* Position */
+    left: 0px;
     top: 50%;
     transform: translate(0%, -50%) rotate(45deg);
 
     /* Size */
     height: 1px;
     width: 100%;
-    " />
+}
-
-    <div style="
-        /* Background color */
-        background-color: rgba(0, 0, 0, 0.3);
 
+.container__line--second {
     /* Position */
     left: 50%;
-        position: absolute;
     top: 0px;
     transform: translate(-50%, 0%) rotate(45deg);
 
     /* Size */
     height: 100%;
     width: 1px;
-    " />
+}
-</button>
 `}
-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="
+.container__content {
     /* Take available width */
     flex: 1;
-    ">
+}
-        ...
-    </div>
-
-    <!-- Close button -->
-    ...
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/corner-ribbon/Details.tsx

@@ -23,11 +23,22 @@ 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">
+        <!-- The ribbon -->
+        <div class="container__ribbon">
+            ...
+        </div>
+    </div>
+</div>
+`}
+css={`
+.container {
+    position: relative;
+}
+
+.container__wrapper {
     /* Displayed at the top left corner */
     left: 0px;
     position: absolute;
@@ -39,9 +50,9 @@ html={`
 
     /* Hide the part of its children which is displayed outside */
     overflow: hidden;
-    ">
+}
-        <!-- The ribbon -->
+
-        <div style="
+.container__ribbon {
     /* Position */
     left: -64px;
     position: absolute;
@@ -59,13 +70,8 @@ html={`
 
     /* Centerize the text content */
     text-align: center;
-        ">
+}
-            ...
-        </div>
-    </div>
-</div>
 `}
-css={``}
                 >
                     <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,12 +22,21 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- The diagonal area -->
+    <div class="container__diagonal"></div>
+
+    <!-- Content -->
+    ...
+</div>
+`}
+css={`
+.container {
     /* Used to position the diagonal area */
     position: relative;
-">
+}
-    <!-- The diagonal area -->
+
-    <div style="
+.container__diagonal {
     /* Absolute position */
     left: 0px;
     position: absolute;
@@ -45,13 +54,8 @@ html={`
 
     /* Displayed under the main content */
     z-index: -1;
-    " />
+}
-
-    <!-- Content -->
-    ...
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/docked-at-corner/Details.tsx

@@ -23,11 +23,21 @@ 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">
+        ...
+    </div>
+
+    ...
+</div>
+`}
+css={`
+.container {
+    position: relative;
+}
+
+.container__docker {
     position: absolute;
     right: 0;
     top: 0;
@@ -37,14 +47,8 @@ html={`
     align-items: center;
     display: flex;
     justify-content: center;
-    ">
+}
-        ...
-    </div>
-
-    ...
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/dot-leader/Details.tsx

@@ -24,17 +24,26 @@ 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>
+
+    <!-- Right side -->
+    <div>...</div>
+</div>
+`}
+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);
 
@@ -43,13 +52,8 @@ html={`
 
     /* Spacing */
     margin: 0px 4px;
-    " />
+}
-
-    <!-- Right side -->
-    <div>...</div>
-</div>
 `}
-css={``}
                 >
                     <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,23 +24,31 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container"
+    <!-- Main content -->
+    <div class="container__content">
+        ...
+    </div>
+
+    <!-- The faded element -->
+    <div class="container__fading"></div>
+</div>
+`}
+css={`
+.container {
     /* Used to position the faded element */
     position: relative;
-">
+}
-    <!-- Main content -->
+
-    <div style="
+.container__content {
     /* Height */
     height: 200px;
 
     /* Scrollable */
     overflow-y: scroll;
-    ">
+}
-        ...
-    </div>
 
-    <!-- The faded element -->
+.container__fading {
-    <div style="
     /* Displayed at the bottom */
     bottom: 0;
     left: 0;
@@ -52,10 +60,8 @@ html={`
 
     /* Gradient background */
     background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
-    " />
+}
-</div>
 `}
-css={``}
                 >
                     <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="
+
+.container__letters {
     /* Center the content */
     left: 50%;
     position: absolute;
     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,15 +22,24 @@ 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">
+        <!-- The player button -->
+        ...
+    </div>
+</div>
+`}
+css={`
+.container {
+    /* Used to position the overlay */
+    position: relative;
+}
+
+.container__overlay {
     /* Position */
     left: 0;
     position: absolute;
@@ -46,14 +55,9 @@ html={`
     justify-content: center;
 
     /* Add a dark background */
-        background-color: 'rgba(0, 0, 0, 0.25)',
+    background-color: rgba(0, 0, 0, 0.25);
-    ">
+}
-        <!-- The player button -->
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <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,16 +54,11 @@ html={`
 
     /* Use to position the corners */
     position: relative;
-">
+}
-    <!-- The content -->
-    ...
 
-    <!-- The left side -->
+.container__side {
-    <div style="
-        /* Position */
     bottom: -8px;
     position: absolute;
-        left: -24px;
 
     /* Displayed under the container */
     z-index: -1;
@@ -53,53 +66,37 @@ html={`
     /* Background */
     border: 16px solid #CCC;
     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%;
+
-
+.container__side--right {
-        /* Background */
-        border: 8px solid transparent;
-        border-bottom-width: 0;
-        border-right-width: 0;
-        border-top-color: #AAA;
-    " />
-
-    <!-- The right triangle displayed below the content -->
-    <div style="
-        position: absolute;
-        right: 0;
-        top: 100%;
-
-        /* Background */
-        border: 8px solid transparent;
-        border-bottom-width: 0;
-        border-left-width: 0;
-        border-top-color: #AAA;
-    " />
-
-    <!-- The right side -->
-    <div style="
     /* Position */
-        bottom: -8px;
-        position: absolute;
     right: -24px;
+}
 
-        /* Displayed under the container */
+.container__triangle {
-        z-index: -1;
+    position: absolute;
+    top: 100%;
 
-        /* Background */
+    border: 8px solid transparent;
-        border: 16px solid #CCC;
+    border-bottom-width: 0;
-        border-right-color: transparent;
+    border-top-color: #AAA;
-    "
+}
-    />
+
-</div>
+.container__triangle--left {
+    border-right-width: 0;
+    left: 0;
+}
+
+.container__triangle--right {
+    border-left-width: 0;
+    right: 0;
+}
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/separator/Details.tsx

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

client/patterns/stacked-cards/Details.tsx

@@ -21,12 +21,21 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Repeat if you want to have more cards -->
+    <div class="container__card"></div>
+
+    <!-- Main card's content -->
+    ...
+</div>
+`}
+css={`
+.container {
     /* Used to position the stacked cards */
     position: relative;
-">
+}
-    <!-- Repeat if you want to have more cards -->
+
-    <div style="
+.container__card {
     /* Absolute position */
     left: 0px;
     position: absolute;
@@ -45,13 +54,8 @@ html={`
 
     /* Rotate it. Change the number of degrees for the following cards */
     transform: rotate(5deg);
-    " />
+}
-
-    <!-- Main card's content -->
-    ...
-</div>
 `}
-css={``}
                 >
                     <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-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">
+        ...
+    </div>
+</div>
+`}
+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>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/status-light/Details.tsx

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

client/patterns/timeline/Details.tsx

@@ -23,12 +23,43 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Left vertical line -->
+    <div class="container__line"></div>
+
+    <!-- The timeline items container -->
+    <ul class="container__items">
+        <!-- Each timeline item -->
+        <li class="container__item">
+            <!-- The circle and title -->
+            <div class="container__top">
+                <!-- The circle -->
+                <div class="container__circle"></div>
+
+                <!-- The title -->
+                <div class="container__title">
+                    ...
+                </div>
+            </div>
+
+            <!-- The description -->
+            <div class="container__desc">
+                ...
+            </div>
+        </li>
+
+        <!-- Repeat other items -->
+        ...
+    </ul>
+</div>
+`}
+css={`
+.container {
     /* Used to position the left vertical line */
     position: relative;
-">
+}
-    <!-- Left vertical line -->
+
-    <div style="
+.container__line {
     /* Border */
     border-right: 2px solid #aaa;
 
@@ -39,25 +70,26 @@ html={`
 
     /* Take full height */
     height: 100%;
-    " />
+}
 
-    <!-- The timeline items container -->
+.container__items {
-    <ul style="
     /* Reset styles */
     list-style-type: none;
     margin: 0px;
     padding: 0px;
-    ">
+}
-        <!-- Each timeline item -->
+
-        <li style="margin-bottom: 8px;">
+.container__item {
-            <!-- The circle and title -->
+    margin-bottom: 8px;
-            <div style="
+}
+
+.container__top {
     /* Center the content horizontally */
     align-items: center;
     display: flex;
-            ">
+}
-                <!-- The circle -->
+
-                <div style="
+.container__circle {
     /* Rounded border */
     background-color: rgb(170, 170, 170);
     border-radius: 9999px;
@@ -65,32 +97,18 @@ html={`
     /* Size */
     height: 32px;
     width: 32px;
-                " />
+}
 
-                <!-- The title -->
+.container__title {
-                <div style="
     /* Take available width */
     flex: 1;
-                ">
+}
-                    ...
-                </div>
-            </div>
 
-            <!-- The description -->
+.container__desc {
-            <div style="
     /* Make it align with the title */
     margin-left: 48px;
-            ">
+}
-                ...
-            </div>
-        </li>
-
-        <!-- Repeat other items -->
-        ...
-    </ul>
-</div>
 `}
-css={``}
                 >
                     <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="
+.container__triangle {
-        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>
+}
 
-    <!-- Content -->
+.container__triangle--up {
-    ...
+    border-color: transparent transparent rgba(0, 0, 0, 0.3);
-</button>
+    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,12 +25,27 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- The video container -->
+    <div class="container__wrapper">
+        <video class="container__video" src="...">
+            ...
+        </video>
+    </div>
+
+    <!-- The content -->
+    <div class="container__content">
+        ...
+    </div>
+</div>
+`}
+css={`
+.container {
     /* Used to position the video and content */
     position: relative;
-">
+}
-    <!-- The video container -->
+
-    <div style="
+.container__wrapper {
     /* Positioned at the top left corner */
     left: 0px;
     position: absolute;
@@ -42,9 +57,9 @@ html={`
 
     /* Hide the scrollbar */
     overflow: hidden;
-    ">
+}
-        <video
+
-            style="
+.container__video {
     object-fit: cover;
 
     /* Center the video */
@@ -55,13 +70,9 @@ html={`
 
     /* Take full width */
     width: 100%;
-            "
+}
-            src="..."
-        >
-    </div>
 
-    <!-- The content -->
+.container__content {
-    <div style="
     /* Positioned at the top left corner */
     left: 0px;
     position: absolute;
@@ -76,12 +87,8 @@ html={`
     display: flex;
     flex-direction: column;
     justify-content: center;
-    ">
+}
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/watermark/Details.tsx

@@ -21,12 +21,26 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Watermark container -->
+    <div class="container__wrapper">
+        <!-- The watermark -->
+        <div class="container__watermark">
+            Draft
+        </div>
+    </div>
+
+    <!-- Other content -->
+    ...
+</div>
+`}
+css={`
+.container {
     /* Used to position the watermark */
     position: relative;
-">
+}
-    <!-- Watermark container -->
+
-    <div style="
+.container__wrapper {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -40,9 +54,9 @@ html={`
     /* Take full size */
     height: 100%;
     width: 100%;
-    ">
+}
-        <!-- The watermark -->
+
-        <div style="
+.container__watermark {
     /* Text color */
     color: rgba(0, 0, 0, 0.2);
 
@@ -56,16 +70,8 @@ html={`
 
     /* Disable the selection */
     user-select: none;
-        ">
+}
-            Draft
-        </div>
-    </div>
-
-    <!-- Other content -->
-    ...
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{