Preview TailwindCSS HTML in
ChatGPT

Turn ChatGPT into your front-end development assistant. Just tell him what you want to do.

WindChat - Generate UI with simple text prompts. Just in ChatGPT | Product Hunt
More Apps

windchat-screenshot-1600.webp
form2.gif
Image to Code
chatgpt-image2.png

Recommand Prompt

TailwindCSS
React.js
TailwindCSS
Act as a TailwindCSS UI helper. 
Design pages or components with beautiful styles.
Do not add any code comments. 
Only provide the HTML code within a single code block without any explanations, without any inline comment. 
Based on the component details I provide, return the corresponding HTML code using a triple backtick code block.
When images are required, utilize the img tag with picsum.photos as the source. 
If you need to use icons, opt for Bootstrap Icons and utilize the SVG CDN link.
Do not outputting SVG path code directly, use <img /> with Bootstrap Icons svg cdn link instead.
If a user provides an image of a web page design, implement the design in the image using Tailwind CSS and HTML.
Adhere as closely as possible to the original design, ensuring that no details are missed.
Add rich but not feel cluttered UI visual elements or color matching.
When writing page code, try to output complete code, such as designing a landing page, which should include a navigation bar, multiple sections of product introductions, product features, price tables, and finally the footer.
First list the multiple web page sections that need to be included in implementing this page, consider as comprehensively as possible, first output the thought process, and then write the code.
First explain in detail the page modules you need to write, and the UI details you need to pay attention to, to ensure an excellent UI user experience. Explain in detail first, then write the code.

Write a login form with a left-right layout, a large title, and an attractive image on the right.

Pricing

Basic plan users can FREE FOREVER use the extension to preview latest 5 messages. More advanced features are only available to premium users. We offer a variety of plans to fit your needs.

Plan 1

$1.99/month
All features with an affordable price
  • Unlimited chat groups
  • Unlimited chat messages
  • 5 Devices(5 activation times)
  • Priority Email support
Monthly billing
Payment methods:
Card, GooglePay and ApplePay

Plan 2

$9.99/year
All features, save 50% compared to Plan 1
  • Unlimited chat groups
  • Unlimited chat messages
  • 5 Devices(5 activation times)
  • Priority Email support
Yearly billing
Payment methods:
Card, GooglePay and ApplePay

Plan 3

Most popular

$19.99Lifetime
All features, one-time payment, lifetime use
  • Unlimited chat groups
  • Unlimited chat messages
  • 5 Devices(5 activation times)
  • Priority Email support
One-time payment
Payment methods:
Alipay, WeChatPay, Card, GooglePay and more...

Activate your License key
windchat-guide1.webpwindchat-guide1.webp

QA

How can I cancel my sbuscription?

Please visit LemonSqueezy to manage your Subscriptions and Licenses.

Update history

Version 2024.07.07

2024-07-07: Adapt to ChatGPT UI changes.

Version 1.2.6

2024-05-04: Adapt to ChatGPT UI changes.

Version 1.1.1

2024-01-18: Supports preview of React.js code.

Version 1.0.11

2023-11-09: GPT-4 All Tools just released. WindChat has updated to adapt to ChatGPT UI changes.

Version 1.0.0

2023-04-19: First version.