CatchCase

Turn a Figma screenshot into Tailwind HTML

Attach a screenshot of a design or component. Get responsive, production-ready HTML with Tailwind CSS utility classes that matches the layout.

How to use it

  1. Take a screenshot of the Figma design Capture a clean screenshot of the container, button, card or section you want to code.
  2. Attach it and run the case Attach the screenshot and name your target framework (for example React or plain HTML).
  3. Refine and integrate Copy the generated code, test it at different widths in your browser's developer tools, and replace placeholders with real data.

The prompt

You are an expert front-end developer. Turn the attached screenshot of a UI component into a faithful, fully responsive HTML page styled with Tailwind CSS.

Requirements:

  • Semantic HTML5 and accessible markup: alt text, form labels, visible focus states.
  • Style with standard Tailwind utility classes, mobile-first, adding md: and lg: variants where the layout changes.
  • Icons as inline SVG in the style of Heroicons or Lucide. No external images, fonts or icon libraries.
  • Return ONE complete HTML document in a single ```html code block, with no introduction or explanation outside it.
  • In the head, include <script src="https://cdn.tailwindcss.com"></script> and, right after it, a <style> block that defines in plain CSS every Tailwind class you used. Escape the colon in variant classes (for example .hover\:bg-teal-700:hover) and put md: and lg: classes inside matching @media (min-width) rules. The page must look the same when external scripts are blocked, as they are in the preview on this site.
  • Where the screenshot is unclear (exact colours, spacing, hover states), make a sensible choice and list those choices in an HTML comment at the top of the document.

The screenshot is attached.

Example result

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Team plan</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Fallback for previews that block external scripts: the Tailwind utilities this card uses -->
  <style>
    *,::before,::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
    body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}
    ul{list-style:none}a{text-decoration:none}
    .min-h-screen{min-height:100vh}.flex{display:flex}.block{display:block}.flex-none{flex:none}
    .items-center{align-items:center}.items-start{align-items:flex-start}.items-baseline{align-items:baseline}.justify-center{justify-content:center}
    .relative{position:relative}.absolute{position:absolute}.-top-3{top:-.75rem}.right-6{right:1.5rem}
    .w-full{width:100%}.max-w-sm{max-width:24rem}.h-5{height:1.25rem}.w-5{width:1.25rem}
    .p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
    .mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.gap-1{gap:.25rem}.gap-3{gap:.75rem}.space-y-3>*+*{margin-top:.75rem}
    .rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.border{border-width:1px}.border-slate-200{border-color:#e2e8f0}.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0/.05)}
    .bg-slate-50{background:#f8fafc}.bg-white{background:#fff}.bg-teal-600{background:#0d9488}.hover\:bg-teal-700:hover{background:#0f766e}
    .text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}
    .font-semibold{font-weight:600}.font-bold{font-weight:700}.tracking-tight{letter-spacing:-.025em}.text-center{text-align:center}
    .text-white{color:#fff}.text-slate-900{color:#0f172a}.text-slate-700{color:#334155}.text-slate-500{color:#64748b}.text-teal-600{color:#0d9488}
  </style>
</head>
<body class="min-h-screen bg-slate-50 flex items-center justify-center p-6">
  <article class="relative w-full max-w-sm rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
    <span class="absolute -top-3 right-6 rounded-full bg-teal-600 px-3 py-1 text-xs font-semibold text-white">Most popular</span>
    <h2 class="text-lg font-semibold text-slate-900">Team</h2>
    <p class="mt-1 text-sm text-slate-500">For growing teams that need shared workspaces.</p>
    <p class="mt-6 flex items-baseline gap-1">
      <span class="text-4xl font-bold tracking-tight text-slate-900">$29</span>
      <span class="text-sm text-slate-500">per user / month</span>
    </p>
    <ul class="mt-6 space-y-3 text-sm text-slate-700">
      <li class="flex items-start gap-3">
        <svg class="h-5 w-5 flex-none text-teal-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
        Unlimited projects and boards
      </li>
      <li class="flex items-start gap-3">
        <svg class="h-5 w-5 flex-none text-teal-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
        Guest access for clients
      </li>
      <li class="flex items-start gap-3">
        <svg class="h-5 w-5 flex-none text-teal-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
        Version history for 90 days
      </li>
      <li class="flex items-start gap-3">
        <svg class="h-5 w-5 flex-none text-teal-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
        Priority email support
      </li>
    </ul>
    <a href="#" class="mt-8 block rounded-xl bg-teal-600 px-4 py-3 text-center text-sm font-semibold text-white hover:bg-teal-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Start free trial</a>
  </article>
</body>
</html>

Related cases