Small tweaks to main demo page (#1962)

* Small tweaks to main demo page

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Fabio Pliger <fpliger@users.noreply.github.com>

pyscript.core/src/stdlib/pyweb/ui/elements.py

@@ -348,6 +348,10 @@ class strong(TextElementBase):
     tag = "strong"
 
 
+class main(TextElementBase):
+    tag = "main"
+
+
 # strong tags only have the global attributes ones
 _add_js_properties(strong)
 

pyscript.core/test/ui/demo.py

@@ -119,13 +119,29 @@ def create_main_area():
         the main area
 
     """
-    return div(
+    div_ = div(
         [
             h1("Welcome to PyWeb UI!", style={"text-align": "center"}),
             markdown(MAIN_PAGE_MARKDOWN),
         ]
     )
 
+    main = el.main(
+        style={
+            "padding-top": "4rem",
+            "padding-bottom": "7rem",
+            "max-width": "52rem",
+            "margin-left": "auto",
+            "margin-right": "auto",
+            "padding-left": "1.5rem",
+            "padding-right": "1.5rem",
+            "width": "100%",
+        }
+    )
+    main.append(div_)
+
+    return main
+
 
 def create_basic_components_page(label, kit_name):
     """Create the basic components page.
@@ -195,7 +211,8 @@ when("click", left_panel_title)(restore_home)
 
 # BASIC COMPONENTS
 basic_components_text = h3(
-    "Basic Components", style={"text-align": "left", "margin": "20px auto 0"}
+    "Basic Components",
+    style={"text-align": "left", "margin": "20px auto 0", "cursor": "pointer"},
 )
 left_div.append(basic_components_text)
 left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"}))