create-chai-tailwind-app 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/template/index.html +175 -12
package/package.json
CHANGED
package/template/index.html
CHANGED
|
@@ -1,27 +1,190 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
|
-
<title>
|
|
4
|
+
<title>ChaiTailwind</title>
|
|
5
5
|
<link rel="stylesheet" href="./dist/chai.css">
|
|
6
6
|
</head>
|
|
7
7
|
|
|
8
|
-
<body class="chai-bg-gray-
|
|
8
|
+
<body class="chai-bg-gray-100 chai-dark-bg-gray-900 chai-text-gray-900 chai-dark-text-white">
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</h1>
|
|
10
|
+
<!-- NAVBAR -->
|
|
11
|
+
<header class="chai-flex chai-justify-between chai-items-center chai-p-20 chai-glass">
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
Hello World
|
|
16
|
-
</div>
|
|
13
|
+
<h2 class="chai-fw-bold chai-fs-24">☕ ChaiTailwind</h2>
|
|
17
14
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
<div class="chai-flex chai-gap-10">
|
|
16
|
+
<button class="chai-btn">
|
|
17
|
+
Docs
|
|
18
|
+
</button>
|
|
19
|
+
|
|
20
|
+
<button onclick="toggleDark()" class="chai-btn chai-bg-blue-500 chai-text-white">
|
|
21
|
+
🌙
|
|
22
|
+
</button>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
</header>
|
|
26
|
+
|
|
27
|
+
<!-- HERO -->
|
|
28
|
+
<section class="chai-flex chai-items-center chai-justify-center chai-min-h-400 chai-bg-gradient-dark-indigo">
|
|
29
|
+
|
|
30
|
+
<div class="chai-hero-content chai-text-center chai-max-w-800 chai-mx-auto chai-p-20">
|
|
31
|
+
|
|
32
|
+
<p class="chai-text-white chai-mb-10">
|
|
33
|
+
Lightweight CSS Engine
|
|
34
|
+
</p>
|
|
35
|
+
|
|
36
|
+
<h1 class="chai-fw-bold chai-text-white chai-mb-20" style="font-size: 40px;">
|
|
37
|
+
Build beautiful UI<br>
|
|
38
|
+
without writing CSS
|
|
39
|
+
</h1>
|
|
40
|
+
|
|
41
|
+
<p class="chai-text-white chai-mb-20">
|
|
42
|
+
A modern utility-first engine powered by JavaScript.
|
|
43
|
+
</p>
|
|
44
|
+
|
|
45
|
+
<div class="chai-flex chai-justify-center chai-gap-10">
|
|
46
|
+
|
|
47
|
+
<button class="chai-btn chai-bg-white chai-dark-bg-gray-800 chai-text-gray-900 chai-dark-text-white chai-shadow-premium">
|
|
48
|
+
Get Started
|
|
49
|
+
</button>
|
|
50
|
+
|
|
51
|
+
<button class="chai-btn chai-bg-blue-500 chai-dark-bg-blue-400 chai-text-white chai-shadow-premium">
|
|
52
|
+
GitHub
|
|
53
|
+
</button>
|
|
54
|
+
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
</section>
|
|
60
|
+
|
|
61
|
+
<!-- FEATURES -->
|
|
62
|
+
<section class="chai-p-40">
|
|
63
|
+
|
|
64
|
+
<div class="chai-max-w-900 chai-mx-auto chai-text-center chai-mb-30">
|
|
65
|
+
|
|
66
|
+
<h2 class="chai-fw-bold chai-mb-10" style="font-size: 28px;">
|
|
67
|
+
Designed for developers
|
|
68
|
+
</h2>
|
|
69
|
+
|
|
70
|
+
<p class="chai-text-muted">
|
|
71
|
+
Clean architecture. Fast builds. No unnecessary complexity.
|
|
72
|
+
</p>
|
|
73
|
+
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div class="chai-flex chai-justify-center chai-gap-20 chai-flex-wrap">
|
|
77
|
+
|
|
78
|
+
<div class="chai-w-250 chai-p-20 chai-bg-white chai-dark-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
79
|
+
<h3 class="chai-fw-bold chai-mb-10">⚡ Fast</h3>
|
|
80
|
+
<p class="chai-text-muted">Only generates what you use.</p>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="chai-w-250 chai-p-20 chai-bg-white chai-dark-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
84
|
+
<h3 class="chai-fw-bold chai-mb-10">🧠 Smart</h3>
|
|
85
|
+
<p class="chai-text-muted">Plugin-based and extensible.</p>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="chai-w-250 chai-p-20 chai-bg-white chai-dark-bg-gray-800 chai-rounded-10 chai-shadow-premium">
|
|
89
|
+
<h3 class="chai-fw-bold chai-mb-10">🎯 Simple</h3>
|
|
90
|
+
<p class="chai-text-muted">Write UI directly in HTML.</p>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
</section>
|
|
96
|
+
|
|
97
|
+
<!-- SIMPLE TO USE -->
|
|
98
|
+
<section class="chai-p-40 chai-bg-gray-50 chai-dark-bg-gray-800">
|
|
99
|
+
|
|
100
|
+
<div class="chai-max-w-900 chai-mx-auto">
|
|
101
|
+
|
|
102
|
+
<h2 class="chai-fs-24 chai-fw-bold chai-mb-20 chai-text-center">
|
|
103
|
+
Simple to use
|
|
104
|
+
</h2>
|
|
105
|
+
|
|
106
|
+
<div class="chai-flex chai-flex-wrap chai-gap-20 chai-justify-center">
|
|
107
|
+
|
|
108
|
+
<!-- BUTTON -->
|
|
109
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
110
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
111
|
+
Button
|
|
112
|
+
</p>
|
|
113
|
+
|
|
114
|
+
<div class="chai-flex chai-justify-center">
|
|
115
|
+
<div class="chai-bg-blue-500 chai-dark-bg-blue-400 chai-text-white chai-p-10 chai-rounded-10 chai-hover-bg-blue-600">
|
|
116
|
+
Click Me
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<!-- CARD -->
|
|
122
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
123
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
124
|
+
Card
|
|
125
|
+
</p>
|
|
126
|
+
|
|
127
|
+
<div class="chai-bg-gray-100 chai-dark-bg-gray-800 chai-p-20 chai-rounded-10 chai-shadow-soft">
|
|
128
|
+
Card UI
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<!-- FLEX -->
|
|
133
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
134
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
135
|
+
Flex
|
|
136
|
+
</p>
|
|
137
|
+
|
|
138
|
+
<div class="chai-flex chai-justify-between chai-bg-gray-100 chai-dark-bg-gray-800 chai-p-10 chai-rounded-10">
|
|
139
|
+
<span>Left</span>
|
|
140
|
+
<span>Right</span>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<!-- GRADIENT -->
|
|
145
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
146
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
147
|
+
Gradient
|
|
148
|
+
</p>
|
|
149
|
+
|
|
150
|
+
<div class="chai-bg-gradient-green-400-blue-500 chai-text-white chai-p-20 chai-rounded-10 chai-text-center">
|
|
151
|
+
Gradient Box
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<!-- DARK -->
|
|
156
|
+
<div class="chai-w-300 chai-p-20 chai-bg-white chai-dark-bg-gray-900 chai-rounded-10">
|
|
157
|
+
<p class="chai-mb-10 chai-text-gray-500 chai-dark-text-gray-400">
|
|
158
|
+
Dark UI
|
|
159
|
+
</p>
|
|
160
|
+
|
|
161
|
+
<div class="chai-bg-gray-100 chai-dark-bg-gray-800 chai-text-gray-900 chai-dark-text-white chai-p-20 chai-rounded-10">
|
|
162
|
+
Dark Mode Ready
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
</section>
|
|
171
|
+
|
|
172
|
+
<!-- CTA -->
|
|
173
|
+
<section class="chai-p-40 chai-text-center">
|
|
174
|
+
|
|
175
|
+
<h2 class="chai-fw-bold chai-mb-20" style="font-size: 28px;">
|
|
176
|
+
Start building today
|
|
177
|
+
</h2>
|
|
178
|
+
|
|
179
|
+
<button class="chai-btn chai-bg-blue-500 chai-dark-bg-blue-400 chai-text-white chai-shadow-premium">
|
|
180
|
+
Get Started
|
|
181
|
+
</button>
|
|
182
|
+
|
|
183
|
+
</section>
|
|
21
184
|
|
|
22
185
|
<script>
|
|
23
186
|
function toggleDark() {
|
|
24
|
-
document.
|
|
187
|
+
document.documentElement.classList.toggle("dark");
|
|
25
188
|
}
|
|
26
189
|
</script>
|
|
27
190
|
|