Tailwind classes in OCaml
anil.recoil.org
1(* Example 06: Patterns and Components - Reusable components with GADT *)
2
3open Htmlit
4open Tailwind_html
5
6let create_patterns_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 "Patterns and Components"];
12 El.link ~at:[At.rel "stylesheet"; At.href "patterns_and_components_06.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 `Xl2;
22 font_weight `Bold;
23 text_color (gray 800);
24 text_center;
25 margin_bottom (rem 2.0);
26 ] [txt "Patterns and Components Demo"];
27
28 (* Container Pattern *)
29 section ~styles:[margin_bottom (rem 3.0)] [
30 h2 ~styles:[
31 font_size `Xl;
32 font_weight `Semibold;
33 text_color (gray 700);
34 margin_bottom (rem 1.5);
35 ] [txt "Container Pattern"];
36
37 card [
38 p ~styles:[text_color (gray 600)] [
39 txt "This content is inside a container pattern that centers content and provides responsive padding."
40 ];
41 ];
42 ];
43
44 (* Card Pattern *)
45 section ~styles:[margin_bottom (rem 3.0)] [
46 h2 ~styles:[
47 font_size `Xl;
48 font_weight `Semibold;
49 text_color (gray 700);
50 margin_bottom (rem 1.5);
51 ] [txt "Card Patterns"];
52
53 div ~styles:[flex; flex_col] [
54 card [
55 h3 ~styles:[
56 font_size `Lg;
57 font_weight `Semibold;
58 text_color (gray 800);
59 margin_bottom (rem 1.0);
60 ] [txt "Basic Card"];
61 p ~styles:[text_color (gray 600)] [
62 txt "A simple card with padding and shadow."
63 ];
64 ];
65
66 card ~elevated:true [
67 h3 ~styles:[
68 font_size `Lg;
69 font_weight `Semibold;
70 text_color (gray 800);
71 margin_bottom (rem 1.0);
72 ] [txt "Elevated Card"];
73 p ~styles:[text_color (gray 600)] [
74 txt "This card has a stronger shadow for emphasis."
75 ];
76 ];
77 ];
78 ];
79
80 (* Button Components *)
81 section ~styles:[margin_bottom (rem 3.0)] [
82 h2 ~styles:[
83 font_size `Xl;
84 font_weight `Semibold;
85 text_color (gray 700);
86 margin_bottom (rem 1.5);
87 ] [txt "Button Components"];
88
89 card [
90 h3 ~styles:[
91 font_size `Lg;
92 font_weight `Semibold;
93 text_color (gray 800);
94 margin_bottom (rem 1.5);
95 ] [txt "Button Variants"];
96
97 div ~styles:[flex; flex_col] [
98 div ~styles:[margin_bottom (rem 1.0)] [
99 btn_primary ~size:`Sm [txt "Small Primary"];
100 btn_primary [txt "Default Primary"];
101 btn_primary ~size:`Lg [txt "Large Primary"];
102 ];
103
104 div ~styles:[margin_bottom (rem 1.0)] [
105 btn_secondary ~size:`Sm [txt "Small Secondary"];
106 btn_secondary [txt "Default Secondary"];
107 btn_secondary ~size:`Lg [txt "Large Secondary"];
108 ];
109
110 div [
111 btn_outline ~size:`Sm [txt "Small Outline"];
112 btn_outline [txt "Default Outline"];
113 btn_outline ~size:`Lg [txt "Large Outline"];
114 ];
115 ];
116 ];
117 ];
118
119 (* List Pattern *)
120 section ~styles:[margin_bottom (rem 3.0)] [
121 h2 ~styles:[
122 font_size `Xl;
123 font_weight `Semibold;
124 text_color (gray 700);
125 margin_bottom (rem 1.5);
126 ] [txt "List Patterns"];
127
128 card [
129 h3 ~styles:[
130 font_size `Lg;
131 font_weight `Semibold;
132 text_color (gray 800);
133 margin_bottom (rem 1.0);
134 ] [txt "Feature List"];
135
136 ul ~styles:[text_color (gray 600)] [
137 li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Type-safe styling"];
138 li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Conflict prevention"];
139 li ~styles:[margin_bottom (rem 0.5)] [txt "✓ Succinct syntax"];
140 li [txt "✓ Reusable components"];
141 ];
142 ];
143 ];
144
145 (* Form Pattern *)
146 section [
147 h2 ~styles:[
148 font_size `Xl;
149 font_weight `Semibold;
150 text_color (gray 700);
151 margin_bottom (rem 1.5);
152 ] [txt "Form Patterns"];
153
154 card [
155 h3 ~styles:[
156 font_size `Lg;
157 font_weight `Semibold;
158 text_color (gray 800);
159 margin_bottom (rem 1.5);
160 ] [txt "Simple Form"];
161
162 div ~styles:[flex; flex_col] [
163 div ~styles:[margin_bottom (rem 1.5)] [
164 El.label ~at:[At.for' "name"; classes_attr [
165 block;
166 font_weight `Medium;
167 text_color (gray 700);
168 margin_bottom (rem 0.5);
169 ]] [txt "Name"];
170 El.input ~at:[At.type' "text"; At.id "name"; classes_attr [
171 width full;
172 padding (rem 0.5);
173 border;
174 border_color (gray 300);
175 rounded `Md;
176 ]] ();
177 ];
178
179 div ~styles:[margin_bottom (rem 1.5)] [
180 El.label ~at:[At.for' "email"; classes_attr [
181 block;
182 font_weight `Medium;
183 text_color (gray 700);
184 margin_bottom (rem 0.5);
185 ]] [txt "Email"];
186 El.input ~at:[At.type' "email"; At.id "email"; classes_attr [
187 width full;
188 padding (rem 0.5);
189 border;
190 border_color (gray 300);
191 rounded `Md;
192 ]] ();
193 ];
194
195 btn_primary [txt "Submit"];
196 ];
197 ];
198 ];
199 ];
200 ];
201 ] in
202 html
203
204let () =
205 let html = create_patterns_demo () in
206 print_string (El.to_string ~doctype:true html)