Tailwind classes in OCaml
anil.recoil.org
1(* Example 07: Comprehensive Showcase - Full application demo with GADT *)
2
3open Htmlit
4open Tailwind_html
5
6let create_showcase () =
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 "Comprehensive Showcase"];
12 El.link ~at:[At.rel "stylesheet"; At.href "comprehensive_showcase_07.css"] ();
13 ];
14 El.body ~at:[classes_attr [
15 min_height screen;
16 bg_color (gray 50);
17 ]] [
18 (* Header *)
19 header ~styles:[
20 bg_color (Tailwind.Color.white);
21 shadow `Md;
22 padding (rem 1.0);
23 ] [
24 container [
25 div ~styles:[
26 flex;
27 justify_between;
28 items_center;
29 ] [
30 h1 ~styles:[
31 font_size `Xl;
32 font_weight `Bold;
33 text_color (blue 600);
34 ] [txt "TailwindOCaml"];
35
36 nav ~styles:[flex] [
37 a ~styles:[
38 padding_x (rem 1.0);
39 text_color (gray 700);
40 font_weight `Medium;
41 ] ~href:"#features" [txt "Features"];
42 a ~styles:[
43 padding_x (rem 1.0);
44 text_color (gray 700);
45 font_weight `Medium;
46 ] ~href:"#demo" [txt "Demo"];
47 a ~styles:[
48 padding_x (rem 1.0);
49 text_color (gray 700);
50 font_weight `Medium;
51 ] ~href:"#contact" [txt "Contact"];
52 ];
53 ];
54 ];
55 ];
56
57 (* Hero Section *)
58 main ~styles:[padding_y (rem 4.0)] [
59 container [
60 div ~styles:[text_center; margin_bottom (rem 4.0)] [
61 h2 ~styles:[
62 font_size `Xl3;
63 font_weight `Bold;
64 text_color (gray 800);
65 margin_bottom (rem 1.5);
66 ] [txt "Type-Safe CSS with GADT Interface"];
67
68 p ~styles:[
69 font_size `Xl;
70 text_color (gray 600);
71 margin_bottom (rem 2.0);
72 ] [txt "Build beautiful, maintainable UIs with compile-time guarantees"];
73
74 div ~styles:[flex; justify_center] [
75 btn_primary ~size:`Lg [txt "Get Started"];
76 btn_outline ~size:`Lg [txt "Learn More"];
77 ];
78 ];
79
80 (* Features Grid *)
81 section ~styles:[margin_bottom (rem 4.0)] [
82 h3 ~styles:[
83 font_size `Xl2;
84 font_weight `Bold;
85 text_color (gray 800);
86 text_center;
87 margin_bottom (rem 3.0);
88 ] [txt "Features"];
89
90 div ~styles:[
91 grid;
92 grid_cols 1;
93 gap (rem 2.0);
94 ] [
95 card [
96 h4 ~styles:[
97 font_size `Xl;
98 font_weight `Semibold;
99 text_color (blue 600);
100 margin_bottom (rem 1.0);
101 ] [txt "🎯 Type Safety"];
102 p ~styles:[text_color (gray 600)] [
103 txt "Catch styling errors at compile time with GADT-based type checking."
104 ];
105 ];
106
107 card [
108 h4 ~styles:[
109 font_size `Xl;
110 font_weight `Semibold;
111 text_color (green 600);
112 margin_bottom (rem 1.0);
113 ] [txt "⚡ Performance"];
114 p ~styles:[text_color (gray 600)] [
115 txt "Zero runtime overhead with compile-time CSS generation."
116 ];
117 ];
118
119 card [
120 h4 ~styles:[
121 font_size `Xl;
122 font_weight `Semibold;
123 text_color (purple 600);
124 margin_bottom (rem 1.0);
125 ] [txt "🔧 Developer Experience"];
126 p ~styles:[text_color (gray 600)] [
127 txt "Succinct syntax with heterogeneous lists and type inference."
128 ];
129 ];
130 ];
131 ];
132
133 (* Demo Section *)
134 section ~styles:[margin_bottom (rem 4.0)] [
135 h3 ~styles:[
136 font_size `Xl2;
137 font_weight `Bold;
138 text_color (gray 800);
139 text_center;
140 margin_bottom (rem 3.0);
141 ] [txt "Live Demo"];
142
143 card ~elevated:true [
144 h4 ~styles:[
145 font_size `Xl;
146 font_weight `Semibold;
147 text_color (gray 800);
148 margin_bottom (rem 1.5);
149 ] [txt "Interactive Component"];
150
151 div ~styles:[margin_bottom (rem 2.0)] [
152 El.label ~at:[At.for' "demo-input"; classes_attr [
153 block;
154 font_weight `Medium;
155 text_color (gray 700);
156 margin_bottom (rem 0.5);
157 ]] [txt "Try it out:"];
158 El.input ~at:[At.type' "text"; At.id "demo-input"; At.placeholder "Type something..."; classes_attr [
159 width full;
160 padding (rem 0.75);
161 border;
162 border_color (gray 300);
163 rounded `Md;
164 ]] ();
165 ];
166
167 div ~styles:[flex; justify_end] [
168 btn_secondary [txt "Cancel"];
169 btn_primary [txt "Submit"];
170 ];
171 ];
172 ];
173
174 (* Statistics *)
175 section ~styles:[margin_bottom (rem 4.0)] [
176 h3 ~styles:[
177 font_size `Xl2;
178 font_weight `Bold;
179 text_color (gray 800);
180 text_center;
181 margin_bottom (rem 3.0);
182 ] [txt "By the Numbers"];
183
184 div ~styles:[flex; justify_between; text_center] [
185 div [
186 p ~styles:[
187 font_size `Xl3;
188 font_weight `Bold;
189 text_color (blue 600);
190 ] [txt "100%"];
191 p ~styles:[text_color (gray 600)] [txt "Type Safe"];
192 ];
193
194 div [
195 p ~styles:[
196 font_size `Xl3;
197 font_weight `Bold;
198 text_color (green 600);
199 ] [txt "0ms"];
200 p ~styles:[text_color (gray 600)] [txt "Runtime Cost"];
201 ];
202
203 div [
204 p ~styles:[
205 font_size `Xl3;
206 font_weight `Bold;
207 text_color (purple 600);
208 ] [txt "∞"];
209 p ~styles:[text_color (gray 600)] [txt "Possibilities"];
210 ];
211 ];
212 ];
213 ];
214 ];
215
216 (* Footer *)
217 footer ~styles:[
218 bg_color (gray 800);
219 text_color (gray 200);
220 padding_y (rem 2.0);
221 text_center;
222 ] [
223 container [
224 p ~styles:[margin_bottom (rem 1.0)] [
225 txt "© 2024 TailwindOCaml. Built with type-safe GADT interface."
226 ];
227 p ~styles:[font_size `Sm; text_color (gray 400)] [
228 txt "Powered by OCaml, Tailwind CSS, and compile-time guarantees."
229 ];
230 ];
231 ];
232 ];
233 ] in
234 html
235
236let () =
237 let html = create_showcase () in
238 print_string (El.to_string ~doctype:true html)