Tailwind classes in OCaml
anil.recoil.org
1(* Example 05: Effects and Variants - Visual effects with GADT *)
2
3open Htmlit
4open Tailwind_html
5
6let create_effects_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 "Effects and Variants"];
12 El.link ~at:[At.rel "stylesheet"; At.href "effects_and_variants_05.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 "Effects and Variants Demo"];
27
28 (* Shadow Effects *)
29 section ~styles:[margin_bottom (rem 2.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 "Shadow Effects"];
36
37 div ~styles:[
38 grid;
39 grid_cols 1;
40 gap (rem 1.0);
41 ] [
42 div ~styles:[
43 bg_color (Tailwind.Color.white);
44 padding (rem 1.5);
45 shadow `Sm;
46 rounded `Lg;
47 margin_bottom (rem 1.0);
48 text_center;
49 ] [
50 h3 ~styles:[
51 font_weight `Semibold;
52 text_color (gray 700);
53 margin_bottom (rem 0.5);
54 ] [txt "Small Shadow"];
55 p ~styles:[
56 font_size `Sm;
57 text_color (gray 600);
58 ] [txt "shadow-sm"];
59 ];
60
61 div ~styles:[
62 bg_color (Tailwind.Color.white);
63 padding (rem 1.5);
64 shadow `Md;
65 rounded `Lg;
66 margin_bottom (rem 1.0);
67 text_center;
68 ] [
69 h3 ~styles:[
70 font_weight `Semibold;
71 text_color (gray 700);
72 margin_bottom (rem 0.5);
73 ] [txt "Medium Shadow"];
74 p ~styles:[
75 font_size `Sm;
76 text_color (gray 600);
77 ] [txt "shadow-md"];
78 ];
79
80 div ~styles:[
81 bg_color (Tailwind.Color.white);
82 padding (rem 1.5);
83 shadow `Lg;
84 rounded `Lg;
85 text_center;
86 ] [
87 h3 ~styles:[
88 font_weight `Semibold;
89 text_color (gray 700);
90 margin_bottom (rem 0.5);
91 ] [txt "Large Shadow"];
92 p ~styles:[
93 font_size `Sm;
94 text_color (gray 600);
95 ] [txt "shadow-lg"];
96 ];
97 ];
98 ];
99
100 (* Rounded Corners *)
101 section ~styles:[margin_bottom (rem 2.0)] [
102 h2 ~styles:[
103 font_size `Xl;
104 font_weight `Semibold;
105 text_color (gray 700);
106 margin_bottom (rem 1.5);
107 ] [txt "Border Radius"];
108
109 div ~styles:[
110 grid;
111 grid_cols 2;
112 gap (rem 1.0);
113 ] [
114 div ~styles:[
115 bg_color (blue 100);
116 padding (rem 1.0);
117 rounded `Sm;
118 text_center;
119 margin_bottom (rem 1.0);
120 ] [txt "Small Radius"];
121
122 div ~styles:[
123 bg_color (green 100);
124 padding (rem 1.0);
125 rounded `Md;
126 text_center;
127 margin_bottom (rem 1.0);
128 ] [txt "Medium Radius"];
129
130 div ~styles:[
131 bg_color (purple 100);
132 padding (rem 1.0);
133 rounded `Lg;
134 text_center;
135 margin_bottom (rem 1.0);
136 ] [txt "Large Radius"];
137
138 div ~styles:[
139 bg_color (yellow 100);
140 padding (rem 1.0);
141 rounded `Full;
142 text_center;
143 ] [txt "Full Radius"];
144 ];
145 ];
146
147 (* Interactive Buttons *)
148 section ~styles:[margin_bottom (rem 2.0)] [
149 h2 ~styles:[
150 font_size `Xl;
151 font_weight `Semibold;
152 text_color (gray 700);
153 margin_bottom (rem 1.5);
154 ] [txt "Interactive Buttons"];
155
156 div ~styles:[
157 grid;
158 grid_cols 1;
159 gap (rem 1.0);
160 ] [
161 btn_primary [txt "Primary Button with Hover"];
162 btn_secondary [txt "Secondary Button"];
163 btn_outline [txt "Outline Button"];
164 ];
165 ];
166
167 (* Border Effects *)
168 section [
169 h2 ~styles:[
170 font_size `Xl;
171 font_weight `Semibold;
172 text_color (gray 700);
173 margin_bottom (rem 1.5);
174 ] [txt "Border Effects"];
175
176 div ~styles:[
177 grid;
178 grid_cols 1;
179 gap (rem 1.0);
180 ] [
181 (* Regular border *)
182 div ~styles:[
183 bg_color (Tailwind.Color.white);
184 padding (rem 1.5);
185 border;
186 border_color (gray 200);
187 rounded `Lg;
188 text_center;
189 margin_bottom (rem 1.0);
190 ] [
191 h3 ~styles:[
192 font_weight `Semibold;
193 text_color (gray 700);
194 margin_bottom (rem 0.5);
195 ] [txt "Regular Border"];
196 p ~styles:[
197 font_size `Sm;
198 text_color (gray 600);
199 ] [txt "border border-gray-200"];
200 ];
201
202 (* Colored border *)
203 div ~styles:[
204 bg_color (Tailwind.Color.white);
205 padding (rem 1.5);
206 border;
207 border_color (blue 300);
208 rounded `Lg;
209 text_center;
210 ] [
211 h3 ~styles:[
212 font_weight `Semibold;
213 text_color (blue 600);
214 margin_bottom (rem 0.5);
215 ] [txt "Colored Border"];
216 p ~styles:[
217 font_size `Sm;
218 text_color (gray 600);
219 ] [txt "border border-blue-300"];
220 ];
221 ];
222 ];
223 ];
224 ];
225 ] in
226 html
227
228let () =
229 let html = create_effects_demo () in
230 print_string (El.to_string ~doctype:true html)