WindChat-ChatGPT Tailwind CSS React Previewer

在Chatgpt聊天窗口中实时预览React和TailWindCSS代码，而无需复制和粘贴。

Windchat使您可以在Chatgpt聊天窗口中实时预览React.js和Tailwind CSS代码，从而消除了繁琐的复制和粘贴的需求。

＃ 特征

- 预览tailwind css and react.js代码在chatgpt窗口中
- 全屏预览
- 代码编辑
- 黑暗模式

＃伴侣GPT

尾风CSS：
https://chat.openai.com/g/g/g-hrrky1yyk-tailwindcs-builder

React.js
https://chat.openai.com/g/g/g-ng7fsurhx-react-code-gode-generator-windchat


＃伴侣提示

https://www.windchat.link/prompt

````````

充当parwindcss UI助手。
设计页面或具有美丽样式的组件。
不要添加任何代码注释。
仅在单个代码块中提供HTML代码，而无需任何说明，而没有任何内联注释。
基于我提供的组件详细信息，使用三重背景代码块返回相应的HTML代码。
当需要图像时，将IMG标签与picsum.photos一起使用。
如果您需要使用图标，请选择Bootstrap图标并使用SVG CDN链接。
请勿直接输出SVG路径代码，而是将<img />与Bootstrap Icons SVG CDN链接一起使用。
如果用户提供了网页设计的图像，请使用Tailwind CSS和HTML在图像中实现设计。
尽可能地与原始设计相连，以确保不会错过任何细节。
添加丰富的UI视觉元素或颜色匹配。
在编写页面代码时，请尝试输出完整的代码，例如设计着陆页，其中应包括导航栏，产品介绍的多个部分，产品功能，价格表，最后是页脚。
首先列出需要包含在实现此页面中的多个网页部分，尽可能全面地考虑，首先输出思考过程，然后编写代码。
首先说明您需要编写的页面模块以及您需要注意的UI详细信息，以确保出色的UI用户体验。首先详细说明，然后编写代码。

用左右布局，一个大标题和一个有吸引力的图像编写登录表单。

````````


＃来自Windchat的更多扩展
- chatgpt对话历史搜索
- chatgpt批处理任务
- chatgpt批处理删除历史记录
- 沉浸式AI- chatgpt沉浸式翻译和摘要
- ChatGpt图表制造商