PageSourceSearch

https://tailwind.build/

html tailwind.build collected 2026-10-04 00:30:37 UTC 52,647 bytes, 821 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-US">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
6    <meta name="facebook-domain-verification" content="tmryps7zuwwrttyz9yvvja4rybcmom">
7    <title>Tailwind Builder | Create Tailwind templates in minutes</title>
8    <meta name="description" content="Save time with the online editor for Tailwind CSS that has a simple, intuitive drag &amp; drop interface and 240+ ready-made UI components.">
9
10    <meta property="og:type" content="product"/>
11    <meta property="og:title" content="Tailwind Builder"/>
12    <meta property="og:description" content="Create beautiful Tailwind templates in minutes">
13    <meta property="og:image" content="https://tailwind.build/static/img/1200-tailwind.webp">
14    <meta property="og:url" content="https://tailwind.build/"/>
15
16    <meta name="twitter:card" content="summary_large_image">
17    <meta name="twitter:title" content="Tailwind Builder">
18    <meta name="twitter:description" content="Create beautiful Tailwind templates in minutes">
19    <meta name="twitter:image:src" content="https://tailwind.build/static/img/1200-tailwind.webp">
20
21    <link rel="prefetch" href="https://shuffle.dev">
22    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-tailwind.png">
23    
24            <link rel="stylesheet" href="/static/build/css/tailwind.bffded44.css">
25        <link rel="stylesheet" href="/vendor/tailwind/tailwind.min.css?v=dag">
26        <link rel="stylesheet" href="/vendor/icons/css/fontello.css?v=dag3">
27        <link rel="stylesheet" href="/css/switch-modal-styles.css">
28        <link rel="stylesheet" href="/css/fonts/font.css">
vendor: 73 bytes, lines 28-30
28
29    
30    <script async src="https://www.googletagmanager.com/gtag/js?id=
30UA-125842727-6
vendor: 16 bytes, lines 30-31
30"></script>
31    
31<script>
32        
vendor: 176 bytes, lines 32-39
32window.dataLayer = window.dataLayer || [];
33
34        function gtag() {
35            dataLayer.push(arguments);
36        }
37
38        gtag('js', new Date());
39        gtag('config', '
39UA-125842727-6
vendor: 8 bytes, lines 39-40
39');
40    
40</script>
40
41
42            <!-- Facebook Pixel Code -->
43        
43<script>
vendor: 755 bytes, lines 43-62
43
44            !function (f, b, e, v, n, t, s) {
45                if (f.fbq) return;
46                n = f.fbq = function () {
47                    n.callMethod ?
48                        n.callMethod.apply(n, arguments) : n.queue.push(arguments)
49                };
50                if (!f._fbq) f._fbq = n;
51                n.push = n;
52                n.loaded = !0;
53                n.version = '2.0';
54                n.queue = [];
55                t = b.createElement(e);
56                t.async = !0;
57                t.src = v;
58                s = b.getElementsByTagName(e)[0];
59                s.parentNode.insertBefore(t, s)
60            }(window, document, 'script',
61                'https://connect.facebook.net/en_US/fbevents.js');
62            fbq('init', '
62439629507145371
vendor: 50 bytes, lines 62-64
62');
63            fbq('track', 'PageView');
64        
64</script>
64
65        <!-- End Facebook Pixel Code -->
66    </head>
67
68<body class="antialiased text-gray-900 ">
69<div class="relative">
70    
71
72<div class="ld-bar">
73    <div class="ld-bar__inner">
74        <span class="ld-bar__badge">Lifetime deal &middot; ends October 5</span>
75        <span class="ld-bar__offer">
76            <span class="ld-bar__headline">Pay once. Build forever.</span>
77            <span class="ld-bar__price">$199</span>
78            <span class="ld-bar__price-old">$349</span>
79            <span class="ld-bar__save">Save $150</span>
80        </span>
81        <div class="price-counter ld-bar__counter" aria-label="Time left until the price goes up to $349">
82            <div><span class="price-days">00</span><small>days</small></div>
83            <div><span class="price-hours">00</span><small>hrs</small></div>
84            <div><span class="price-minutes">00</span><small>min</small></div>
85            <div><span class="price-seconds">00</span><small>sec</small></div>
86        </div>
87        <a href="https://shuffle.dev/pricing" class="ld-bar__cta">Claim lifetime deal for $199</a>
88    </div>
89</div>
90<style>
91    .ld-bar {
92        display: none;
93        background: #0f172a;
94        color: #fff;
95        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
96        font-size: 14px;
97        line-height: 1.25;
98    }
99
100    .ld-bar *,
101    .ld-bar *::before,
102    .ld-bar *::after {
103        box-sizing: border-box;
104        margin: 0;
105    }
106
107    .ld-bar__inner {
108        display: flex;
109        align-items: center;
110        justify-content: center;
111        gap: 16px;
112        padding: 10px 24px;
113    }
114
115    .ld-bar__badge {
116        padding: 4px 8px;
117        font-size: 12px;
118        font-weight: 700;
119        letter-spacing: .025em;
120        text-transform: uppercase;
121        color: #0f172a;
122        background: #ffc100;
123        border-radius: 4px;
124    }
125
126    .ld-bar__offer {
127        display: inline-flex;
128        align-items: baseline;
129        gap: 8px;
130    }
131
132    .ld-bar__headline {
133        font-size: 16px;
134        font-weight: 600;
135    }
136
137    .ld-bar__price {
138        font-size: 20px;
139        font-weight: 700;
140        color: #ffc100;
141    }
142
143    .ld-bar__price-old {
144        font-size: 14px;
145        font-weight: 500;
146        color: #94a3b8;
147        text-decoration: line-through;
148    }
149
150    .ld-bar__save {
151        padding: 2px 6px;
152        font-size: 12px;
153        font-weight: 700;
154        color: #4ade80;
155        border: 1px solid #4ade80;
156        border-radius: 4px;
157    }
158
159    .ld-bar__counter {
160        display: grid;
161        grid-template-columns: repeat(4, 44px);
162        gap: 4px;
163        text-align: center;
164    }
165
166    .ld-bar__counter div {
167        padding: 4px 0;
168        line-height: 1;
169        background: #1e293b;
170        border: 1px solid #334155;
171        border-radius: 4px;
172    }
173
174    .ld-bar__counter span {
175        display: block;
176        font-size: 14px;
177        font-weight: 700;
178        font-variant-numeric: tabular-nums;
179        color: #fff;
180    }
181
182    .ld-bar__counter small {
183        font-size: 12px;
184        color: #94a3b8;
185    }
186
187    .ld-bar .ld-bar__cta {
188        display: inline-flex;
189        align-items: center;
190        padding: 10px 16px;
191        font-size: 14px;
192        font-weight: 700;
193        line-height: 1;
194        color: #0f172a;
195        text-decoration: none;
196        background: #ffc100;
197        border-radius: 9999px;
198        transition: background-color .1s;
199    }
200
201    .ld-bar .ld-bar__cta:hover,
202    .ld-bar .ld-bar__cta:focus {
203        color: #0f172a;
204        text-decoration: none;
205        background: #facc15;
206    }
207
208    @media (min-width: 768px) {
209        .ld-bar {
210            display: block;
211        }
212    }
213
214    @media (max-width: 1279px) {
215        .ld-bar__badge {
216            display: none;
217        }
218    }
219
220    @media (max-width: 1023px) {
221        .ld-bar__offer {
222            display: none;
223        }
224    }
225</style>
226
227<nav class="tailwind-menu z-50 sticky top-0 w-full p-4 bg-white shadow lg:shadow-none">
228    <div class="flex flex-wrap items-center justify-between container mx-auto px-4">
229        <div class="flex flex-shrink-0 mr-12">
230            <a href="/">
231                <img src="/static/img/shuffle-frameworks/shuffle-for-tailwind-color.svg" style="height: 40px" height="40" alt="Shuffle for Tailwind CSS">
232            </a>
233        </div>
234                <div class="block lg:hidden">
235            <button class="tailwind-burger flex items-center px-3 py-2 border rounded text-blue-700 border-blue-700"><svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg></button>
236        </div>
237        <div class="submenu w-full hidden flex-grow lg:flex lg:items-center lg:w-auto">
238            <div class="lg:mr-auto">
239                <a class="block lg:inline-block mt-4 lg:mt-0 mr-10 text-gray-700 hover:text-blue-700 font-semibold" href="/#how-it-works" data-section="how-it-works">How it works</a>
240                <a class="block lg:inline-block mt-4 lg:mt-0 mr-10 text-gray-700 hover:text-blue-700 font-semibold" href="/#features" data-section="features">Features</a>
241                <a class="block lg:inline-block mt-4 lg:mt-0 mr-10 text-gray-700 hover:text-blue-700 font-semibold" href="https://shuffle.dev/components/tailwind">Components</a>
242                <a class="hidden xl:inline-block mt-4 lg:mt-0 mr-10 text-gray-700 hover:text-blue-700 font-semibold" href="https://shuffle.dev/ai-website-redesign">AI Website Redesign</a>
243                <a class="block lg:inline-block mt-4 lg:mt-0 text-gray-700 hover:text-blue-700 font-semibold" href="/#purchase" data-section="purchase">Pricing</a>
244            </div>
245            <div>
246                                <a href="https://shuffle.dev/login?redirect=tailwind-builder" class="block lg:inline mt-4 lg:mt-0 text-gray-700 hover:text-blue-700 font-semibold">Log in</a>
247                <a href="https://shuffle.dev/new?editor=tailwind" class="inline-block py-3 px-6 mt-4 lg:mt-0 lg:ml-6 leading-none text-white font-semibold bg-blue-600 hover:bg-blue-700 rounded shadow">Try Demo</a>
248                            </div>
249        </div>
250            </div>
251</nav>
252
253<style type="text/css">
254.border-blue-padding {
255    position: relative;
256    padding: 3px;
257    background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) 0% 0% / 100% 100% padding-box padding-box, linear-gradient(90deg, rgb(145, 148, 255), rgb(1, 194, 255), rgb(1, 253, 188)) border-box border-box;
258    border-width: 2px;
259    border-style: solid;
260    border-color: rgba(0, 0, 0, 0);
261    border-image: initial;
262    border-radius: 8px;
263}
264
265.btn-publish-border {
266    cursor: pointer;
267    color: #fff;
268    background: linear-gradient(97deg, #6d70e8, #00abe0 51.04%, #0bd4a0);
269    line-height: 16px;
270    border-radius: 6px;
271    font-weight: 600;
272    padding: 12px 18px;
273    font-size: 14px;
274}
275
276.btn-publish-border:hover {
277    background: -webkit-gradient(linear, left top, left bottom, from(#0d172a), to(#0d172a)) padding-box, -webkit-gradient(linear, left top, right top, from(#9194fe), color-stop(#00c2fe), to(#01fdbc)) border-box;
278    background: linear-gradient(#0d172a, #0d172a) padding-box, linear-gradient(to right, #9194fe, #00c2fe, #01fdbc) border-box;
279}
280
281.btn-publish-border-small {
282    padding: 10px 9px;
283    font-size: 14px;
284}
285</style>
286
287<section class="pt-16 pb-32 md:pb-40 px-4 text-center">
288    <div class="w-full max-w-5xl mx-auto mb-16">
289        <h1 class="text-4xl md:text-5xl font-medium leading-tight tracking-wide">Create <span class="text-underline-color">Tailwind</span> websites &amp; templates in&nbsp;minutes</h1>
290        <p class="max-w-3xl mx-auto text-xl md:text-2xl mt-6 mb-8 tracking-wide font-light text-gray-600">
291            The only product for <strong class="font-semibold text-gray-600">Tailwind CSS</strong> that includes an&nbsp;AI Visual Editor, 40+&nbsp;beautiful ready-made styles, and 7,300+ UI components.
292        </p>
293        <a href="https://shuffle.dev/new?editor=tailwind" class="inline-block py-4 px-8 leading-none text-white font-semibold bg-blue-600 hover:bg-blue-700 rounded shadow">Try Demo</a>
294        <div class="hidden md:block text-center mx-auto md:mt-10">
295            <div class="max-w-3xl mx-auto flex items-center justify-center mb-6">
296                <div class="border-t border-secondary w-16 lg:w-24"></div>
297                <span class="block mx-4 text-xs text-secondary">EXPORT CODE TO THE TECH YOU LOVE</span>
298                <div class="border-t border-secondary w-16 lg:w-24"></div>
299            </div>
300            <div class="flex flex-wrap items-center justify-center -mb-4 -mx-4">
301                <div class="mb-4 mr-6 flex items-center font-semibold text-base">
302                    <div class="w-8 h-8 mr-2 bg-gray-100 shadow-circle flex items-center justify-center rounded-full">
303                        <img class="h-3 w-auto" src="/vendor/shuffle/img/logos/tailwind-css.svg?v=1"
304                            width="40" height="20" alt="">
305                    </div>
306                    Tailwind CSS
307                </div>
308                <img class="hidden md:block h-2 mb-4 mr-6" src="/vendor/shuffle/img/icons/icon-x.svg"
309                    alt="">
310                <div
311                    class="relative mb-4 mr-6 flex items-center font-semibold text-base">
312                    <div class="w-8 h-8 mr-2 bg-gray-100 shadow-circle flex items-center justify-center rounded-full">
313                        <img src="/static/img/icons/nextjs-icon.webp" alt="" class="h-4 w-4">
314                    </div>
315                    <span>Next.js</span>
316                </div>
317                <img class="hidden md:block h-2 mb-4 mr-6" src="/vendor/shuffle/img/icons/icon-x.svg"
318                    alt="">
319                <div
320                    class="relative mb-4 mr-6 flex items-center font-semibold text-base">
321                    <div class="w-8 h-8 mr-2 bg-gray-100 shadow-circle flex items-center justify-center rounded-full">
322                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-4 w-4">
323                            <rect width="256" height="256" fill="none"></rect>
324                            <line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor"
325                                stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line>
326                            <line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor"
327                                stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line>
328                        </svg>
329                    </div>
330                    <span class="font-bold">shadcn/ui</span>
331                </div>
332                <img class="hidden md:block h-2 mb-4 mr-6" src="/vendor/shuffle/img/icons/icon-x.svg"
333                    alt="">
334                <div class="mb-4 sm:mr-6 flex items-center font-semibold text-base">
335                    <div class="w-8 h-8 mr-2 bg-gray-100 shadow-circle flex items-center justify-center rounded-full">
336                        <svg class="text-red-400" width="16" height="16" viewBox="0 0 50 52" xmlns="http://www.w3.org/2000/svg">
337                            <path d="M49.626 11.564a.809.809 0 0 1 .028.209v10.972a.8.8 0 0 1-.402.694l-9.209 5.302V39.25c0 .286-.152.55-.4.694L20.42 51.01c-.044.025-.092.041-.14.058-.018.006-.035.017-.054.022a.805.805 0 0 1-.41 0c-.022-.006-.042-.018-.063-.026-.044-.016-.09-.03-.132-.054L.402 39.944A.801.801 0 0 1 0 39.25V6.334c0-.072.01-.142.028-.21.006-.023.02-.044.028-.067.015-.042.029-.085.051-.124.015-.026.037-.047.055-.071.023-.032.044-.065.071-.093.023-.023.053-.04.079-.06.029-.024.055-.05.088-.069h.001l9.61-5.533a.802.802 0 0 1 .8 0l9.61 5.533h.002c.032.02.059.045.088.068.026.02.055.038.078.06.028.029.048.062.072.094.017.024.04.045.054.071.023.04.036.082.052.124.008.023.022.044.028.068a.809.809 0 0 1 .028.209v20.559l8.008-4.611v-10.51c0-.07.01-.141.028-.208.007-.024.02-.045.028-.068.016-.042.03-.085.052-.124.015-.026.037-.047.054-.071.024-.032.044-.065.072-.093.023-.023.052-.04.078-.06.03-.024.056-.05.088-.069h.001l9.611-5.533a.801.801 0 0 1 .8 0l9.61 5.533c.034.02.06.045.09.068.025.02.054.038.077.06.028.029.048.062.072.094.018.024.04.045.054.071.023.039.036.082.052.124.009.023.022.044.028.068zm-1.574 10.718v-9.124l-3.363 1.936-4.646 2.675v9.124l8.01-4.611zm-9.61 16.505v-9.13l-4.57 2.61-13.05 7.448v9.216l17.62-10.144zM1.602 7.719v31.068L19.22 48.93v-9.214l-9.204-5.209-.003-.002-.004-.002c-.031-.018-.057-.044-.086-.066-.025-.02-.054-.036-.076-.058l-.002-.003c-.026-.025-.044-.056-.066-.084-.02-.027-.044-.05-.06-.078l-.001-.003c-.018-.03-.029-.066-.042-.1-.013-.03-.03-.058-.038-.09v-.001c-.01-.038-.012-.078-.016-.117-.004-.03-.012-.06-.012-.09v-.002-21.481L4.965 9.654 1.602 7.72zm8.81-5.994L2.405 6.334l8.005 4.609 8.006-4.61-8.006-4.608zm4.164 28.764l4.645-2.674V7.719l-3.363 1.936-4.646 2.675v20.096l3.364-1.937zM39.243 7.164l-8.006 4.609 8.006 4.609 8.005-4.61-8.005-4.608zm-.801 10.605l-4.646-2.675-3.363-1.936v9.124l4.645 2.674 3.364 1.937v-9.124zM20.02 38.33l11.743-6.704 5.87-3.35-8-4.606-9.211 5.303-8.395 4.833 7.993 4.524z" fill="currentColor" fill-rule="evenodd"></path>
338                        </svg>
339                    </div>
340                    Laravel
341                </div>
342                <img class="hidden md:block h-2 mb-4 mr-6" src="/vendor/shuffle/img/icons/icon-x.svg"
343                    alt="">
344                <div
345                    class="mb-4 flex items-center font-semibold text-base">
346                    <div class="w-8 h-8 mr-2 bg-gray-100 shadow-circle flex items-center justify-center rounded-full">
347                        <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
348	 width="16" height="16" viewBox="0 0 97.75 97.75" xml:space="preserve"
349	>
350<g>
351	<g>
352		<path d="M69.682,47.319c0-3.81-1.367-6.447-2.539-8.501c-1.563-2.539-3.029-4.688-3.029-7.228c0-2.834,2.15-5.471,5.178-5.471
353			c0.136,0,0.268,0.017,0.398,0.024c-5.483-5.023-12.789-8.091-20.812-8.091c-10.769,0-20.241,5.524-25.753,13.893
354			c0.723,0.021,1.405,0.037,1.984,0.037c3.224,0,8.214-0.392,8.214-0.392c1.661-0.099,1.857,2.343,0.198,2.539
355			c0,0-1.67,0.196-3.527,0.293l11.222,33.389l6.746-20.229l-4.803-13.157c-1.659-0.097-3.232-0.293-3.232-0.293
356			c-1.66-0.098-1.466-2.637,0.195-2.539c0,0,5.09,0.391,8.117,0.391c3.224,0,8.216-0.391,8.216-0.391
357			c1.663-0.098,1.856,2.342,0.196,2.539c0,0-1.674,0.196-3.527,0.293l11.139,33.133l3.074-10.272
358			C68.669,53.02,69.682,49.957,69.682,47.319z"/>
359		<path d="M18.054,48.874c0,12.2,7.091,22.743,17.372,27.739L20.722,36.331C19.012,40.163,18.054,44.406,18.054,48.874z"/>
360		<path d="M49.417,51.57l-9.249,26.871c2.762,0.812,5.682,1.257,8.708,1.257c3.589,0,7.031-0.621,10.235-1.748
361			c-0.084-0.132-0.158-0.271-0.221-0.425L49.417,51.57z"/>
362		<path d="M64.37,75.516c9.164-5.343,15.327-15.271,15.327-26.641c0.001-5.359-1.368-10.397-3.776-14.788
363			c0.134,0.981,0.208,2.036,0.208,3.169c0,3.128-0.583,6.644-2.344,11.04L64.37,75.516z"/>
364		<path d="M48.875,0C21.882,0,0,21.882,0,48.875S21.882,97.75,48.875,97.75S97.75,75.868,97.75,48.875S75.868,0,48.875,0z
365			 M48.876,83.156c-18.902,0-34.281-15.379-34.281-34.282c0-18.902,15.378-34.28,34.281-34.28c18.901,0,34.278,15.378,34.278,34.28
366			C83.154,67.777,67.777,83.156,48.876,83.156z"/>
367	</g>
368</g>
369</svg>
370                    </div>
371                    WordPress
372                </div>
373            </div>
374        </div>
375    </div>
376
377    <div class="w-full max-w-3xl mx-auto rounded shadow-2xl" id="how-it-works">
378        <div id="hero-video-wrapper">
379             <img src="https://static.shuffle.dev/files/1692477152/shuffle-hero.jpeg" alt="" class="rounded-xl">
380        </div>
381
382        
382<script>
383        const hw = document.getElementById('hero-video-wrapper');
384        if (hw) hw.innerHTML = '<video poster="https://static.shuffle.dev/files/1692477152/shuffle-hero.jpeg" id="shuffle-video" muted="" playsinline="" autoplay="" loop="" src="https://static.shuffle.dev/files/1692476908/shuffle-hero.mp4" class="rounded-xl"></video>';
385        </script>
385
386    </div>
387</section>
388
389
390<section class="pt-40 pb-24 px-4 -mt-64 text-white bg-blue-600">
391    <div class="max-w-2xl lg:max-w-6xl mx-auto">
392        <div class="flex flex-wrap lg:-mx-8">
393            <div class="lg:w-1/3 lg:px-8 mb-10 lg:mb-0">
394                <h3 class="text-lg lg:text-2xl mb-4 font-semibold"><span class="inline-flex items-center justify-center h-8 w-8 mr-2 text-lg font-light border rounded-full">1</span> Choose UI components</h3>
395                <p>Create UI components with AI or use ready-made from the multipurpose library grouped into 20&nbsp;most frequently used categories.</p>
396            </div>
397            <div class="lg:w-1/3 lg:px-8 mb-10 lg:mb-0">
398                <h3 class="text-lg lg:text-2xl mb-4 font-semibold"><span class="inline-flex items-center justify-center h-8 w-8 mr-2 text-lg font-light border rounded-full">2</span> Customize Tailwind styles</h3>
399                <p>We have 290 Tailwind CSS variables in thematically connected categories to allow you to work effectively.</p>
400            </div>
401            <div class="lg:w-1/3 lg:px-8">
402                <h3 class="text-lg lg:text-2xl mb-4 font-semibold"><span class="inline-flex items-center justify-center h-8 w-8 mr-2 text-lg font-light border rounded-full">3</span> Download source code</h3>
403                <p>When you select the appropriate components and settings, you can download source files in&nbsp;order to start integrating it with back-end.</p>
404            </div>
405        </div>
406    </div>
407</section>
408
409<section class="py-16 px-4 bg-gray-100" id="features">
410    <div class="text-center">
411        <span class="text-xl text-blue-600 font-semibold">Tailwind Builder</span>
412        <h2 class="text-3xl md:text-4xl mt-2 mb-16 leading-tight tracking-wide">Designed for busy developers</h2>
413    </div>
414    <div class="flex flex-wrap max-w-5xl -mx-4 md:mx-auto -mb-6">
415        <div class="md:w-1/2 px-4 mb-8">
416            <div class="h-full p-6 bg-white rounded border-t-4 border-blue-500 shadow-md">
417                <h3 class="text-2xl mb-3 font-semibold"><i class="icon-lightbulb text-blue-500"></i> Easy to use</h3>
418                <p>We know how valuable developers' time is. This is why we worked hard on the development of a tool that would be easy to use and which you could make use of without the need for any training.</p>
419            </div>
420        </div>
421        <div class="md:w-1/2 px-4 mb-8">
422            <div class="h-full p-6 bg-white rounded border-t-4 border-blue-500 shadow-md">
423                <h3 class="text-2xl mb-3 font-semibold"><i class="icon-squares text-blue-500"></i> Components library</h3>
424                <p>Build templates from library of Tailwind CSS components grouped into 20 most frequently used categories including navigations, headers and more. Choose the right components and focus on the details.</p>
425            </div>
426        </div>
427        <div class="md:w-1/2 px-4 mb-8">
428            <div class="h-full p-6 bg-white rounded border-t-4 border-blue-500 shadow-md">
429                <h3 class="text-2xl mb-3 font-semibold"><i class="icon-globe text-blue-500"></i> Online Tailwind compilation</h3>
430                <p>Tailwind CSS provides a lot of configuration options. Our&nbsp;customizer panel displays these options in thematically connected categories and it will allow you to use them effectively.</p>
431            </div>
432        </div>
433        <div class="md:w-1/2 px-4 mb-8">
434            <div class="h-full p-6 bg-white rounded border-t-4 border-blue-500 shadow-md">
435                <h3 class="text-2xl mb-3 font-semibold"><i class="icon-brush text-blue-500"></i> Convenient pickers</h3>
436                <p>All types of settings include an interface for a quicker implementation of values (color picker, Google Fonts autosuggest, shadow builder, etc.).</p>
437            </div>
438        </div>
439        <div class="md:w-1/2 px-4 mb-8">
440            <div class="h-full p-6 bg-white rounded border-t-4 border-blue-500 shadow-md">
441                <h3 class="text-2xl mb-3 font-semibold"><i class="icon-heartbeat text-blue-500"></i> Live edit</h3>
442                <p>When changing the settings in customizer panel, the Tailwind config is compiled in real time, and you can follow the changes live.</p>
443            </div>
444        </div>
445        <div class="md:w-1/2 px-4 mb-8">
446            <div class="h-full p-6 bg-white rounded border-t-4 border-blue-500 shadow-md">
447                <h3 class="text-2xl mb-3 font-semibold"><i class="icon-link-ext text-blue-500"></i> Shareable preview</h3>
448                <p>You can share the prepared project with other team members to review, or you can use a link to check the project on mobile devices.</p>
449            </div>
450        </div>
451        <div class="md:w-1/2 px-4 mb-8">
452            <div class="h-full p-6 bg-white rounded border-t-4 border-blue-500 shadow-md">
453                <h3 class="text-2xl mb-3 font-semibold"><i class="icon-file-code text-blue-500"></i> Exportable sources</h3>
454                <p>Tailwind Builder is a tool for developers. Our goal is to speed up your work. You can download source files in order to e.g. start combining front-end with back-end.</p>
455            </div>
456        </div>
457        <div class="md:w-1/2 px-4 mb-8">
458            <div class="h-full p-6 bg-white rounded border-t-4 border-blue-500 shadow-md">
459                <h3 class="text-2xl mb-3 font-semibold"><i class="icon-code text-blue-500"></i> Pure Tailwind CSS</h3>
460                <p>We do not use any external dependencies apart from those used by Tailwind CSS.</p>
461            </div>
462        </div>
463    </div>
464
465    <div class="text-center mt-16">
466        <a href="https://shuffle.dev/new?editor=tailwind" class="inline-block py-4 px-8 leading-none text-white font-semibold bg-blue-600 hover:bg-blue-700 rounded shadow">Try Demo</a>
467    </div>
468</section>
469
470<section class="relative py-48 px-4 text-white bg-blue-600 bg-fixed" style="background-image: url('/tailwind/static/img/components.png')">
471    <div class="absolute inset-0 bg-blue-500 opacity-75"></div>
472    <div class="z-10 relative max-w-3xl mx-auto text-center">
473        <h2 class="text-5xl mb-3"><strong class="text-6xl">7,300+</strong> Tailwind UI Components<sup>*</sup></h2>
474        <p class="text-lg max-w-2xl mx-auto">* All Tailwind Builder users automatically get access to <a href="https://shuffle.dev" target="_blank" class="underline" rel="noopener">Shuffle</a>. That means more than <span class="font-semibold">13,400</span> UI components in total.</p>
475    </div>
476</section>
477
478<section class="pt-24 lg:pt-24 px-4 border-b border-gray-200">
479    <div class="container mx-auto">
480        <div class="max-w-2xl mx-auto text-center">
481            <span class="text-xl text-blue-600"><span class="font-bold">Atis Shuffle</span> for Tailwind</span>
482            <h2 class="text-3xl md:text-4xl mt-4 mb-12 pb-2 leading-tight tracking-wide">The first UI library with multiple styles out-of-the-box is ready!</h2>
483        </div>
484        <div>
485            <a href="/editor" rel="noopener">
486                <img src="/tailwind/static/img/atis-shuffle.png?v=4" alt="Atis Shuffle theme preview">
487            </a>
488        </div>
489    </div>
490</section>
491
492<section class="pb-20 px-4">
493    <div class="container pt-20 lg:pt-24 mx-auto">
494        <div class="max-w-7xl mx-auto text-center">
495            <span class="text-xl text-blue-600 font-semibold">#1 Premium Bundle</span>
496            <h2 class="max-w-4xl mx-auto text-3xl md:text-4xl leading-tight tracking-wide mt-6 mb-8">Too often developers don't have time to&nbsp;implement their designs perfectly.</h2>
497            <p class="max-w-3xl mx-auto mb-8 md:mb-16 tracking-wide font-light text-gray-600">That's why we&nbsp;have built an&nbsp;editor that&nbsp;will help you move faster from building a&nbsp;layout to&nbsp;the&nbsp;refining&nbsp;stage so&nbsp;that you can have time to&nbsp;work on&nbsp;the&nbsp;details.</p>
498
499            <div class="flex flex-wrap -mx-4 mb-8 md:mb-16 text-center">
500                <div class="w-full lg:w-1/4 md:w-1/2 py-10 px-4">
501                    <a href="https://shuffle.dev/bootstrap" target="_blank" rel="noopener">
502                        <img src="/static/img/shuffle-frameworks/shuffle-for-bootstrap-color.svg" alt="Bootstrap Shuffle" style="height:50px;" class="mx-auto mb-8">
503                    </a>
504                    <a href="https://shuffle.dev/bootstrap" target="_blank" rel="noopener">
505                        <img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=142281&theme=light" alt="Bootstrap Shuffle - Bootstrap builder for busy developers | Product Hunt Embed" style="width: 202px; height: 44px;" width="202" height="44" class="mx-auto">
506                    </a>
507                </div>
508                <div class="w-full lg:w-1/4 md:w-1/2 py-10 px-4 lg:border-l">
509                    <a href="https://shuffle.dev/tailwind" target="_blank" rel="noopener">
510                        <img src="/static/img/shuffle-frameworks/shuffle-for-tailwind-color.svg" alt="Tailwind Builder" style="height:50px;" class="mx-auto mb-8">
511                    </a>
512                    <a href="https://shuffle.dev/tailwind" target="_blank" rel="noopener">
513                        <img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=173245&theme=light" alt="Tailwind Builder - Tailwind CSS editor for busy developers | Product Hunt Embed" style="width: 202px; height: 44px;" width="202" height="44" class="mx-auto">
514                    </a>
515                </div>
516                <div class="w-full lg:w-1/4 md:w-1/2 py-10 px-4 lg:border-l">
517                    <a href="https://shuffle.dev/bulma" target="_blank" rel="noopener">
518                        <img src="/static/img/shuffle-frameworks/shuffle-for-bulma-color.svg" alt="Bulma Builder" style="height:50px;" class="mx-auto mb-8">
519                    </a>
520                    <a href="https://shuffle.dev/bulma" target="_blank" rel="noopener">
521                        <img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=160607&amp;theme=light" alt="Bulma Builder - First such advanced theme builder for Bulma CSS framework | Product Hunt Embed" style="width: 202px; height: 44px;" width="202" height="44" class="mx-auto">
522                    </a>
523                </div>
524                <div class="w-full lg:w-1/4 md:w-1/2 py-10 px-4 lg:border-l">
525                    <a href="https://shuffle.dev/material-ui" target="_blank" rel="noopener">
526                        <img src="/static/img/shuffle-frameworks/shuffle-for-material-ui-color.svg" alt="Material-UI Builder" style="height:50px;" class="mx-auto mb-8">
527                    </a>
528                    <a href="https://shuffle.dev/material-ui" target="_blank" rel="noopener">
529                        <img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=271270&theme=light" alt="Material-UI Builder - React editor for busy developers | Product Hunt" style="width: 202px; height: 44px;" width="202" height="44" class="mx-auto"/>
530                    </a>
531                </div>
532            </div>
533        </div>
534        <div class="max-w-5xl mx-auto text-center">
535            <a href="/#purchase" class="text-xl text-gray-600 hover:underline" data-section="purchase">
536                Get the whole bundle (Shuffle&trade;)&nbsp;👇
537            </a>
538        </div>
539    </div>
540</section>
541
542
543<section class="relative pt-20 pb-32 px-4 bg-gray-100 purchase" id="purchase">
544            <div class="register-modal-overlay">
545    <div class="register-modal">
546        <div class="register-modal-container">
547            <div class="register-modal-logo-wrapper">
548                <a class="register-modal-logo-link" href="https://shuffle.dev">
549                    <img class="register-modal-logo" src="/img/shuffle-logo.svg" alt="">
550                </a>
551            </div>
552            <p class="register-modal-info-text"><strong>Tailwind Builder</strong> is now part of Shuffle. Switch to learn about all the new Tailwind&nbsp;CSS features, UI libraries available only in Shuffle (80+), and pricing.</p>
553            <div class="btn-shuffle-wrapper">
554                <a class="btn-shuffle" href="https://shuffle.dev">
555                    <span class="btn-shuffle__text">Switch to Shuffle</span>
556                    <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
557                        <path d="M7.95053 0.413333C7.88288 0.250434 7.75343 0.120983 7.59053 0.0533333C7.51038 0.0191726 7.42432 0.00105333 7.3372 0H0.670532C0.493721 0 0.324152 0.070238 0.199128 0.195262C0.0741036 0.320287 0.00386556 0.489856 0.00386556 0.666667C0.00386556 0.843478 0.0741036 1.01305 0.199128 1.13807C0.324152 1.2631 0.493721 1.33333 0.670532 1.33333H5.73053L0.197199 6.86C0.134713 6.92198 0.0851172 6.99571 0.0512714 7.07695C0.0174257 7.15819 0 7.24533 0 7.33333C0 7.42134 0.0174257 7.50848 0.0512714 7.58972C0.0851172 7.67096 0.134713 7.74469 0.197199 7.80667C0.259174 7.86915 0.332908 7.91875 0.414148 7.9526C0.495387 7.98644 0.582524 8.00387 0.670532 8.00387C0.75854 8.00387 0.845677 7.98644 0.926917 7.9526C1.00816 7.91875 1.08189 7.86915 1.14387 7.80667L6.67053 2.27333V7.33333C6.67053 7.51015 6.74077 7.67972 6.86579 7.80474C6.99082 7.92976 7.16039 8 7.3372 8C7.51401 8 7.68358 7.92976 7.8086 7.80474C7.93363 7.67972 8.00387 7.51015 8.00387 7.33333V0.666667C8.00281 0.579549 7.98469 0.493482 7.95053 0.413333Z" fill="white"/>
558                    </svg>
559                </a>
560            </div>
561            <img class="register-modal-editor" src="/img/editor.png" alt="">
562        </div>
563    </div>
564</div>
565        <div class="text-center max-w-3xl mx-auto mb-10">
566        <div class="inline-flex mb-4 membership-version" id="membership-version" role="group" data-editor="tailwind">
567            <label class="active cursor-pointer bg-blue-600 hover:bg-blue-500 text-white hover:text-white py-2 px-5 border border-blue-600 border-r-0 rounded-l">
568                <input type="radio" name="membership-version" id="membership-developer" autocomplete="off" value="developer" checked> Developer
569            </label>
570            <label class="cursor-pointer bg-white hover:bg-blue-500 text-blue-600 hover:text-white py-2 px-8 border border-blue-600 rounded-r">
571                <input type="radio" name="membership-version" id="membership-team" value="team" autocomplete="off"> Team
572            </label>
573        </div>
574        <h2 class="text-4xl lg:text-5xl mt-6 leading-tight">The easiest way to create beautiful Tailwind&nbsp;templates</h2>
575    </div>
576    
577    <div class="max-w-xl lg:max-w-5xl mx-auto">
578        <form action="/pricing" method="post" id="account-form" autocomplete="off">
579
580            <div class="text-center mb-12 lg:mb-8" id="billing-type">
581                <span class="form-check">
582                    <label class="inline-block mb-4 text-xl" for="billing-annual">
583                        <input type="radio" name="billing" id="billing-annual" class="mr-1" value="annual" data-price="99" data-price-team="99" checked>
584                        Annual billing <span class="hidden md:inline text-sm font-semibold text-green-500">(most popular!)</span> &nbsp;<span class="py-2 px-4 font-bold bg-yellow-400 rounded-lg billing-price">$99</span>
585                    </label>
586                </span>
587                <br class="lg:hidden">
588                <span class="form-check">
589                    <label class="text-xl md:ml-4" for="billing-monthly">
590                        <input type="radio" name="billing" id="billing-monthly" class="mr-1" value="monthly" data-price="24" data-price-team="24">
591                        Monthly billing &nbsp;<span class="py-2 px-4 font-bold bg-yellow-400 rounded-lg billing-price">$24</span>
592                    </label>
593                </span>
594            </div>
595
596            <div class="text-center text-sm text-gray-700 mb-12">
597                <p id="team-version" class="hidden mb-2 text-blue-600" style="padding-bottom: 2px">Team version allows you to create <strong>up to five</strong> accounts.</p>
598                <p class="mb-2">The selected plan includes <span class="bonus-lifetime font-semibold">yearly</span><span class="bonus-lifetime font-semibold hidden">lifetime</span><span class="bonus-monthly font-semibold hidden">monthly</span> access to&nbsp;<a href="https://shuffle.dev" target="_blank" class="underline">Shuffle</a>&trade;.</p>
599                <div class="hidden lg:block">
600                    <p class="bonus-annual">An annual subscription is best for those who create several projects per year.</p>
601                    <p class="bonus-lifetime hidden">A lifetime license is best for those who create several projects per year.</p>
602                    <p class="bonus-monthly hidden">A monthly subscription is best for those who are currently planning only one project.</p>
603                </div>
604            </div>
605
606            <div class="p-8 bg-white rounded shadow-xl">
607                <div class="flex flex-wrap content-center -mx-8">
608                    <div class="form-container w-full lg:w-1/2 px-8">
609                        <h3 class="text-3xl text-center mb-8 font-semibold copy-monthly hidden">Buy a&nbsp;Subscription</h3>
610                        <h3 class="text-3xl text-center mb-8 font-semibold copy-annual">Buy a&nbsp;Subscription</h3>
611
612                        <div class="alert alert-tailwind"></div>
613
614                        
615                        
616                        <div class="mb-6">
617                            <label class="block font-bold mb-2" for="account-email">
618                                Your e-mail
619                            </label>
620                            <input class="appearance-none block w-full py-3 px-4 mb-2 md:mb-0 leading-tight text-gray-700 bg-gray-200 focus:bg-white border border-gray-200 focus:border-gray-500 rounded focus:outline-none " type="email" name="email" id="account-email" placeholder="E-mail" value="" autocomplete="new-account" >
621                        </div>
622
623                                                <div class="mb-6">
624                            <label class="block font-bold mb-2" for="account-password">
625                                Choose a password
626                            </label>
627                            <input class="appearance-none block w-full py-3 px-4 mb-2 md:mb-0 leading-tight text-gray-700 bg-gray-200 focus:bg-white border border-gray-200 focus:border-gray-500 rounded focus:outline-none" type="password" name="password" id="account-password" placeholder="Password" autocomplete="new-password">
628                        </div>
629                        
630                        <div class="mb-6">
631                            <label class="block font-bold mb-3">
632                                Choose a payment method
633                            </label>
634                            <div class="purchase__methods flex flex-wrap md:-mx-2">
635                                <div class="w-full md:w-1/2 md:px-2 mb-2 md:mb-0">
636                                    <a href="#" data-method="stripe" class="active w-full">
637                                        <img src="/static/img/logos/cards.png" height="24" alt="Pay with card" class="mx-auto mb-2">
638                                        <small class="text-gray-600">Pay with card</small>
639                                    </a>
640                                </div>
641                                <div class="w-full md:w-1/2 md:px-2">
642                                    <a href="#" data-method="paypal" class="w-full">
643                                        <img src="/static/img/logos/paypal.png" height="24" alt="Pay with PayPal" class="mx-auto mb-2">
644                                        <small class="text-gray-600">Pay with PayPal&trade;</small>
645                                    </a>
646                                </div>
647                            </div>
648                        </div>
649
650                        <div class="mb-4">
651                            <button class="buy-license copy-annual inline-block w-full py-4 px-8 text-xl leading-none text-white font-semibold bg-blue-600 hover:bg-blue-700 rounded shadow" type="submit"><img src="/static/img/loading.webp" alt="Loading..." class="float-left hidden" width="16" height="16" style="margin-right: 12px"> Buy a Subscription <span data-price-final="99" data-price-team-final="99">$99</span> <small>/year</small></button>
652                            <button class="buy-license copy-monthly inline-block w-full py-4 px-8 text-xl leading-none text-white font-semibold bg-blue-600 hover:bg-blue-700 rounded shadow hidden" type="submit"><img src="/static/img/loading.webp" alt="Loading..." class="float-left hidden" width="16" height="16" style="margin-right: 12px"> Buy a Subscription <span data-price-final="24" data-price-team-final="24">$24</span> <small>/month</small></button>
653                            <button class="buy-license copy-lifetime inline-block w-full py-4 px-8 text-xl leading-none text-white font-semibold bg-blue-600 hover:bg-blue-700 rounded shadow hidden" type="submit"><img src="/static/img/loading.webp" alt="Loading..." class="float-left hidden" width="16" height="16" style="margin-right: 12px"> Buy a License <span data-price-final="199" data-price-team-final="199">$199</span></button>
654                        </div>
655
656                        <div class="terms-container mb-4">
657                            <div class="text-center">
658                                <label class="checkbox purchase__terms" for="terms-accept">
659                                    <input type="checkbox" id="terms-accept" name="terms" value="1">
660                                    I agree to the <a href="/tailwind/static/files/terms-of-use.pdf" target="_blank" rel="noopener" class="text-blue-700 hover:underline">terms of use</a> and <a href="/tailwind/static/files/privacy-policy.pdf" target="_blank" rel="noopener" class="text-blue-700 hover:underline">privacy policy</a>.
661                                </label>
662                            </div>
663                            <p class="help mt-2 text-center text-red-500 hidden">You must agree before submitting.</p>
664                        </div>
665                    </div>
666
667                    <div class="flex lg:w-1/2 px-8 mt-8 lg:mt-0 lg:border-l">
668                        <div class="my-auto">
669                            <div class="flex text-xl mb-5">
670                                <svg class="flex-shrink-0 w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
671                                <h5>80+ UI libraries and 13,400+ beautiful UI&nbsp;components.</h5>
672                            </div>
673                            <div class="flex text-xl mb-5">
674                                <svg class="flex-shrink-0 w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
675                                <h5>Works with Tailwind CSS 3.</h5>
676                            </div>
677                            <div class="flex text-xl mb-5">
678                                <svg class="flex-shrink-0 w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
679                                <h5>Free updates with new UI kits and styles.</h5>
680                            </div>
681                            <div class="flex text-xl mb-5">
682                                <svg class="flex-shrink-0 w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
683                                <h5>Save unlimited projects for later.</h5>
684                            </div>
685                            <div class="flex text-xl mb-5">
686                                <svg class="flex-shrink-0 w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
687                                <h5>Shuffle extension for Visual Studio Code with all UI components.</h5>
688                            </div>
689                            <div class="flex text-xl">
690                                <svg class="flex-shrink-0 w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
691                                <h5>Access to <a href="https://shuffle.dev" target="_blank" class="underline">Shuffle</a>&trade; without additional costs. Shuffle is an online editor for Tailwind CSS, Bootstrap, Bulma, and&nbsp;Material&#8209;UI.</h5>
692                            </div>
693                        </div>
694                    </div>
695                </div>
696            </div>
697        </form>
698    </div>
699</section>
700
701<section class="py-16 md:py-20 px-4">
702    <div class="max-w-5xl mx-auto mb-12 lg:mb-24 lg:pb-12 text-center border-b">
703        <h2 class="text-3xl md:text-4xl leading-tight tracking-wide mt-1 mb-2">What's new?</h2>
704        <p class="mb-2">* We link to relevant posts from the <a href="https://shuffle.dev/blog" class="underline" target="_blank" rel="noopener">Shuffle</a> blog.</p>
705        <div class="flex flex-wrap -mx-6 text-center">
706            <div class="w-full md:w-1/3 py-10 px-6">
707                <a href="https://shuffle.dev/tailwind" rel="noopener" target="_blank">
708                    <img src="https://shuffle.dev/vendor/shuffle/img/brand/open-graph.png" class="border rounded" alt="We updated the editor to work with Tailwind SS 2.0!">
709                </a>
710                <div class="mt-5">
711                    <h5 class="text-lg">
712                        <a href="https://shuffle.dev/tailwind" class="text-blue-700 hover:underline" rel="noopener" target="_blank">We combined four editors into Shuffle! Try a new visual editor! <small><sup class="icon-link-ext"></sup></small></a>
713                    </h5>
714                </div>
715            </div>
716            <div class="w-full md:w-1/3 py-10 px-6">
717                <a href="https://medium.com/@kemyd/landing-page-roast-why-your-landing-page-isnt-converting-and-how-to-fix-it-13d2cb4d17c1" target="_blank" rel="noopener">
718                    <img src="https://static.shuffle.dev/files/1
718779962600/landing-page-roast.png" class="border rounded" alt="Landing Page Roast">
719                </a>
720                <div class="mt-5">
721                    <h5 class="text-lg">
722                        <a href="https://medium.com/@kemyd/landing-page-roast-why-your-landing-page-isnt-converting-and-how-to-fix-it-13d2cb4d17c1" class="text-blue-700 hover:underline" target="_blank" rel="noopener">Landing Page Roast <small><sup class="icon-link-ext"></sup></small></a>
723                    </h5>
724                </div>
725            </div>
726            <div class="w-full md:w-1/3 py-10 px-6">
727                <a href="https://shuffle.dev/design-cli" target="_blank" rel="noopener">
728                    <img src="https://static-production.npmjs.com/a12c728e90758ccd16976b394b964317.png" class="border rounded" alt="Design CLI">
729                </a>
730                <div class="mt-5">
731                    <h5 class="text-lg">
732                        <a href="https://shuffle.dev/design-cli" class="text-blue-700 hover:underline" target="_blank" rel="noopener">Design CLI <small><sup class="icon-link-ext"></sup></small></a>
733                    </h5>
734                </div>
735            </div>
736        </div>
737    </div>
738
739    <div class="container mx-auto px-4 mb-12 pb-12 border-b">
740        <div class="flex flex-wrap items-center">
741            <div class="w-full lg:w-1/2 my-auto">
742                <div class="w-full py-1 md:py-3 bg-blue-600 rounded-t">
743                    <div class="flex ml-3">
744                        <div class="inline-flex items-center justify-center h-1 w-1 md:h-2 md:w-2 mt-1 md:mt-2 mr-1 md:mr-2 bg-white rounded-full"></div>
745                        <div class="inline-flex items-center justify-center h-1 w-1 md:h-2 md:w-2 mt-1 md:mt-2 mr-1 md:mr-2 bg-white rounded-full"></div>
746                        <div class="inline-flex items-center justify-center h-1 w-1 md:h-2 md:w-2 mt-1 md:mt-2 mr-1 md:mr-2 bg-white rounded-full"></div>
747                        <div class="text-xs md:text-sm text-white mx-auto">USING EXTERNAL UI LIBRARY</div>
748                    </div>
749                </div>
750                <video poster="/tailwind/static/img/poster.png" muted="" playsinline="" autoplay="" loop="" src="/tailwind/static/video/tailwindui-integration.mp4" class="border rounded-b"></video>
751            </div>
752            <div class="w-full lg:w-1/2 lg:pl-12 mt-12 lg:mt-0 mb-12 lg:mb-0">
753                <img src="/static/img/logos/tailwindui-logo.svg" alt="Tailwind UI" class="inline-block mb-6 h-6">
754                <h2 class="mb-2 text-3xl leading-tight tracking-wide">Tailwind UI integration is out in beta!</h2>
755
756                <p class="mt-6 mb-5 text-gray-700 leading-relaxed">
757                    We are excited to announce that we released an&nbsp;update that allows you to&nbsp;import multiple HTML snippets at once! 😍
758                </p>
759
760                <p class="mb-5 text-gray-700 leading-relaxed">
761                    In the first version, we focus exclusively on the seamless import of Tailwind UI components.
762                </p>
763
764                <p class="mb-5 text-gray-700 leading-relaxed font-medium">
765                    To use this feature, you need to purchase the appropriate license from the Tailwind UI website.
766                </p>
767            </div>
768        </div>
769    </div>
770
771    <div class="container mx-auto px-4 -mb-6">
772        <a href="https://shuffle.dev/tailwind" class="shuffle-banner">
773    <div class="container px-4 mx-auto">
774        <div class="shuffle-banner__content">
775            <div class="shuffle-banner__copy">
776                <img src="/static/img/shuffle-frameworks/merge/tailwind-builder.png" class="inline-block" alt="">
777                is now part of Shuffle&trade;. 
778                The new editor includes templates for Tailwind CSS, Bootstrap, Bulma, and&nbsp;Material-UI.
779            </div>
780            <div class="shuffle-banner__action">
781                <span class="switch-button font-semibold">Switch to Shuffle &rarr;</span>
782            </div>
783        </div>
784    </div>
785</a>
786    </div>
787
788</section>
789
790<div class="container mx-auto">
791    <footer class="flex flex-wrap flex-col items-center px-4 py-6 text-sm text-gray-700 border-t">
792        <div class="text-center">&copy;
792 2026  <a href="https://shuffle.dev" class="text-gray-700 hover:underline" title="An online editor for busy developers" target="_blank">Shuffle</a></div>
793        <div class="mx-auto mb-3 text-center">
794            <a href="https://shuffle.dev/components/tailwind" class="inline-block mt-4 mx-3 text-blue-700 hover:underline">Tailwind Components</a>
795            <a href="https://shuffle.dev/tailwind/templates" class="inline-block mt-4 mx-3 text-blue-700 hover:underline">Templates</a>
796            <a href="/classes" class="inline-block mt-4 mx-3 text-blue-700 hover:underline">Tailwind CSS</a>
797            <a href="https://shuffle.dev/nextjs" class="inline-block mt-4 mx-3 text-blue-700 hover:underline" rel="noopener">Next.js Editor</a>
798            <a href="https://shuffle.dev/wordpress-ai-theme-builder" class="inline-block mt-4 mx-3 text-blue-700 hover:underline" rel="noopener">WordPress AI Theme Builder</a>
799            <a href="https://shuffle.dev/ai-website-redesign" class="inline-block mt-4 mx-3 text-blue-700 hover:underline" rel="noopener">AI Website Redesign</a>
800        </div>
801        <p class="w-full mt-2 mb-2 text-center text-gray-700">Tailwind Builder is a product of <a href="https://shuffle.dev">Shuffle</a> and is not affiliated with Tailwind CSS or Tailwind Labs.</p>
802        <p class="w-full mt-2 mb-2 text-center"><a href="https://shuffle.dev/tailwind" class="text-blue-600 hover:underline">Switch to the Tailwind Editor by Shuffle<sup> <i class="icon-link-ext"></i></sup></a></p>
803    </footer>
804</div>
805
806</div>
807
808    
808<script src="/vendor/bundle.js?v1"></script>
808
809    
810<script>var SHOW_NEWSLETTER = false;</script>
vendor: 1 bytes, line 810
810
811<script src="/static/build/runtime.f4aa68df.js" defer></script>
811<script src="/static/build/shared.639e81f1.js" defer></script>
811<script src="/static/build/js/landing.38ca1c93.js" defer></script>
vendor: 1 bytes, line 811
811
812<script async defer src="https://buttons.github.io/buttons.js"></script>
812
813
814    
814<script src="https://js.stripe.com/v3/"></script>
814
815    
815<script>
816        var stripe_publishable_key = 'pk_live_6Hm65VjiTzGXnnoyU9jddNmf';
817    </script>
817
818
819<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"4b662ebcb42e4a84b14eb4c1bfca03e0","r":1,"spa":2}' crossorigin="anonymous"></script>
819
820</body>
821</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.