Add CSS code for navigation patterns

client/patterns/breadcrumb/Details.tsx

@@ -21,22 +21,27 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Content is centered vertically */
-    align-items: center;
-    display: flex;
-">
     <!-- Breadcrumb item -->
     <a>...</a>
 
     <!-- Separator -->
-    <div style="margin: 0 8px;">/</div>
+    <div class="separator">/</div>
 
     <!-- Repeated items and separators -->
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Content is centered vertically */
+    align-items: center;
+    display: flex;
+}
+.separator {
+    margin: 0 8px;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/circular-navigation/Details.tsx

@@ -57,48 +57,14 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    position: relative;
-">
     <!-- The trigger element that will show all circles when user clicks it -->
     ...
 
     <!-- A circle menu item -->
-    <div style="
+    <div class="item">
-        /* Position */
-        position: absolute;
-        top: 0;
-        /*
-        80px is the distance from the item to the trigger element.
-        Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
-        in case you want to have a total of 6 menu items.
-        The formulation is 360 / numberOfItems * indexOfItem
-        */
-        transform: rotate(0deg) translateX(-80px);
-
-        /* Must have the same size as the trigger element */
-        height: 32px;
-        width: 32px;
-    ">
         <!-- The inner -->
-        <div style="
+        <div class="inner">
-            /*
-            Rotate it to make it displayed vertically
-            Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
-            in case you want to have a total of 6 menu items.
-            The formulation is -(360 / numberOfItems * indexOfItem)
-            */
-            transform: rotate(-0deg);
-
-            /* Center the content */
-            align-items: center;
-            display: flex;
-            justify-content: center;
-
-            /* Take full size */
-            height: 100%;
-            width: 100%;
-        ">
             <!-- The content -->
             ...
         </div>
@@ -108,7 +74,46 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    position: relative;
+}
+.item {
+    /* Position */
+    position: absolute;
+    top: 0;
+    
+    /*
+    80px is the distance from the item to the trigger element.
+    Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
+    in case you want to have a total of 6 menu items.
+    The formulation is 360 / numberOfItems * indexOfItem
+    */
+    transform: rotate(0deg) translateX(-80px);
+
+    /* Must have the same size as the trigger element */
+    height: 32px;
+    width: 32px;
+}
+.inner {
+    /*
+    Rotate it to make it displayed vertically
+    Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
+    in case you want to have a total of 6 menu items.
+    The formulation is -(360 / numberOfItems * indexOfItem)
+    */
+    transform: rotate(-0deg);
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/dot-navigation/Details.tsx

@@ -45,7 +45,15 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<ul style="
+<ul class="container">
+    <li class="item" />
+
+    <!-- Repeat other dots -->
+    ...
+</div>
+`}
+css={`
+.container {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -55,26 +63,24 @@ html={`
     list-style-type: none;
     margin: 0;
     padding: 0;
-">
+}
-    <li style="
+.item {
-        /* Rounded border */
+    /* Rounded border */
-        border-radius: 9999px;
+    border-radius: 9999px;
-        height: 12px;
+    height: 12px;
-        width: 12px;
+    width: 12px;
 
-        /* Active dot */
+    /* Active dot */
-        background-color: rgba(0, 0, 0, .3);
+    background-color: rgba(0, 0, 0, .3);
 
-        /* Inactive dot */
+    /* Inactive dot */
-        background-color: transparent;
+    background-color: transparent;
-        border: 1px solid rgba(0, 0, 0, .3);
+    border: 1px solid rgba(0, 0, 0, .3);
 
-        /* OPTIONAL: Spacing between dots */
+    /* OPTIONAL: Spacing between dots */
-        margin: 0 4px;
+    margin: 0 4px;
-    " />
+}
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/drawer/Details.tsx

@@ -24,7 +24,18 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Backdrop -->
+    <div class="overlay"></div>
+
+    <!-- Sidebar -->
+    <div class="sidebar">
+        ...
+    </div>
+</div>
+`}
+css={`
+.container {
     /* Container takes full size */
     height: 100%;
     left: 0;
@@ -33,39 +44,32 @@ html={`
     width: 100%;
 
     z-index: 9999;
-">
+}
-    <!-- Backdrop -->
+.overlay {
-    <div style="
+    /* Take full size */
-        /* Take full size */
+    height: 100%;
-        height: 100%;
+    left: 0;
-        left: 0;
+    position: fixed;
-        position: fixed;
+    top: 0;
-        top: 0;
+    width: 100%;
-        width: 100%;
 
-        /* User still can see the content of main page */
+    /* User still can see the content of main page */
-        background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.5);
 
-        z-index: -1;
+    z-index: -1;
-    " />
+}
+.sidebar {
+    /* Take full height */
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 200px;
 
-    <!-- Sidebar -->
+    /* Background */
-    <div style="
+    background-color: #fff;
-        /* Take full height */
+}
-        height: 100%;
-        left: 0;
-        position: fixed;
-        top: 0;
-        width: 200px;
-
-        /* Background */
-        background-color: #fff;
-    ">
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/dropdown/Details.tsx

@@ -29,51 +29,45 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<style>
+<div class="dropdown">
+    <!-- The trigger element -->
+    <button>...</button>
+
+    <!-- The content -->
+    <div class="dropdown-content">
+        ...
+    </div>
+</div>
+`}
+css={`
+.dropdown {
+    position: relative;   
+}
+
 /* Hide the dropdown's content by default -->
 .dropdown-content {
     display: none;
+
+    /* Position it right below the trigger element */
+    left: 0;
+    paddingTop: 4px;
+    position: absolute;
+    top: 100%;
+
+    /* It should be on the top of other elements */
+    background-color: #FFF;
+    zIndex: 9999;
+
+    /* Size */
+    height: 200px;
+    width: 200px;
 }
 
 /* Show the content when hover on the container -->
 .dropdown:hover .dropdown-content {
     display: block;
 }
-</style>
-
-<div
-    class="dropdown"
-    style="
-        position: relative;
-    "
->
-    <!-- The trigger element -->
-    <button>...</button>
-
-    <!-- The content -->
-    <div
-        class="dropdown-content"
-        style="
-            /* Position it right below the trigger element */
-            left: 0,
-            paddingTop: '4px',
-            position: 'absolute',
-            top: '100%',
-
-            /* It should be on the top of other elements */
-            backgroundColor: '#FFF',
-            zIndex: 9999,
-
-            /* Size */
-            height: '200px',
-            width: '200px',
-        "
-    >
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/full-screen-menu/Details.tsx

