The details page supports smaller screens

client/components/CoverCard.tsx

@@ -18,7 +18,7 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
     return (
         <Link
             to={`/patterns/${slug(pattern)}`}
-            className='w-1/2 md:w-1/5 lg:w-1/6'
+            className='w-1/2 sm:w-1/4 md:w-1/5 lg:w-1/6'
             style={{
                 alignItems: 'center',
                 display: 'flex',

client/layouts/DetailsLayout.tsx

@@ -19,64 +19,31 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
 
     return (
         <Layout>
-            <div style={{ position: 'absolute', right: 0, top: '24px' }}>
-                <ProductHuntBadge />
-            </div>
-            <div
-                style={{
-                    alignItems: 'center',
-                    backgroundColor: '#00449E',
-                    borderRadius: '4px',
-                    color: '#FFF',
-                    display: 'inline-flex',
-                    margin: '32px 0',
-                }}
-            >
+            <div className='flex sm:text-2xl p-4 xl:pl-0'>
                 <Link
                     to="/"
                     style={{
-                        color: '#FFF',
-                        padding: '8px 16px',
                         textDecoration: 'none',
                     }}
                 >
-                    .home
+                    Home
                 </Link>
-                <div>~</div>
+                <span className='mx-2'>/</span>
                 <Link
                     to="/patterns"
                     style={{
-                        color: '#FFF',
-                        padding: '8px 16px',
                         textDecoration: 'none',
                     }}
                 >
-                    .explore
+                    Explore
                 </Link>
+                <span className='mx-2'>/</span>
+                <h1>{title}</h1>
             </div>
-            <div
-                style={{
-                    border: '1px solid rgba(0, 0, 0, 0.2)',
-                    borderBottomColor: 'transparent',
-                    position: 'relative',
-                }}
-            >
-                <h1
-                    style={{
-                        backgroundColor: '#FFF',
-                        fontSize: '36px',
-                        fontWeight: 600,
-                        left: '50%',
-                        lineHeight: 1.5,
-                        margin: 0,
-                        padding: '0 16px',
-                        position: 'absolute',
-                        top: 0,
-                        transform: 'translate(-50%, -50%)',
-                    }}
-                >
-                    {title}
-                </h1>
+            <div className='flex justify-center pb-5'>
+                <ProductHuntBadge />
+            </div>
+            <div className='xl:border-l xl:border-t xl:border-r xl:border-gray-400'>
                 {children}
             </div>
         </Layout>

client/layouts/Footer.tsx

@@ -23,10 +23,10 @@ const Footer: React.FC<{}> = () => {
                 <SubscribeForm />
             </div>
             <div
-                className='md:flex xl:border-l xl:border-r xl:border-b xl:border-gray-400 xl:mb-16'
+                className='sm:flex md:border-b md:border-gray-400 xl:border-l xl:border-r xl:border-b xl:border-gray-400 xl:mb-16'
             >
                 <div
-                    className='border-t border-gray-400 md:border-r'
+                    className='border-t border-gray-400 sm:border-r'
                     style={{
                         display: 'flex',
                         flex: 1,
@@ -184,7 +184,7 @@ const Footer: React.FC<{}> = () => {
                                     style={{ marginLeft: 'auto', textDecoration: 'none' }}
                                     target="_blank"
                                 >
-                                    github.com/phuoc-ng/csslayout
+                                    phuoc-ng/csslayout
                                 </a>
                                 <div>;</div>
                             </li>

client/pages/ExplorePage.tsx

@@ -24,7 +24,7 @@ const ExplorePage = () => {
                 <meta name="description" content="CSS layouts and patterns" />
                 <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
             </Helmet>
-            <div className='text-2xl p-4 xl:pl-0'>
+            <div className='sm:text-2xl p-4 xl:pl-0'>
                 <Link
                     to="/"
                     style={{

client/patterns/accordion/Details.tsx

@@ -62,7 +62,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create an accordion with CSS flexbox" />
                 <meta name="keywords" content="css accordion, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/arrow-buttons/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create arrow buttons with CSS" />
                 <meta name="keywords" content="css arrow buttons" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/avatar-list/Details.tsx

@@ -38,7 +38,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create an avatar list with CSS flexbox" />
                 <meta name="keywords" content="css avatar, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/avatar/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create an avatar component with CSS flexbox" />
                 <meta name="keywords" content="css avatar, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/badge/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a badge component with CSS flexbox" />
                 <meta name="keywords" content="css badge, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/breadcrumb/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a breadcrumb with CSS flexbox" />
                 <meta name="keywords" content="css breadcrumb, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/button-with-icon/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create an icon button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css icon button" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/card-layout/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a card layout with CSS flexbox" />
                 <meta name="keywords" content="css card layout, css flexbox, css layout" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/card/Details.tsx

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a card with CSS flexbox" />
                 <meta name="keywords" content="css card, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/centering/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Center an element with CSS flexbox" />
                 <meta name="keywords" content="css centering, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/chip/Details.tsx

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a chip component with CSS flexbox" />
                 <meta name="keywords" content="css chip, css flexbox, css tag" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
                 </div>

client/patterns/circular-navigation/Details.tsx

@@ -53,7 +53,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a circular navigation with CSS flexbox" />
                 <meta name="keywords" content="css circular navigation, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/close-button/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a close button with CSS flexbox" />
                 <meta name="keywords" content="css close button, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/cookie-banner/Details.tsx

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a cookie banner with CSS flexbox" />
                 <meta name="keywords" content="css cookie banner, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/corner-ribbon/Details.tsx

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a corner ribbon with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css ribbon" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/curved-background/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create an element with curved background" />
                 <meta name="keywords" content="css border radius, css curved background" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/custom-checkbox-button/Details.tsx

@@ -66,7 +66,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a custom checkbox button with CSS flexbox" />
                 <meta name="keywords" content="css checkbox, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/custom-radio-button/Details.tsx

@@ -67,7 +67,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a custom radio button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css radio" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/diagonal-section/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a diagonal section with CSS" />
                 <meta name="keywords" content="css diagonal section, css transform skew" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

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

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Dock an element at corner with CSS" />
                 <meta name="keywords" content="css docked, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/dot-leader/Details.tsx

@@ -21,7 +21,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create dot leaders with CSS flexbox" />
                 <meta name="keywords" content="css dot leader, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/dot-navigation/Details.tsx

@@ -41,7 +41,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create dot navigation with CSS flexbox" />
                 <meta name="keywords" content="css dot navigation, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/drawer/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a drawer navigation with CSS" />
                 <meta name="keywords" content="css drawer, css off-canvas" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     This pattern is also known as off-canvas.
                 </div>

client/patterns/drop-area/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a dropping area with CSS flexbox" />
                 <meta name="keywords" content="css dropping area, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/drop-cap/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a drop cap with CSS" />
                 <meta name="keywords" content="css drop cap" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/dropdown/Details.tsx

@@ -23,7 +23,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a dropdown with CSS" />
                 <meta name="keywords" content="css dropdown, css menu" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Move the mouse over the button to see the dropdown.
                 </div>

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

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Fading long section to indicate there is more content" />
                 <meta name="keywords" content="css fading overflow, css linear gradient" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Fading a long section to indicate there is more content.
                 </div>

client/patterns/feature-comparison/Details.tsx

@@ -21,7 +21,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a feature comparison list with CSS flexbox" />
                 <meta name="keywords" content="css feature comparison, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/feature-list/Details.tsx

@@ -21,7 +21,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a feature list with CSS flexbox" />
                 <meta name="keywords" content="css feature list, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

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

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Fix an element at corner with CSS" />
                 <meta name="keywords" content="css fixed" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div style={{ height: '100%', position: 'relative' }}>

client/patterns/fixed-at-side/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Fix an element at the middle of side with CSS" />
                 <meta name="keywords" content="css fixed" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/floating-label/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a floating label with CSS" />
                 <meta name="keywords" content="css floating label, placeholder shown" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Type something in the input to see how the label is shown up.
                 </div>

client/patterns/full-background/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a full background element with CSS" />
                 <meta name="keywords" content="css background size cover, css full background" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

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

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a full screen menu with CSS flexbox" />
                 <meta name="keywords" content="css fixed, css flexbox, css menu" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/holy-grail/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a holy grail layout with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css holy grail layout, css layout" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/initial-avatar/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create an initial avatar with CSS" />
                 <meta name="keywords" content="css avatar" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     To center the content, you also can use other technique demonstrated in
                     the <Link to='/patterns/centering'>Centering</Link> pattern.

client/patterns/input-addon/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create an input add-on with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css input add-on" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/keyboard-shortcut/Details.tsx

@@ -50,7 +50,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a keyboard shortcut with CSS" />
                 <meta name="keywords" content="kbd tag, keyboard shortcut" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     We use the native <code>kbd</code> tag to display the keyboard shortcut.
                 </div>

client/patterns/lined-paper/Details.tsx

@@ -16,7 +16,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create lined paper with CSS" />
                 <meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/media-object/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a media object with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, media object" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/mega-menu/Details.tsx

@@ -23,7 +23,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a mega menu with CSS" />
                 <meta name="keywords" content="css mega menu" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Move the mouse over the seccond navigation item to see the mega menu.
                 </div>

client/patterns/menu/Details.tsx

@@ -22,7 +22,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a menu with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css menu" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/modal/Details.tsx

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a modal with CSS flexbox" />
                 <meta name="keywords" content="css dialog, css flexbox, css modal" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can use the <Link to='/patterns/close-button'>close button</Link> to
                     represent the button for closing the modal.

client/patterns/nested-dropdowns/Details.tsx

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create nested dropdown menu with CSS" />
                 <meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Hover on the Patterns &rarr; Navigation to see the sub dropdowns.
                 </div>

client/patterns/notification/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a notification with CSS flexbox" />
                 <meta name="keywords" content="css alert, css flexbox, css notification" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can use the <Link to='/patterns/close-button'>close button</Link> to
                     represent the button for closing the notification.

client/patterns/overlay-play-button/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create an overlay play button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/pagination/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a pagination with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css pagination" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/popover-arrow/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a popover arrow with CSS" />
                 <meta name="keywords" content="css arrow, css popover" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/presence-indicator/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a presence indicator with CSS" />
                 <meta name="keywords" content="css indicator" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

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

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create previous and next buttons with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css pagination" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/pricing-table/Details.tsx

@@ -22,7 +22,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a pricing table with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css pricing table" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can <Link to='/patterns/ribbon'>add</Link> <Link to='/patterns/corner-ribbon'>a ribbon</Link> to
                     indicate the most popular option.

client/patterns/progress-bar/Details.tsx

@@ -22,7 +22,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a progress bar with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css progress bar" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/property-list/Details.tsx

@@ -38,7 +38,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a property list with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, property list" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

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

@@ -58,7 +58,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a questions and answers section with CSS flexbox" />
                 <meta name="keywords" content="css accordion, css faq, css flexbox" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/radial-progress-bar/Details.tsx

@@ -77,7 +77,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a radial progress bar with CSS flexbox" />
                 <meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/radio-button-group/Details.tsx

@@ -52,7 +52,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a radio button group with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css radio button" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/radio-switch/Details.tsx

@@ -22,7 +22,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a radio switch with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css radio switch, css switch" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/rating/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a star rating with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css star rating" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/resizable-element/Details.tsx

@@ -16,7 +16,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create resizable indicators with CSS" />
                 <meta name="keywords" content="css resizable, css resize cursor" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can move the mouse over each squares located at the corners and the middle of sides to see
                     the cursors which indicate the associated side can be resized.

client/patterns/ribbon/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a ribbon with CSS" />
                 <meta name="keywords" content="css ribbon" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/same-height-columns/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create same height columns with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css same height columns" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/search-box/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a search box with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css search box" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/separator/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a separator with CSS flexbox" />
                 <meta name="keywords" content="css divider, css flexbox, css separator" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/sidebar/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a sidebar with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css sidebar" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
                 <BrowserFrame
                     content={(

client/patterns/simple-grid/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a simple grid with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/slider/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a slider with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css slider" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/spin-button/Details.tsx

@@ -24,7 +24,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a spin button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css spin button" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/split-navigation/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a split navigation with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/split-screen/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a split screen with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css split screen" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div style={{ display: 'flex', height: '100%' }}>

client/patterns/stacked-cards/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create stacked cards with CSS" />
                 <meta name="keywords" content="css card, css stacked cards, css transform rotate" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/stamp-border/Details.tsx

@@ -16,7 +16,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create stamp border with CSS" />
                 <meta name="keywords" content="css radial gradient, css stamp border" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/statistic/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a statistic component with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css statistic" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/status-light/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a status light with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css status light" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/stepper-input/Details.tsx

@@ -27,7 +27,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a stepper input with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css stepper input" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/sticky-footer/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a sticky footer with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css sticky, css sticky footer" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     The footer always sticks to the bottom if the main content is short.
                 </div>

client/patterns/sticky-header/Details.tsx

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a sticky header with CSS" />
                 <meta name="keywords" content="css layout, css position sticky, css sticky header" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Try to scroll the main content to see the header sticks to the top of page.
                 </div>

client/patterns/sticky-sections/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create sticky sections with CSS" />
                 <meta name="keywords" content="css layout, css sticky, css sticky sections" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Try to scroll the main content to see each section sticks to the top of page.
                 </div>

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

@@ -22,7 +22,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create sticky table column with CSS" />
                 <meta name="keywords" content="css position sticky, css sticky table column" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Try to scroll the main content of table horizontally to see the first column sticks to the left.
                 </div>

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

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create sticky table headers with CSS" />
                 <meta name="keywords" content="css position sticky, css sticky table headers" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Try to scroll the main content of table to see the header sticks to the top.
                 </div>

client/patterns/switch/Details.tsx

@@ -21,7 +21,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a switch with CSS flexbox" />
                 <meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px'}}>
                     The checkbox is placed inside a label. So when clicking on the label,
                     the checkbox will be checked even though it's hidden.

client/patterns/tab/Details.tsx

@@ -43,7 +43,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create tabs with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css navigation, css tab" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/teardrop/Details.tsx

@@ -20,7 +20,7 @@ const Details: React.FC<{}> = () => {
                     content="css border radius, css teardrop, css water drop shape, css water droplet"
                 />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/timeline/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a timeline with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css timeline" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

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

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a toggle password visibility with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, toggle password visibility" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/tooltip/Details.tsx

@@ -22,7 +22,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a tooltip with CSS" />
                 <meta name="keywords" content="css tooltip" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Move the mouser over the main element to see the tooltip.
                 </div>

client/patterns/triangle-buttons/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create triangle buttons with CSS" />
                 <meta name="keywords" content="css triangle buttons" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/upload-button/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create an upload button with CSS flexbox" />
                 <meta name="keywords" content="css file input, css flexbox, css upload button" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can click the button to choose a file.
                 </div>

client/patterns/validation-icon/Details.tsx

@@ -16,7 +16,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Add validation icons to input with CSS" />
                 <meta name="keywords" content="css validation icon" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/video-background/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Add video background with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, object fit cover" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     In this pattern, the video is displayed in the background.
                 </div>

client/patterns/watermark/Details.tsx

@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a watermask with CSS" />
                 <meta name="keywords" content="css watermask" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/patterns/wizard/Details.tsx

@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a wizard with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css stepper, css wizard" />
             </Helmet>
-            <div style={{ padding: '64px 32px' }}>
+            <div className='p-8 pb-20'>
                 <BrowserFrame
                     content={(
                         <div

client/placeholders/BrowserFrame.tsx

@@ -18,10 +18,10 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
 
     return (
         <div
+            className='shadow-2xl'
             style={{
                 border: '1px solid rgba(0, 0, 0, 0.2)',
                 borderRadius: '4px',
-                boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)',
             }}
         >
             <div