PickCode

h1Copy any element on the web as Tailwind.

Hover, click, paste. PickCode reads the styles the browser actually applied and writes clean Tailwind, React, Blade or HTML + CSS for your project.

Add to Chrome, free Buy Pro for $49
div.card 320×188

Pro plan

Unlimited copies

Get started 
<div class="w-[320px] bg-white p-5 border border-slate-200 rounded-2xl">
  <h3 class="text-lg font-bold">Pro plan</h3>
  <p class="text-sm text-slate-500 mb-3.5">Unlimited copies</p>
  <span class="block p-2 rounded-lg bg-indigo-600 text-white
    text-sm font-semibold text-center">Get started</span>
</div>

How it works

Works on any page Chrome lets extensions read, including your own localhost.

  1. Open the picker

    Click the PickCode icon or press Alt Shift C.

  2. Pick an element

    Hover to highlight, click to select. ↑ moves to the parent, ↓ to the first child.

  3. Copy the code

    Choose Tailwind, React, Blade or HTML + CSS and press Copy.

One pick, four formats

The same button, ready for whatever your project uses.

<button class="block w-full bg-indigo-600 text-white text-[15px] font-semibold py-3 px-4 rounded-[10px]">
  Get started
</button>

Code you would have written

PickCode skips browser defaults and inherited noise, so you get the styles that matter.

Your theme, not hex soup
Colors, spacing, radii and type sizes snap to Tailwind's scale. Anything off-scale uses an exact arbitrary value.
Sizes that hold up
Widths are only written when the element really sets one, and box sizing is converted so the layout matches.
Icons included
Inline SVG icons come along with their size and color, ready for JSX.
Stays on your machine
Picked elements are processed in your browser. Nothing about the pages you visit is sent anywhere.

Pricing

Try it free. Pay once if it saves you time.

Free

$0

  • 5 elements a day
  • 1 CodePen a day
  • All four formats
  • Inspector, guides and assets
Add to Chrome

Pro

$49 one payment

  • Unlimited elements and CodePens
  • Use it on up to 3 browsers
  • All future updates
  • 14-day refund, no questions
Buy Pro

Questions

Does it work on every website?

On almost every page. Chrome doesn't let any extension run on its own pages (like chrome:// and the Chrome Web Store), so PickCode can't either.

Is the output pixel-perfect?

It reproduces the styles applied at your screen size, plus the page's own :hover and :focus rules and min-width breakpoints from stylesheets it can read. In our test the pasted code rendered at the original size at 390, 768 and 1440px wide. Animations and rules from cross-origin stylesheets aren't captured yet.

Which formats can I copy?

Tailwind classes, a React (JSX) component, a Laravel Blade component that merges $attributes, and plain HTML with a CSS stylesheet.

Does PickCode send the pages I visit anywhere?

No. Picked elements are processed in your browser. The only network call is the license check for Pro, which sends your license key and activation ID.

Can I use code copied from other websites?

PickCode copies structure and styling, which is handy for learning and prototyping. Text, images, logos and distinctive designs can belong to their owners, so check you have the right to use them in your product.

How much does it cost?

The free plan gives you 5 elements a day in every format, plus 1 CodePen. Pro is a single $49 payment for unlimited elements and CodePens on up to 3 browsers, with future updates included.

How do I activate Pro?

After checkout you get a license key. Click the PickCode icon in Chrome, paste the key and press Activate.

Can I get a refund?

Yes, within 14 days of purchase. See the refund policy.