bricks version: 2.4-beta3
simple html code copy/paste to bricks canvas doesnt render properly because cant load the cdn in canvas
it is very simple tailwind html that claude generated
this is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Studio — Simple, Clean, Fast</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
html { font-size: 16px; } /* base 16px so 1rem = 16px */
body { font-size: 1rem; } /* never below 1rem */
::selection { background: #111827; color: #fff; }
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- Nav -->
<header class="sticky top-0 z-50 bg-white/80 backdrop-blur border-b border-gray-100">
<nav class="max-w-6xl mx-auto px-6 flex items-center justify-between h-16">
<a href="#" class="text-lg font-semibold tracking-tight">Studio</a>
<div class="hidden md:flex items-center gap-8 text-sm text-gray-600">
<a href="#work" class="hover:text-gray-900 transition">Work</a>
<a href="#about" class="hover:text-gray-900 transition">About</a>
<a href="#services" class="hover:text-gray-900 transition">Services</a>
<a href="#contact" class="hover:text-gray-900 transition">Contact</a>
</div>
<a href="#contact" class="text-sm font-medium bg-gray-900 text-white px-4 py-2 rounded-full hover:bg-gray-700 transition">
Get in touch
</a>
</nav>
</header>
<!-- Hero -->
<section class="max-w-6xl mx-auto px-6 pt-24 pb-20 text-center">
<p class="text-sm font-medium text-gray-500 mb-4 tracking-wide uppercase">Design & Development Studio</p>
<h1 class="text-4xl md:text-6xl font-semibold tracking-tight leading-tight mb-6">
Simple ideas.<br class="hidden md:block"> Beautifully executed.
</h1>
<p class="text-lg text-gray-500 max-w-xl mx-auto mb-10">
We help brands turn ambitious ideas into clean, fast, and thoughtful digital products.
</p>
<div class="flex items-center justify-center gap-4">
<a href="#contact" class="bg-gray-900 text-white px-6 py-3 rounded-full text-sm font-medium hover:bg-gray-700 transition">
Start a project
</a>
<a href="#work" class="border border-gray-200 px-6 py-3 rounded-full text-sm font-medium hover:border-gray-400 transition">
View our work
</a>
</div>
</section>
<!-- Logos strip -->
<section class="border-y border-gray-100 py-8">
<div class="max-w-6xl mx-auto px-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-4 text-gray-400 text-sm font-medium">
<span>Northwind</span>
<span>Vertex Labs</span>
<span>Loop & Co.</span>
<span>Halcyon</span>
<span>Grove</span>
</div>
</section>
<!-- Services -->
<section id="services" class="max-w-6xl mx-auto px-6 py-24">
<div class="max-w-2xl mb-16">
<h2 class="text-3xl font-semibold tracking-tight mb-4">What we do</h2>
<p class="text-gray-500 text-lg">Focused, high-quality work across three core disciplines.</p>
</div>
<div class="grid md:grid-cols-3 gap-10">
<div>
<div class="w-10 h-10 rounded-lg bg-gray-900 mb-5 flex items-center justify-center text-white text-sm font-semibold">01</div>
<h3 class="text-lg font-semibold mb-2">Brand Design</h3>
<p class="text-gray-500 text-sm leading-relaxed">Identity systems that feel intentional — from logo to full guidelines.</p>
</div>
<div>
<div class="w-10 h-10 rounded-lg bg-gray-900 mb-5 flex items-center justify-center text-white text-sm font-semibold">02</div>
<h3 class="text-lg font-semibold mb-2">Web Development</h3>
<p class="text-gray-500 text-sm leading-relaxed">Fast, accessible, and maintainable websites built to scale with you.</p>
</div>
<div>
<div class="w-10 h-10 rounded-lg bg-gray-900 mb-5 flex items-center justify-center text-white text-sm font-semibold">03</div>
<h3 class="text-lg font-semibold mb-2">Product Strategy</h3>
<p class="text-gray-500 text-sm leading-relaxed">Clear roadmaps and research that keep teams aligned and shipping.</p>
</div>
</div>
</section>
<!-- Work / cards -->
<section id="work" class="bg-gray-50 py-24 border-y border-gray-100">
<div class="max-w-6xl mx-auto px-6">
<div class="flex items-end justify-between mb-16">
<h2 class="text-3xl font-semibold tracking-tight">Selected work</h2>
<a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition">View all →</a>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-lg transition">
<div class="h-48 bg-gradient-to-br from-gray-100 to-gray-200"></div>
<div class="p-6">
<p class="text-xs text-gray-400 mb-1">E-commerce</p>
<h3 class="font-semibold mb-1">Halcyon Marketplace</h3>
<p class="text-sm text-gray-500">A refined shopping experience for a modern retailer.</p>
</div>
</div>
<div class="bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-lg transition">
<div class="h-48 bg-gradient-to-br from-gray-100 to-gray-200"></div>
<div class="p-6">
<p class="text-xs text-gray-400 mb-1">SaaS</p>
<h3 class="font-semibold mb-1">Vertex Dashboard</h3>
<p class="text-sm text-gray-500">Data visualization platform for enterprise teams.</p>
</div>
</div>
<div class="bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-lg transition">
<div class="h-48 bg-gradient-to-br from-gray-100 to-gray-200"></div>
<div class="p-6">
<p class="text-xs text-gray-400 mb-1">Branding</p>
<h3 class="font-semibold mb-1">Grove Identity</h3>
<p class="text-sm text-gray-500">A warm, sustainable brand system for a coffee roaster.</p>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center">
<div>
<h2 class="text-3xl font-semibold tracking-tight mb-6">Small team. Big attention to detail.</h2>
<p class="text-gray-500 text-lg leading-relaxed mb-6">
We're a tight-knit studio that believes great design comes from restraint, not excess.
Every project gets the same level of care, whether it's a landing page or a full product.
</p>
<div class="grid grid-cols-3 gap-6 pt-4 border-t border-gray-100">
<div>
<p class="text-2xl font-semibold">120+</p>
<p class="text-sm text-gray-500">Projects shipped</p>
</div>
<div>
<p class="text-2xl font-semibold">8</p>
<p class="text-sm text-gray-500">Years running</p>
</div>
<div>
<p class="text-2xl font-semibold">98%</p>
<p class="text-sm text-gray-500">Client retention</p>
</div>
</div>
</div>
<div class="aspect-[4/3] rounded-2xl bg-gradient-to-br from-gray-50 to-gray-200 border border-gray-100"></div>
</section>
<!-- CTA -->
<section id="contact" class="bg-gray-900 text-white py-24">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-semibold tracking-tight mb-4">Let's build something simple and great.</h2>
<p class="text-gray-300 text-lg mb-10">Tell us about your project and we'll get back within a day.</p>
<form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
<input type="email" placeholder="you@email.com"
class="flex-1 px-4 py-3 rounded-full text-gray-900 text-sm focus:outline-none focus:ring-2 focus:ring-white">
<button type="submit"
class="bg-white text-gray-900 px-6 py-3 rounded-full text-sm font-medium hover:bg-gray-200 transition">
Send
</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="max-w-6xl mx-auto px-6 py-12 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-gray-400">
<p>© 2026 Studio. All rights reserved.</p>
<div class="flex gap-6">
<a href="#" class="hover:text-gray-900 transition">Twitter</a>
<a href="#" class="hover:text-gray-900 transition">Instagram</a>
<a href="#" class="hover:text-gray-900 transition">LinkedIn</a>
</div>
</footer>
</body>
</html>
i know it has tailwind js but similar issues exist with some cdn css loading or cdn .js loading and some compelx designs always needs these libraries…
this is the canvas preview
this is the frontend preview
clearly html is fine but bricks canvas or how the html or js or ..etc loads/renders needs improvements.
i wonder if this counts as a bug ? @timmse
thanks