Tailwind classes in OCaml
anil.recoil.org
1(* Example 04: Responsive Design - GADT interface showcase *)
2
3open Htmlit
4open Tailwind_html
5
6let create_responsive_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 "Responsive Design"];
12 El.link ~at:[At.rel "stylesheet"; At.href "responsive_design_04.css"] ();
13 ];
14 El.body ~at:[classes_attr [
15 min_height screen;
16 bg_color (gray 50);
17 padding (rem 1.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 "Responsive Design 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 "Adaptive layouts using GADT interface"];
34
35 (* Mobile-first card grid *)
36 section ~styles:[margin_bottom (rem 3.0)] [
37 h2 ~styles:[
38 font_size `Xl;
39 font_weight `Semibold;
40 text_color (gray 700);
41 margin_bottom (rem 2.0);
42 ] [txt "Responsive Card Grid"];
43
44 (* Using CSS Grid - starts as 1 column on mobile, would be 3 columns on larger screens *)
45 div ~styles:[
46 grid;
47 grid_cols 1; (* Mobile: 1 column, but ideally would be responsive *)
48 gap (rem 1.5);
49 ] [
50 (* Card 1 *)
51 card [
52 h3 ~styles:[
53 font_size `Lg;
54 font_weight `Semibold;
55 text_color (blue 600);
56 margin_bottom (rem 1.0);
57 ] [txt "Card 1"];
58 p ~styles:[text_color (gray 600)] [
59 txt "This card stacks vertically on mobile and forms a grid on larger screens."
60 ];
61 ];
62
63 (* Card 2 *)
64 card [
65 h3 ~styles:[
66 font_size `Lg;
67 font_weight `Semibold;
68 text_color (green 600);
69 margin_bottom (rem 1.0);
70 ] [txt "Card 2"];
71 p ~styles:[text_color (gray 600)] [
72 txt "Responsive design ensures optimal viewing across all devices."
73 ];
74 ];
75
76 (* Card 3 *)
77 card [
78 h3 ~styles:[
79 font_size `Lg;
80 font_weight `Semibold;
81 text_color (purple 600);
82 margin_bottom (rem 1.0);
83 ] [txt "Card 3"];
84 p ~styles:[text_color (gray 600)] [
85 txt "Mobile-first approach with progressive enhancement."
86 ];
87 ];
88 ];
89 ];
90
91 (* Responsive navigation *)
92 section ~styles:[margin_bottom (rem 3.0)] [
93 h2 ~styles:[
94 font_size `Xl;
95 font_weight `Semibold;
96 text_color (gray 700);
97 margin_bottom (rem 2.0);
98 ] [txt "Responsive Navigation"];
99
100 nav ~styles:[
101 bg_color (Tailwind.Color.white);
102 padding (rem 1.0);
103 rounded `Lg;
104 shadow `Md;
105 ] [
106 div ~styles:[
107 flex;
108 flex_col;
109 ] [
110 a ~styles:[
111 padding (rem 0.75);
112 text_color (gray 700);
113 font_weight `Medium;
114 ] ~href:"#" [txt "Home"];
115
116 a ~styles:[
117 padding (rem 0.75);
118 text_color (gray 700);
119 font_weight `Medium;
120 ] ~href:"#" [txt "About"];
121
122 a ~styles:[
123 padding (rem 0.75);
124 text_color (gray 700);
125 font_weight `Medium;
126 ] ~href:"#" [txt "Services"];
127
128 a ~styles:[
129 padding (rem 0.75);
130 text_color (gray 700);
131 font_weight `Medium;
132 ] ~href:"#" [txt "Contact"];
133 ];
134 ];
135 ];
136
137 (* Responsive text *)
138 section [
139 h2 ~styles:[
140 font_size `Xl;
141 font_weight `Semibold;
142 text_color (gray 700);
143 margin_bottom (rem 2.0);
144 ] [txt "Responsive Typography"];
145
146 card [
147 h3 ~styles:[
148 font_size `Lg;
149 font_weight `Semibold;
150 text_color (gray 800);
151 margin_bottom (rem 1.0);
152 ] [txt "Adaptive Text Sizes"];
153
154 p ~styles:[
155 font_size `Base;
156 text_color (gray 600);
157 margin_bottom (rem 1.0);
158 ] [txt "This text adapts its size based on the viewport width."];
159
160 p ~styles:[
161 font_size `Sm;
162 text_color (gray 500);
163 ] [txt "Smaller supporting text that remains readable on all devices."];
164 ];
165 ];
166 ];
167 ];
168 ] in
169 html
170
171let () =
172 let html = create_responsive_demo () in
173 print_string (El.to_string ~doctype:true html)