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,17 +57,32 @@ 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">
+        <!-- The inner -->
+        <div class="inner">
+            <!-- The content -->
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat menu items -->
+    ...
+</div>
+`}
+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
@@ -79,9 +94,8 @@ html={`
     /* Must have the same size as the trigger element */
     height: 32px;
     width: 32px;
-    ">
+}
-        <!-- The inner -->
+.inner {
-        <div style="
     /*
     Rotate it to make it displayed vertically
     Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
@@ -98,17 +112,8 @@ html={`
     /* Take full size */
     height: 100%;
     width: 100%;
-        ">
+}
-            <!-- The content -->
-            ...
-        </div>
-    </div>
-
-    <!-- Repeat menu items -->
-    ...
-</div>
 `}
-css={``}
                 >
                     <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,8 +63,8 @@ html={`
     list-style-type: none;
     margin: 0;
     padding: 0;
-">
+}
-    <li style="
+.item {
     /* Rounded border */
     border-radius: 9999px;
     height: 12px;
@@ -71,10 +79,8 @@ html={`
 
     /* OPTIONAL: Spacing between dots */
     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,9 +44,8 @@ html={`
     width: 100%;
 
     z-index: 9999;
-">
+}
-    <!-- Backdrop -->
+.overlay {
-    <div style="
     /* Take full size */
     height: 100%;
     left: 0;
@@ -47,10 +57,8 @@ html={`
     background-color: rgba(0, 0, 0, 0.5);
 
     z-index: -1;
-    " />
+}
-
+.sidebar {
-    <!-- Sidebar -->
-    <div style="
     /* Take full height */
     height: 100%;
     left: 0;
@@ -60,12 +68,8 @@ html={`
 
     /* 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="
+.close {
     /* Shown at top right corner */
     position: absolute;
     right: 16px;
     top: 16px;
-    ">
+}
-        ...
-    </button>
-
-    <!-- The navigation menu -->
-    <ul>
-        ...
-    </ul>
-</div>
 `}
-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,15 +22,28 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
+<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="
+.item {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -38,25 +51,12 @@ html={`
 
     /* Right border */
     border-right: 1px solid rgba(0, 0, 0, 0.3);
-    ">
+}
-        ...
+.item + .item {
-    </div>
-
-    <!-- Don't set the right border for the last item -->
-    <div style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-
     /* 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 */
     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,9 +53,9 @@ html={`
     /* Size */
     height: 32px;
     width: 128px;
-">
+}
-    <!-- Minus button -->
+
-    <button style="
+.button {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -49,30 +63,18 @@ html={`
 
     /* Size */
     width: 32px;
-    ">-</button>
+}
 
-    <!-- Input container -->
+.input-container {
-    <div style="flex: 1">
+    flex: 1
-        <input type="text" style="
+}
+
+.input {
     /* Take full size of its container */
     height: 100%;
     width: 100%;
-        " />
+}
-    </div>
-
-    <!-- Plus button -->
-    <button style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-
-        /* Size */
-        width: 32px;
-    ">+</button>
-</div>
 `}
-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,12 +55,14 @@ 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 */
+    display: none;
+}
+
+.circle {
     /* Rounded border */
     border-radius: 9999px;
 
@@ -63,10 +73,8 @@ html={`
 
     /* OFF status */
     border: 1px solid rgba(0, 0, 0, .3);
-    " />
+}
-</label>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/tab/Details.tsx

@@ -47,14 +47,27 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="tabs">
+    <!-- Active tab -->
+    <div class="tab--active">
+        ...
+    </div>
+
+    <!-- Inactive tab -->
+    <div class="tab--inactive">
+        ...
+    </div>
+</div>
+`}
+css={`
+.tabs {
     /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;
-">
+}
-    <!-- Active tab -->
+
-    <div style="
+.tab--active {
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
     /* Hide the bottom border */
@@ -63,20 +76,13 @@ html={`
     /* Border radius */
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
-    ">
+}
-        ...
-    </div>
 
-    <!-- Inactive tab -->
+.tab--inactive {
-    <div style="
     /* Has only the bottom border */
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    ">
+}
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <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,11 +46,9 @@ html={`
 
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
-">
+}
-    <!-- The real file input -->
+
-    <input
+.input {
-        type="file"
-        style="
     /* Take the full size */
     height: 100%;
     left: 0;
@@ -48,17 +58,12 @@ html={`
 
     /* Make it transparent */
     opacity: 0;
-        "
+}
-    />
 
-    <!-- The upload icon -->
+.icon {
-    <div style="margin-right: 8px">...</div>
+    margin-right: 8px
-
+}
-    <!-- The label -->
-    ...
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/wizard/Details.tsx

@@ -23,34 +23,59 @@ 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">
+        <div class="step__dot">
+            <!-- The left connector -->
+            <div class="step__connector"></div>
+
+            <!-- The step number -->
+            <div class="step__number">
+                ...
+            </div>
+
+            <!-- The right connector -->
+            <div class="step__connector"></div>
+        </div>
+
+        <!-- Title of step -->
+        ...
+    </div>
+
+    <!-- Repeat other steps -->
+    ...
+</div>
+`}
+css={`
+.wizard {
+    display: flex;
+}
+
+.step {
     /* Make all steps have the same width */
     flex: 1;
-    ">
+}
-        <div style="
+
+.step__dot {
     /* Center the content */
     align-items: center;
     display: flex;
     justify-content: center;
-        ">
+}
-            <!-- The left connector -->
+
-            <div style="
+.step__connector {
     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 -->
+.step:first-child .step__connector,
-            <div style="
+.step:last-child .step__connector {
+    background-color: transparent;
+}
+
+.step__number {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -65,29 +90,8 @@ html={`
     /* OPTIONAL: Spacing between it and connectors */
     margin-left: 4px;
     margin-right: 4px;
-            ">
+}
-                ...
-            </div>
-
-            <!-- The right connector -->
-            <div style="
-                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>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{