How do I copy a navbar, hero or pricing section from a website?

Navbars: the markup is easy, the mobile menu is not

A desktop navbar is usually a flex row: logo, links, a call to action. That copies well. The mobile version is the problem. The hamburger button toggles a menu with JavaScript, and that script never comes with the markup. Plan to rewire it yourself.

<nav class="flex items-center justify-between px-6 py-4">
  <a href="/" class="text-lg font-bold">Brand</a>
  <ul class="hidden gap-8 text-sm md:flex">
    <li><a href="/features" class="hover:text-indigo-600">Features</a></li>
    <li><a href="/pricing" class="hover:text-indigo-600">Pricing</a></li>
  </ul>
  <details class="md:hidden">
    <summary class="cursor-pointer">Menu</summary>
    <!-- mobile links -->
  </details>
</nav>

A <details> element is a no-JavaScript way to get a working toggle while you prototype. Also check for position: sticky or fixed and a backdrop-filter, which give many navbars their frosted look.

Heroes: watch the fonts, images and fluid type

• Large headings often use clamp() or vw sizes. Keep them as written, or the heading will be right at one width and wrong at every other.
• Background images and gradients may sit on a pseudo-element (::before) rather than the section itself. Check both in the Styles pane.
• The display font is what makes most heroes look like themselves. Find it in the Computed tab and load it in your project, or pick a free font with a similar feel.
• Replace the headline, illustration and product shots. Those are the site's own content.

Pricing sections: copy one card, generate the rest

Pricing tables are three or four near-identical cards with one highlighted plan. Copying the whole grid gives you three copies of the same markup. It is cleaner to keep one card and loop over data:

const plans = [
  { name: 'Starter', price: '$0', cta: 'Get started' },
  { name: 'Team', price: '$49', cta: 'Start trial', featured: true },
];

{plans.map((plan) => (
  <article key={plan.name} className={plan.featured ? 'rounded-2xl bg-gray-900 p-6 text-white' : 'rounded-2xl border p-6'}>
    <h3 className="text-sm font-semibold">{plan.name}</h3>
    <p className="mt-2 text-3xl font-bold">{plan.price}</p>
  </article>
))}

Copy the section with PickCode

1. Pick the wrapper. Press Alt Shift C, hover inside the section and press ↑ until the whole nav, hero or pricing block is outlined.
2. Open the code panel. Press Space and choose Tailwind, React, Blade or HTML + CSS.
3. Let repeated cards collapse. Three or more matching items, like plan cards or nav links, come out as an array with .map() in React or @foreach in Blade.
4. Copy the font link. If the hero uses a Google Font, copy its link from the panel.
5. Save the images. Use the assets download to get every image and SVG in the section as a zip, then replace what you do not own.

Check every breakpoint

All three sections change shape between phone and desktop. After you paste, resize your browser from about 390px to 1280px and compare it with the original side by side. Copy tools read what is applied at your current width plus the media queries they can parse, so a quick check catches anything that came from a stylesheet they could not read.

Questions

Sources

1. Tailwind CSS: responsive design
2. Chrome DevTools: view and change CSS
3. Reddit r/Frontend: is it legal to copy the visual design of a website?
4. U.S. Copyright Office: what does copyright protect?