PickCode: Copy CSS & Elements to Tailwind, React, HTML + CSS Inspector

Copy any website element as Tailwind, React or HTML. CSS inspector, font finder, color picker and image and SVG asset extractor.

Copy CSS from any website in one click. Hover a button, card, navbar, hero or pricing section, click it, and paste working code into your project: Tailwind CSS, React JSX, Laravel Blade or plain HTML + CSS. PickCode reads the styles the browser actually applied, not a guess from a screenshot, so the element pastes back at the same size, with the same font, colors and spacing. WHAT PEOPLE USE IT FOR • Copy a section from a website with its CSS • Convert CSS to Tailwind classes that use the default Tailwind palette, spacing and type scale instead of arbitrary values • Convert HTML to Tailwind, or HTML to JSX for React • Copy a UI component into React, Next.js or Laravel • Give Cursor, Claude Code or v0 the real code instead of a screenshot the AI has to guess from • Find out what font a website uses and copy the Google Fonts link • Copy hover effects, focus states and responsive breakpoints • Extract images, SVG icons and logos from a website • Pick colors, check WCAG contrast and grab the exact spacing WHAT YOU GET • Tailwind classes mapped to the Tailwind palette, spacing and type scale, with mobile first breakpoints (sm:, md:, lg:, max-sm:) and hover and focus states taken from the page's own CSS. • React (JSX) components, Laravel Blade components with $attributes->merge, or plain HTML + CSS. • Repeated items become real code: an array with .map() in React or @foreach in Blade. • Responsive values kept as written: clamp(), vw, % and auto margins are not frozen at one screen width. • Pseudo elements, SVG sprite icons, CSS variables and web fonts included. • Works on sites with random class names (styled components, CSS modules) because it reads computed styles. HOW IT WORKS 1. Press Alt+Shift+C, or click Pick an element in the popup. 2. Hover anything. The CSS inspector shows its size, font, colors, contrast and Tailwind classes. 3. Click to copy. Double click (or Space) to open the code panel, switch formats, or copy without children. 4. Use the arrow keys to select the parent, child or sibling, and Shift to hold the selection. Press ? for every shortcut. CSS INSPECTOR, FONT FINDER, COLOR PICKER AND ASSET EXTRACTOR • CSS inspector: hover any element to see its size, padding, margin, font, colors and Tailwind classes, without opening DevTools. • Font finder: see which font, size and weight any text uses, and copy the Google Fonts link in one click. • Color picker: every color on the element as a swatch, with CSS variables kept as tokens and the WCAG contrast ratio of the text. • Asset extractor: download every image and SVG icon inside an element one by one, or all of them as a zip. • Spacing guides: grid tracks, flex gaps and the distance between elements in pixels as you hover. RULES TAB, LIKE DEVTOOLS • The Rules tab lists every stylesheet rule that matches, sorted by specificity, with overridden declarations struck through and each media query marked active or inactive. • Edit a style in the Rules tab and the copied code follows. • Open any element in CodePen with one click, or right click a page and choose "Pick an element with PickCode". • Your recent copies stay in the popup, ready to copy again. PRIVATE Page content, URLs and copied code never leave your browser. No account needed. PLANS Free: 5 elements a day in every format, plus 1 CodePen. Inspecting, guides and asset downloads stay free. Pro: unlimited elements and CodePens for a one time $49, on up to 3 browsers. No subscription. Guides and answers: https://pickcode.dev