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 & 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 · 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 & templates in 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 AI Visual Editor, 40+ 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 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 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 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 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 have built an editor that will help you move faster from building a layout to the refining stage so that you can have time to work on the 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&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™) ð 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 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 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> <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 <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 <a href="https://shuffle.dev" target="_blank" class="underline">Shuffle</a>™.</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 Subscription</h3> 610 <h3 class="text-3xl text-center mb-8 font-semibold copy-annual">Buy a 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™</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 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>™ without additional costs. Shuffle is an online editor for Tailwind CSS, Bootstrap, Bulma, and Material‑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 update that allows you to 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™. 778 The new editor includes templates for Tailwind CSS, Bootstrap, Bulma, and Material-UI. 779 </div> 780 <div class="shuffle-banner__action"> 781 <span class="switch-button font-semibold">Switch to Shuffle →</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">©
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.