@@ -21,7 +21,20 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- The close button -->
+    <button class="close">
+        ...
+    </button>
+
+    <!-- The navigation menu -->
+    <ul>
+        ...
+    </ul>
+</div>
+`}
+css={`
+.container {
     /* Full screen overlay */
     height: 100%;
     left: 0;
@@ -33,24 +46,15 @@ html={`
     align-items: center;
     display: flex;
     justify-content: center;
-">
+}
-    <!-- The close button -->
-    <button style="
-        /* Shown at top right corner */
-        position: absolute;
-        right: 16px;
-        top: 16px;
-    ">
-        ...
-    </button>
 
-    <!-- The navigation menu -->
+.close {
-    <ul>
+    /* Shown at top right corner */
-        ...
+    position: absolute;
-    </ul>
+    right: 16px;
-</div>
+    top: 16px;
+}
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/mega-menu/Details.tsx

@@ -29,13 +29,34 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<style>
+<div class="container">
-.p-mega-menu-container {
+    <!-- Item -->
+    ...
+
+    <!-- An item that triggers displaying the mega menu -->
+    <div class="trigger">
+        <!-- The trigger item's content -->
+        <div>...</div>
+
+        <!-- Mega menu -->
+        <div class="content">
+            ...
+        </div>
+    </div>
+</div>
+`}
+css={`
+.container {
     /* Used to position the mega menu */
     position: relative;
 }
 
-.p-mega-menu-content {
+.trigger:hover .content {
+    /* Show the mega menu when hovering the trigger item */
+    display: block;
+}
+
+.content {
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
     margin-top: -1px;
@@ -55,30 +76,7 @@ html={`
     background: #fff;
     z-index: 9999;
 }
-
-.p-mega-menu-trigger:hover .p-mega-menu-content {
-    /* Show the mega menu when hovering the trigger item */
-    display: block;
-}
-</style>
-
-<div class="p-mega-menu-container">
-    <!-- Item -->
-    ...
-
-    <!-- An item that triggers displaying the mega menu -->
-    <div class="p-mega-menu-trigger">
-        <!-- The trigger item's content -->
-        <div>...</div>
-
-        <!-- Mega menu -->
-        <div class="p-mega-menu-content">
-            ...
-        </div>
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div style={{ padding: '8px' }}>
                         <div className='p-mega-menu-container'>

client/patterns/menu/Details.tsx

@@ -25,30 +25,14 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    display: flex;
-    flex-direction: column;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-">
     <!-- Normal menu item -->
-    <div style="
+    <div class="item">
-        /* Center the content horizontally */
-        align-items: center;
-        display: flex;
-    ">
         ...
     </div>
 
     <!-- With hot key -->
-    <div style="
+    <div class="item with-shortcut">
-        align-items: center;
-        display: flex;
-        /* Push the hot key to the right */
-        justify-content: space-between;
-    ">
         <!-- Label -->
         ...
         <!-- Hot key -->
@@ -56,16 +40,8 @@ html={`
     </div>
 
     <!-- With image and hot key -->
-    <div style="
+    <div class="item with-shortcut">
-        align-items: center;
+        <div class="with-image">
-        display: flex;
-        /* Push the hot key to the right */
-        justify-content: space-between;
-    ">
-        <div style="
-            align-items: center;
-            display: flex;
-        ">
             <!-- Image -->
             ...
             <!-- Label -->
@@ -77,13 +53,40 @@ html={`
     </div>
 
     <!-- Divider -->
-    <div style="
+    <div class="divider"></div>
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        height: 1px;
-    " />
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+    flex-direction: column;
+
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+}
+
+.item {
+    /* Center the content horizontally */
+    align-items: center;
+    display: flex;
+}
+
+.with-shortcut {
+    /* Push the hot key to the right */
+    justify-content: space-between;
+}
+
+.with-image {
+    align-items: center;
+    display: flex;
+}
+
+.divider {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    height: 1px;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/nested-dropdowns/Details.tsx

@@ -26,68 +26,7 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<style>
+<ul class="container">
-/* The root */
-.p-nested-dropdowns {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    display: flex;
-
-    /* Reset list styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.p-nested-dropdowns li {
-    /* Spacing */
-    padding: 8px;
-
-    /* Used to position the sub dropdown */
-    position: relative;
-}
-
-/* The sub dropdown */
-.p-nested-dropdowns ul {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Hidden by default */
-    display: none;
-
-    /* Absolute position */
-    left: 0;
-    position: absolute;
-    top: 100%;
-
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    /* Width */
-    width: 200px;
-}
-
-/* The second level sub dropdown */
-.p-nested-dropdowns ul ul {
-    left: 100%;
-    position: absolute;
-    top: 0;
-}
-
-/* Change background color of list item when being hovered */
-.p-nested-dropdowns li:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-/* Show the direct sub dropdown when hovering the list item */
-.p-nested-dropdowns li:hover > ul {
-    display: block;
-}
-</style>
-
-<ul class="p-nested-dropdowns">
     <li>Home</li>
     <li>
         <div>Patterns</div>
@@ -113,7 +52,65 @@ html={`
     <li>About</li>
 </ul>
 `}
-css={``}
+css={`
+.container {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: flex;
+
+    /* Reset list styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.container li {
+    /* Spacing */
+    padding: 8px;
+
+    /* Used to position the sub dropdown */
+    position: relative;
+}
+
+/* The sub dropdown */
+.container ul {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+
+    /* Hidden by default */
+    display: none;
+
+    /* Absolute position */
+    left: 0;
+    position: absolute;
+    top: 100%;
+
+    /* Reset styles */
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    /* Width */
+    width: 200px;
+}
+
+/* The second level sub dropdown */
+.container ul ul {
+    left: 100%;
+    position: absolute;
+    top: 0;
+}
+
+/* Change background color of list item when being hovered */
+.container li:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Show the direct sub dropdown when hovering the list item */
+.container li:hover > ul {
+    display: block;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/pagination/Details.tsx

@@ -22,41 +22,41 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Pagination item -->
+    <div style="
+        
+    ">
+        ...
+    </div>
+
+    <!-- Repeat other items -->
+    ...
+</div>
+`}
+css={`
+.container {
     display: flex;
 
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
     border-radius: 4px;
-">
+}
-    <!-- Pagination item -->
-    <div style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
 
-        /* Right border */
+.item {
-        border-right: 1px solid rgba(0, 0, 0, 0.3);
+    /* Center the content */
-    ">
+    align-items: center;
-        ...
+    display: flex;
-    </div>
+    justify-content: center;
 
-    <!-- Don't set the right border for the last item -->
+    /* Right border */
-    <div style="
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
-        /* Center the content */
+}
-        align-items: center;
+.item + .item {
-        display: flex;
+    /* No right border */
-        justify-content: center;
+    border-right: none;
-
+}
-        /* No right border */
-        border-right: none;
-    ">
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/previous-next-buttons/Details.tsx

@@ -21,11 +21,7 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-">
     <!-- Previous link sticks to the left -->
     <a>..</a>
 
@@ -33,7 +29,13 @@ html={`
     <a>..</a>
 </div>
 `}
-css={``}
+css={`
+.container {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/spin-button/Details.tsx

@@ -27,47 +27,51 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 2px;
-    display: flex;
-">
     <!-- Input -->
-    <input type="text" style="
+    <input type="text" class="input" />
-        border-color: transparent;
-        margin-right: 4px;
-        padding: 4px;
-        width: 100px;
-    " />
 
     <!-- Buttons container -->
-    <div style="
+    <div class="buttons">
-        /* Content is centered vertically */
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    ">
         <!-- Up button -->
-        <button style="
+        <button class="button">
-            border-color: transparent;
-            /* Make buttons have the same height */
-            flex: 1,
-        ">
             ...
         </button>
 
         <!-- Down button -->
-        <button style="
+        <button class="button">
-            border-color: transparent;
-            /* Make buttons have the same height */
-            flex: 1,
-        ">
             ...
         </button>
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 2px;
+    display: flex;
+}
+
+.input {
+    border-color: transparent;
+    margin-right: 4px;
+    padding: 4px;
+    width: 100px;
+}
+
+.buttons {
+    /* Content is centered vertically */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.button {
+    border-color: transparent;
+    /* Make buttons have the same height */
+    flex: 1,
+}
+`}
                 >
                     <div
                         style={{

client/patterns/split-navigation/Details.tsx

@@ -22,7 +22,20 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<ul style="
+<ul class="container">
+    <!-- Navigation item -->
+    <li>
+        <a href="">...</a>
+    </li>
+
+    <!-- Navigation item that sticks to the right -->
+    <li class="item-right">
+        <a href="">...</a>
+    </li>
+</ul>
+`}
+css={`
+.container {
     /* Content is centered horizontally */
     align-items: center;
     display: flex;
@@ -30,22 +43,13 @@ html={`
     /* Reset styles */
     list-style-type: none;
     margin: 0;
-">
+}
-    <!-- Navigation item -->
-    <li>
-        <a href="">...</a>
-    </li>
 
-    <!-- Navigation item that sticks to the right -->
+.item-right {
-    <li style="
+    /* Sticks to the right */
-        /* Sticks to the right */
+    margin-left: auto;
-        margin-left: auto;
+}
-    ">
-        <a href="">...</a>
-    </li>
-</ul>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/stepper-input/Details.tsx

@@ -30,7 +30,21 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- Minus button -->
+    <button class="button">-</button>
+
+    <!-- Input container -->
+    <div class="input-container">
+        <input type="text" class="input" />
+    </div>
+
+    <!-- Plus button -->
+    <button class="button">+</button>
+</div>
+`}
+css={`
+.container {
     display: flex;
 
     /* Border */
@@ -39,40 +53,28 @@ html={`
     /* Size */
     height: 32px;
     width: 128px;
-">
+}
-    <!-- Minus button -->
-    <button style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
 
-        /* Size */
+.button {
-        width: 32px;
+    /* Center the content */
-    ">-</button>
+    align-items: center;
+    display: flex;
+    justify-content: center;
 
-    <!-- Input container -->
+    /* Size */
-    <div style="flex: 1">
+    width: 32px;
-        <input type="text" style="
+}
-            /* Take full size of its container */
-            height: 100%;
-            width: 100%;
-        " />
-    </div>
 
-    <!-- Plus button -->
+.input-container {
-    <button style="
+    flex: 1
-        /* Center the content */
+}
-        align-items: center;
-        display: flex;
-        justify-content: center;
 
-        /* Size */
+.input {
-        width: 32px;
+    /* Take full size of its container */
-    ">+</button>
+    height: 100%;
-</div>
+    width: 100%;
+}
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/switch/Details.tsx

@@ -28,7 +28,15 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<label style="
+<label class="label">
+    <input type="checkbox" class="input" />
+
+    <!-- Circle -->
+    <div class="circle"></div>
+</label>
+`}
+css={`
+.label {
     display: flex;
 
     /* Rounded border */
@@ -47,26 +55,26 @@ html={`
     border: 1px solid #357edd;
     /* Push the circle to the right */
     justify-content: flex-end;
-">
+}
-    <!-- Hide the input -->
-    <input type="checkbox" style="display: none" />
 
-    <!-- Circle -->
+.input {
-    <div style="
+    /* Hide the input */
-        /* Rounded border */
+    display: none;
-        border-radius: 9999px;
+}
 
-        /* Size */
+.circle {
-        width: 32px;
+    /* Rounded border */
+    border-radius: 9999px;
 
-        background-color: #FFF;
+    /* Size */
+    width: 32px;
 
-        /* OFF status */
+    background-color: #FFF;
-        border: 1px solid rgba(0, 0, 0, .3);
+
-    " />
+    /* OFF status */
-</label>
+    border: 1px solid rgba(0, 0, 0, .3);
+}
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/tab/Details.tsx

@@ -47,36 +47,42 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="tabs">
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-">
     <!-- Active tab -->
-    <div style="
+    <div class="tab--active">
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-        /* Hide the bottom border */
-        border-bottom-color: transparent;
-
-        /* Border radius */
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-    ">
         ...
     </div>
 
     <!-- Inactive tab -->
-    <div style="
+    <div class="tab--inactive">
-        /* Has only the bottom border */
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    ">
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.tabs {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.tab--active {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    /* Hide the bottom border */
+    border-bottom-color: transparent;
+
+    /* Border radius */
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+}
+
+.tab--inactive {
+    /* Has only the bottom border */
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+}
+`}
                 >
                     <div
                         style={{

client/patterns/toggle-password-visibility/Details.tsx

@@ -23,21 +23,9 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    display: flex;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-">
     <!-- Text input -->
-    <input
+    <input type="text" class="input" />
-        type="text"
-        style="
-            border-color: transparent;
-            /* Take available width */
-            flex: 1;
-        "
-    />
 
     <!-- Toggle button sticks to the right -->
     <button>
@@ -45,7 +33,20 @@ html={`
     </button>
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+.input {
+    border-color: transparent;
+    /* Take available width */
+    flex: 1;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/upload-button/Details.tsx

@@ -24,7 +24,19 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- The real file input -->
+    <input type="file" class="input" />
+
+    <!-- The upload icon -->
+    <div class="icon">...</div>
+
+    <!-- The label -->
+    ...
+</div>
+`}
+css={`
+.container {
     /* Used to position the input */
     position: relative;
 
@@ -34,31 +46,24 @@ html={`
 
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
-">
+}
-    <!-- The real file input -->
-    <input
-        type="file"
-        style="
-            /* Take the full size */
-            height: 100%;
-            left: 0;
-            position: absolute;
-            top: 0;
-            width: 100%;
 
-            /* Make it transparent */
+.input {
-            opacity: 0;
+    /* Take the full size */
-        "
+    height: 100%;
-    />
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
 
-    <!-- The upload icon -->
+    /* Make it transparent */
-    <div style="margin-right: 8px">...</div>
+    opacity: 0;
+}
 
-    <!-- The label -->
+.icon {
-    ...
+    margin-right: 8px
-</div>
+}
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/wizard/Details.tsx

@@ -23,71 +23,75 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="wizard">
-    display: flex;
-">
     <!-- Step -->
-    <div style="
+    <div class="step">
-        /* Make all steps have the same width */
+        <div class="step__dot">
-        flex: 1;
-    ">
-        <div style="
-            /* Center the content */
-            align-items: center;
-            display: flex;
-            justify-content: center;
-        ">
             <!-- The left connector -->
-            <div style="
+            <div class="step__connector"></div>
-                flex: 1;
-                height: 1px;
-
-                background-color: rgba(0, 0, 0, .3);
-                /*
-                For the first step, you might need to set it to transparent background:
-                background-color: transparent;
-                */
-            " />
 
             <!-- The step number -->
-            <div style="
+            <div class="step__number">
-                /* Center the content */
-                align-items: center;
-                display: flex;
-                justify-content: center;
-
-                /* Rounded border */
-                background-color: rgba(0, 0, 0, .3);
-                border-radius: 9999px;
-                height: 32px;
-                width: 32px;
-
-                /* OPTIONAL: Spacing between it and connectors */
-                margin-left: 4px;
-                margin-right: 4px;
-            ">
                 ...
             </div>
 
             <!-- The right connector -->
-            <div style="
+            <div class="step__connector"></div>
-                flex: 1;
-                height: 1px;
-
-                background-color: rgba(0, 0, 0, .3);
-                /*
-                For the last step, you might need to set it to transparent background:
-                background-color: transparent;
-                */
-            " />
         </div>
 
         <!-- Title of step -->
         ...
     </div>
+
+    <!-- Repeat other steps -->
+    ...
 </div>
 `}
-css={``}
+css={`
+.wizard {
+    display: flex;
+}
+
+.step {
+    /* Make all steps have the same width */
+    flex: 1;
+}
+
+.step__dot {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.step__connector {
+    flex: 1;
+    height: 1px;
+    background-color: rgba(0, 0, 0, .3);
+}
+
+.step:first-child .step__connector,
+.step:last-child .step__connector {
+    background-color: transparent;
+}
+
+.step__number {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Rounded border */
+    background-color: rgba(0, 0, 0, .3);
+    border-radius: 9999px;
+    height: 32px;
+    width: 32px;
+
+    /* OPTIONAL: Spacing between it and connectors */
+    margin-left: 4px;
+    margin-right: 4px;
+}
+`}
                 >
                     <div
                         style={{