3 files changed, 107 insertions, 0 deletions
diff --git a/internal/examples/app/html/about.go b/internal/examples/app/html/about.go
new file mode 100644
index 0000000..37b797f
--- /dev/null
+++ b/internal/examples/app/html/about.go
@@ -0,0 +1,25 @@
+package html
+
+import (
+	"time"
+
+	. "github.com/maragudk/gomponents"
+	. "github.com/maragudk/gomponents/html"
+)
+
+func AboutPage() Node {
+	now := time.Now()
+
+	return page("About",
+		H1(Text("About")),
+
+		P(Textf("Built with gomponents and rendered at %v.", now.Format(time.TimeOnly))),
+
+		P(
+			If(now.Second()%2 == 0, Text("It's an even second!")),
+			If(now.Second()%2 != 0, Text("It's an odd second!")),
+		),
+
+		Img(Class("max-w-sm"), Src("https://www.gomponents.com/images/logo.png"), Alt("gomponents logo")),
+	)
+}
diff --git a/internal/examples/app/html/components.go b/internal/examples/app/html/components.go
new file mode 100644
index 0000000..25880a3
--- /dev/null
+++ b/internal/examples/app/html/components.go
@@ -0,0 +1,62 @@
+package html
+
+import (
+	. "github.com/maragudk/gomponents"
+	. "github.com/maragudk/gomponents/components"
+	. "github.com/maragudk/gomponents/html"
+)
+
+func page(title string, children ...Node) Node {
+	return HTML5(HTML5Props{
+		Title:    title,
+		Language: "en",
+		Head: []Node{
+			Script(Src("https://cdn.tailwindcss.com?plugins=typography")),
+		},
+		Body: []Node{Class("bg-gradient-to-b from-white to-indigo-100 bg-no-repeat"),
+			Div(Class("min-h-screen flex flex-col justify-between"),
+				header(),
+				Div(Class("grow"),
+					container(true,
+						Div(Class("prose prose-lg prose-indigo"),
+							Group(children),
+						),
+					),
+				),
+				footer(),
+			),
+		},
+	})
+}
+
+func header() Node {
+	return Div(Class("bg-indigo-600 text-white shadow"),
+		container(false,
+			Div(Class("flex items-center space-x-4 h-8"),
+				headerLink("/", "Home"),
+				headerLink("/about", "About"),
+			),
+		),
+	)
+}
+
+func headerLink(href, text string) Node {
+	return A(Class("hover:text-indigo-300"), Href(href), Text(text))
+}
+
+func container(padY bool, children ...Node) Node {
+	return Div(
+		Classes{
+			"max-w-7xl mx-auto":     true,
+			"px-4 md:px-8 lg:px-16": true,
+			"py-4 md:py-8":          padY,
+		},
+		Group(children),
+	)
+}
+
+func footer() Node {
+	return Div(Class("bg-gray-900 text-white shadow text-center h-16 flex items-center justify-center"),
+		A(Href("https://www.gomponents.com"), Text("gomponents")),
+	)
+}
diff --git a/internal/examples/app/html/home.go b/internal/examples/app/html/home.go
new file mode 100644
index 0000000..d4e192c
--- /dev/null
+++ b/internal/examples/app/html/home.go
@@ -0,0 +1,20 @@
+package html
+
+import (
+	. "github.com/maragudk/gomponents"
+	. "github.com/maragudk/gomponents/html"
+)
+
+func HomePage(items []string) Node {
+	return page("Home",
+		H1(Text("Home")),
+
+		P(Text("This is a gomponents example app!")),
+
+		P(Raw(`Have a look at the <a href="https://github.com/maragudk/gomponents/tree/main/internal/examples/app">source code</a> to see how it’s structured.`)),
+
+		Ul(Group(Map(items, func(s string) Node {
+			return Li(Text(s))
+		}))),
+	)
+}