Tailwind classes in OCaml
anil.recoil.org
1(* Button Demo - Showcasing GADT-based button interface *)
2
3open Htmlit
4open Tailwind_html
5
6let create_button_demo () =
7 let html = El.html [
8 El.head [
9 El.meta ~at:[At.charset "utf-8"] ();
10 El.meta ~at:[At.name "viewport"; At.content "width=device-width, initial-scale=1"] ();
11 El.title [txt "Button Demo"];
12 El.link ~at:[At.rel "stylesheet"; At.href "button_demo.css"] ();
13 ];
14 El.body ~at:[classes_attr [
15 min_height screen;
16 bg_color (gray 50);
17 padding (rem 2.0);
18 ]] [
19 container [
20 h1 ~styles:[
21 font_size `Xl3;
22 font_weight `Bold;
23 text_color (gray 800);
24 text_center;
25 margin_bottom (rem 2.0);
26 ] [txt "Button Component Demo"];
27
28 p ~styles:[
29 font_size `Lg;
30 text_color (gray 600);
31 text_center;
32 margin_bottom (rem 3.0);
33 ] [txt "Showcase of built-in button components using GADT interface"];
34
35 (* Primary buttons section *)
36 card [
37 h2 ~styles:[
38 font_size `Xl;
39 font_weight `Semibold;
40 text_color (gray 700);
41 margin_bottom (rem 1.5);
42 ] [txt "Primary Buttons"];
43
44 div ~styles:[
45 flex;
46 flex_col;
47 margin_bottom (rem 1.0);
48 ] [
49 btn_primary ~size:`Sm [txt "Small Primary"];
50 btn_primary [txt "Default Primary"];
51 btn_primary ~size:`Lg [txt "Large Primary"];
52 ];
53 ];
54
55 (* Secondary buttons section *)
56 card [
57 h2 ~styles:[
58 font_size `Xl;
59 font_weight `Semibold;
60 text_color (gray 700);
61 margin_bottom (rem 1.5);
62 ] [txt "Secondary Buttons"];
63
64 div ~styles:[
65 flex;
66 flex_col;
67 margin_bottom (rem 1.0);
68 ] [
69 btn_secondary ~size:`Sm [txt "Small Secondary"];
70 btn_secondary [txt "Default Secondary"];
71 btn_secondary ~size:`Lg [txt "Large Secondary"];
72 ];
73 ];
74
75 (* Outline buttons section *)
76 card [
77 h2 ~styles:[
78 font_size `Xl;
79 font_weight `Semibold;
80 text_color (gray 700);
81 margin_bottom (rem 1.5);
82 ] [txt "Outline Buttons"];
83
84 div ~styles:[
85 flex;
86 flex_col;
87 ] [
88 btn_outline ~size:`Sm [txt "Small Outline"];
89 btn_outline [txt "Default Outline"];
90 btn_outline ~size:`Lg [txt "Large Outline"];
91 ];
92 ];
93 ];
94 ];
95 ] in
96 html
97
98let () =
99 let html = create_button_demo () in
100 print_string (El.to_string ~doctype:true html)