improving layout by using latest tailwind css

main.py

@@ -15,18 +15,18 @@ def example(element: Element):
 
     callFrame = inspect.currentframe().f_back.f_back
     begin = callFrame.f_lineno
-    with ui.row(classes='flex w-screen'):
+    with ui.row(classes='flex w-full'):
 
         doc = element.__init__.__doc__
         if doc:
             html = docutils.core.publish_parts(doc, writer_name='html')['html_body']
-            html = html.replace('<p>', '<h3 class="text-2xl mb-3">', 1)
+            html = html.replace('<p>', '<h3>', 1)
             html = html.replace('</p>', '</h3>', 1)
-            ui.html(html, classes='w-4/12 pr-12')
+            ui.html(html, classes='mr-8 w-4/12')
         else:
             ui.label(element.__name__, 'h5')
 
-        with ui.card(classes='mt-12 w-1/12'):
+        with ui.card(classes='mt-12 w-2/12'):
             yield
         callFrame = inspect.currentframe().f_back.f_back
         end = callFrame.f_lineno
@@ -37,7 +37,7 @@ def example(element: Element):
         code.insert(1, 'from nicegui import ui')
         code.append('```')
         code = '\n'.join(code)
-        ui.markdown(code, classes='mt-12 w-6/12 overflow-auto')
+        ui.markdown(code, classes='mt-12 w-5/12 overflow-auto')
 
 
 with open('README.md', 'r') as file:
@@ -47,7 +47,8 @@ with example(ui.timer):
     from datetime import datetime
 
     clock = ui.label()
-    ui.timer(interval=0.1, callback=lambda: clock.set_text(datetime.now().strftime("%X")))
+    t = ui.timer(interval=0.1, callback=lambda: clock.set_text(datetime.now().strftime("%X")))
+    ui.checkbox('active').bind_value(t.active)
 
 with example(ui.button):
 

nicegui/nicegui.py

@@ -23,6 +23,10 @@ wp.css = HtmlFormatter().get_style_defs('.codehilite')
 wp.head_html = '<script>confirm = () => true;</script>'  # avoid confirmation dialog for reload
 wp.head_html += '<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">'  # using latest tailwind
 
+markdown_styling = ''.join(
+    [f'h{i} {{ font-size: {80*(5-i)}%; line-height: normal; margin-block-start:1em; margin-block-end: {0.1*(5-1)}em }}' for i in range(1, 5)])
+wp.head_html += '<style>' + markdown_styling + '</style>'
+
 main = jp.Div(a=wp, classes='q-ma-md column items-start', style='row-gap: 1em')
 main.add_page(wp)
 jp.justpy(lambda: wp, start_server=False)