JSX + Tailwind
A component with the Tailwind classes that reproduce the computed styles.
Export Pro
Copy any section of a website as JSX + Tailwind
Smart Design Inspector turns the website section you pick into a JSX component with Tailwind classes, or into HTML and CSS, ready to paste into your project.
Pro feature, free in early access until the Pro launch (date TBD)
Section · tucliente.example
Reservations
A table for tonight
- Tuesday to Sunday, 1-11 pm
- 12 Main Street
<div className="rounded-lg border border-gray-200 p-8">
<p className="text-xs uppercase tracking-widest">Reservations</p>
<p className="mt-2 text-2xl font-semibold">A table for tonight</p>
<ul className="mt-4 space-y-2 text-sm">…</ul>
<a className="mt-6 block bg-blue-600 px-4 py-2 text-white">
Book
</a>
</div><div class="card">…</div>
.card {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 32px;
}
.card .title { font-size: 24px; font-weight: 600; }01
How it works
3 steps- 01
Open the website and choose Copy section.
- 02
Hover and click the block you want: a hero, a pricing card, a footer.
- 03 Pro
Choose the format, JSX + Tailwind or HTML/CSS, and it’s copied to your clipboard.
02
What you get
2 formatsHTML/CSS
The markup with its stylesheet, for projects without Tailwind or for WordPress.
03
Get inspired, don’t copy
Intellectual propertyThe text, images and logos of another website belong to someone. Copy the structure and the style, and add your own content. The first Pro release brings inspiration mode, free for everyone: it swaps text and images for placeholders when you copy.
| Free€0forever | Pro€49one-time payment | |
|---|---|---|
| Copy the CSS of any element | ||
| Copy a section as JSX + Tailwind or HTML/CSS | — | Free early access |
| Inspiration mode: swaps text and images for placeholders when you copy | With the first Pro | With the first Pro |
Is it free?
It’s a Pro feature. Until the Pro launch (date TBD), it’s in free early access for everyone. After that it’s included in the €49 one-time Pro.
Is the code perfect?
It works and stays close to the original. JavaScript animations and some effects can’t be turned into classes, so it’s worth reviewing.
Does it use my project’s colors?
It uses the original website’s colors. To get the tokens as variables, combine it with extracting the design system.
Can I copy it for React, Vue or Elementor?
The JSX works directly in React. Vue and Elementor are planned for later versions.
Which browsers and operating systems does it work on?
Chrome, Edge, Brave, Arc, Opera and Vivaldi, on Windows, Mac and Linux, from version 1.0. It works the same everywhere because the browser runs the extension, not the operating system. The code is ready to be brought to Firefox and Safari without a rewrite. While it’s in development, things may change.
06
Keep exploring
Related featuresWaitlist
Be one of the first to try it
Smart Design Inspector is in development. Leave your email and we’ll let you know the day it goes live on the Chrome Web Store, with the 3 Pro features free in early access.
One email on launch day and very few more · Unsubscribe in one click