Launched this week
LandingBlocks
Copy-paste UI blocks + a builder to ship a landing fast
11 followers
Copy-paste UI blocks + a builder to ship a landing fast
11 followers
LandingBlocks is a set of 18 responsive UI blocks (hero, pricing, features, testimonials, FAQ…) in plain HTML + Tailwind, with light/dark mode built in. Unlike component libraries, there's nothing to install: open it in your browser, copy any block, or stack blocks in the built-in builder and export a complete, self-contained HTML page in one click. No build, no npm, no dependencies, no lock-in — just clean HTML you fully own.
Does the builder let you mix and match blocks from different sets or are you locked into the 18 that come with it?
@k_rcal85598 Great question! You're not locked into any fixed layout — inside the builder you can freely mix and match any of the 18 blocks, in any order and any combination. Want two hero variations, a pricing table, then three feature sections? Go for it. You just hit "+ Add" on the blocks you want, reorder your page, and export it as one complete, self-contained HTML file.
Right now it's the 18 blocks from this v1.0 set, but more blocks and variants are on the way — and updates are included for free, so your set keeps growing over time.
What kind of page are you trying to build? Happy to point you to the blocks that fit.
Does the light/dark toggle use the browser's prefers-color-scheme by default, or do I need to wire that up myself for each block I drop in?
@emirhankkat3g4 Good question. The toggle is class-based (Tailwind's darkMode: "class"), not prefers-color-scheme — in the catalog it's a manual switch that remembers your choice in localStorage. The key part though: you do NOT wire up anything per block. Every block ships with full dark: variants, so dark mode just works the moment the `dark` class is on — drop in as many as you want, zero extra work. In your exported page, dark mode is toggled by adding class="dark" to . It doesn't follow the OS setting out of the box, but if you want that, it's a one-liner in the : Honestly great feedback — I'm adding an OS-preference option in an update so you won't even need that snippet. Thanks 🙏
How does the builder handle responsiveness across really weird breakpoints like ultrawide monitors, or am I stuck tweaking the Tailwind classes myself after export?
@aslhanbukrzy5q The blocks are mobile-first Tailwind with centered max-width containers (max-w-7xl + mx-auto), so on ultrawide monitors the content caps its width and stays centered instead of stretching into unreadable edge-to-edge lines — it reads as intentional, not broken. Standard sm/md/lg breakpoints cover everything down to mobile.
So across the common range (mobile → ultrawide) you're not stuck tweaking anything after export. If you specifically want a section to go full-bleed on ultrawide, that's a one-class change (swap the max-w). And since the export is clean HTML + Tailwind you fully own, you're editing normal classes — not fighting a black box or generated soup. No lock-in.
opened it straight in the browser, no setup, and just dragged a pricing block onto a hero one in the builder. exported the whole thing as a single clean html file in like a minute, dark mode just worked out of the box.
@mustafa884297 This honestly made my day — that's exactly the experience I was going for. No setup, stack the blocks you want, and walk away with one clean HTML file in a minute. And yeah, dark mode is baked into every block so it just works.
Funny you mention dragging blocks around — true drag-and-drop reordering inside the builder is exactly what I'm adding in the next update, so you'll be able to rearrange your page freely. Thanks so much for trying it and taking the time to write this 🙏