```json
{
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"p-6 md:p-12 w-full flex flex-col\">\n <div class=\"flex flex-col items-center mb-8 md:mb-10\">\n <h1 class=\"text-2xl md:text-3xl font-bold text-gray-800 mb-3\">院长简介</h1>\n <div class=\"w-16 h-1 bg-amber-500\"></div>\n </div>\n \n <div class=\"grid grid-cols-12 gap-x-8 lg:gap-x-16 gap-y-8 md:gap-y-0\">\n <div class=\"col-span-12 md:col-span-4 flex flex-col\">\n <div class=\"aspect-3/4 w-full bg-gray-200 rounded-lg overflow-hidden flex items-center justify-center\">\n <div class=\"text-gray-500 text-center\">院长照片</div>\n </div>\n <div class=\"mt-4\">\n <h2 class=\"text-xl font-bold text-gray-900\">郑永年</h2>\n <p class=\"text-sm text-gray-600 mt-2\">香港中文大学（深圳）教授</p>\n <p class=\"text-sm text-gray-600 mt-1\">前海国际事务研究院院长</p>\n </div>\n </div>\n \n <div class=\"col-span-12 md:col-span-8 flex flex-col gap-y-5\">\n <p class=\"text-base text-gray-700 leading-relaxed\">施普林格·自然出版社(Springer-Nature) ARPE学术期刊(The Asian Review of Political Economy )主编和罗特里奇出版社(Routledge)《中国政策丛书》(China Policy Series)主编。</p>\n <p class=\"text-base text-gray-700 leading-relaxed\">获中国北京大学法学学士(1985)、法学硕士(1988)、美国普林斯顿大学政治学硕士(1992)、博士(1995)。历任中国北京大学政治与行政管理系讲师;新加坡国立大学东亚研究所研究员、资深研究员;英国诺丁汉大学中国政策研究所教授和研究主任;新加坡国立大学东亚研究所教授、所长。曾任美国社会科学研究会 (Social Science Research Council)和美国麦克阿瑟基金会(John D. and Catherine T. MacArthur Foundation)研究员。</p>\n <p class=\"text-base text-gray-700 leading-relaxed\">主要从事国际关系、外交政策、中国内部转型及其外部影响研究。近年来,先后出版和主编著作近百部,其中英文专著10余部。在国际学术刊物上发表学术论文数十篇。</p>\n <p class=\"text-base text-gray-700 leading-relaxed\">2024年被美国斯坦福大学和爱思唯尔数据库评为\"全球前2%顶尖科学家\"。</p>\n </div>\n </div>\n</div>"
},
"next": [
"添加社交链接",
"增加学术成就标签",
"添加悬停效果",
"优化移动端间距",
"添加查看更多"
],
"summary": "已根据要求创建院长简介卡片组件，包含头像区域和个人履历介绍。采用响应式网格布局，在移动端单列显示，桌面端双列布局。下一步可添加更多交互元素和细节优化。"
}
```
推理
我们有一个ProfileCard组件，它包含一个Header和一个MainContent。Header包含一个标题和一个装饰线。MainContent使用网格布局，在移动设备上为单列，在中等屏幕以上分为两列（左侧4/12，右侧8/12）。左侧包含头像和简介，右侧包含个人传记段落。
由于用户提供了JSON结构，我们需要将其转换为Tailwind HTML代码。注意以下事项：
1. 颜色：使用Tailwind的颜色类，例如#1F2937对应gray-800，#F59E0B对应amber-500，#4B5563对应gray-600，#374151对应gray-700等。
2. 布局：使用flex和grid布局，按照JSON中的gridColumn设置。
3. 图片：用户指定了src为"院长.jpg"，但我们没有这个图片，根据图片智能填充机制，我们可以使用一个占位符。由于是头像，我们可以使用头像类别中的图片，但用户没有指定编号，我们可以随机选一个，比如`/assets/images/avatar/01.jpeg`。或者，如果用户要求使用占位符，则用`https://placehold.co/400x600`（因为头像区域宽高比是3/4，但宽度是100%，所以高度自适应，我们用一个400x600的占位图）。但是，用户没有明确要求更新图片，所以我们保持原样，即使用`院长.jpg`。但是，在代码中，我们需要一个可访问的图片，所以我们可以暂时用占位符代替，或者使用提供的头像图片。由于用户没有提供图片，我们使用占位符，并给出合适的alt文本。
考虑到实际部署，我们使用占位符：`https://placehold.co/400x600?text=郑永年`，并设置alt为“郑永年教授的肖像”。
4. 响应式：已经设置了响应式的类，如md:col-span-4等。
5. 按照约束，不能使用内联样式，全部使用Tailwind类。
转换步骤：
- 整个组件的背景色是白色，但页面默认白色，所以不加bg-white。
- 内边距：p-6 md:p-12
- 主布局：flex flex-col，宽度w-full
Header部分：
- flex flex-col items-center mb-8 md:mb-10
- 标题：h1，类：text-2xl md:text-3xl font-bold text-gray-800 mb-3
- 装饰线：div，类：w-16 h-1 bg-amber-500
MainContent部分：
- grid grid-cols-12 gap-x-8 lg:gap-x-16 gap-y-8 md:gap-y-0 （注意：gap-y-8在移动设备有，在md以上为0）
左侧ProfileImageSection（col-span-12 md:col-span-4）：
- 图片：img，类：w-full object-cover aspect-[3/4] （注意：aspect-[3/4]在Tailwind中需要启用aspect-ratio插件，但我们的配置中没有，所以使用自定义样式？但是约束不允许使用自定义样式。我们可以用其他方式实现比例，比如使用一个容器设置padding-bottom来实现，但这里要求使用Tailwind类。我们可以使用配置中的aspectRatio扩展，但是查看配置，我们有aspect-ratio的类，如aspect-[3/4]可能不在配置中，所以我们需要用其他方法。
由于配置中扩展了aspectRatio，我们查看配置的aspectRatio部分，有16/9,4/3,3/2,3/4,1/1,9/16,2/3。其中3/4是存在的，所以我们可以使用`aspect-3/4`（注意：Tailwind中写为`aspect-[3/4]`或者如果配置了`aspect-3/4`这个类？但是配置中写的是`"3/4": "3/4"`，所以我们可以使用`aspect-3/4`。但是，在Tailwind中，通常使用`aspect-4/3`表示4:3，而我们这里是3:4，所以应该是`aspect-[3/4]`，但配置中没有明确，所以我们使用配置中存在的`aspect-3/4`？实际上，配置中有一个`"3/4": "3/4"`，所以我们可以使用`aspect-3/4`。但是，在Tailwind中，aspect ratio的类名是`aspect-{ratio}`，其中ratio是配置的key。配置中有一个`"3/4": "3/4"`，那么类名就是`aspect-3/4`。
因此，图片的类为：`w-full object-cover aspect-3/4`
右侧BiographySection（col-span-12 md:col-span-8）：
- flex flex-col gap-y-5
传记段落：p标签，类：text-base text-gray-700 leading-relaxed
注意：JSON中每个段落都是独立的，所以我们直接映射。
另外，左侧的Caption部分（头像下面的文字）：
- 姓名：h2，类：text-xl font-bold text-gray-900
- 职位：两个文本，类：text-sm text-gray-600 mt-2 和 mt-1
最后，整个组件的结构如下：
注意：我们使用容器（container）吗？用户没有明确要求，但是组件内部已经使用了网格布局，并且是响应式的，所以不需要额外的容器。但是，整个组件的背景和内边距已经设置，所以直接按照结构输出。
代码实现：
由于用户提供了JSON结构，我们需要将其转换为Tailwind HTML代码。注意以下事项：
1. 颜色：使用Tailwind的颜色类，例如#1F2937对应gray-800，#F59E0B对应amber-500，#4B5563对应gray-600，#374151对应gray-700等。
2. 布局：使用flex和grid布局，按照JSON中的gridColumn设置。
3. 图片：用户指定了src为"院长.jpg"，但我们没有这个图片，根据图片智能填充机制，我们可以使用一个占位符。由于是头像，我们可以使用头像类别中的图片，但用户没有指定编号，我们可以随机选一个，比如`/assets/images/avatar/01.jpeg`。或者，如果用户要求使用占位符，则用`https://placehold.co/400x600`（因为头像区域宽高比是3/4，但宽度是100%，所以高度自适应，我们用一个400x600的占位图）。但是，用户没有明确要求更新图片，所以我们保持原样，即使用`院长.jpg`。但是，在代码中，我们需要一个可访问的图片，所以我们可以暂时用占位符代替，或者使用提供的头像图片。由于用户没有提供图片，我们使用占位符，并给出合适的alt文本。
考虑到实际部署，我们使用占位符：`https://placehold.co/400x600?text=郑永年`，并设置alt为“郑永年教授的肖像”。
4. 响应式：已经设置了响应式的类，如md:col-span-4等。
5. 按照约束，不能使用内联样式，全部使用Tailwind类。
转换步骤：
- 整个组件的背景色是白色，但页面默认白色，所以不加bg-white。
- 内边距：p-6 md:p-12
- 主布局：flex flex-col，宽度w-full
Header部分：
- flex flex-col items-center mb-8 md:mb-10
- 标题：h1，类：text-2xl md:text-3xl font-bold text-gray-800 mb-3
- 装饰线：div，类：w-16 h-1 bg-amber-500
MainContent部分：
- grid grid-cols-12 gap-x-8 lg:gap-x-16 gap-y-8 md:gap-y-0 （注意：gap-y-8在移动设备有，在md以上为0）
左侧ProfileImageSection（col-span-12 md:col-span-4）：
- 图片：img，类：w-full object-cover aspect-[3/4] （注意：aspect-[3/4]在Tailwind中需要启用aspect-ratio插件，但我们的配置中没有，所以使用自定义样式？但是约束不允许使用自定义样式。我们可以用其他方式实现比例，比如使用一个容器设置padding-bottom来实现，但这里要求使用Tailwind类。我们可以使用配置中的aspectRatio扩展，但是查看配置，我们有aspect-ratio的类，如aspect-[3/4]可能不在配置中，所以我们需要用其他方法。
由于配置中扩展了aspectRatio，我们查看配置的aspectRatio部分，有16/9,4/3,3/2,3/4,1/1,9/16,2/3。其中3/4是存在的，所以我们可以使用`aspect-3/4`（注意：Tailwind中写为`aspect-[3/4]`或者如果配置了`aspect-3/4`这个类？但是配置中写的是`"3/4": "3/4"`，所以我们可以使用`aspect-3/4`。但是，在Tailwind中，通常使用`aspect-4/3`表示4:3，而我们这里是3:4，所以应该是`aspect-[3/4]`，但配置中没有明确，所以我们使用配置中存在的`aspect-3/4`？实际上，配置中有一个`"3/4": "3/4"`，所以我们可以使用`aspect-3/4`。但是，在Tailwind中，aspect ratio的类名是`aspect-{ratio}`，其中ratio是配置的key。配置中有一个`"3/4": "3/4"`，那么类名就是`aspect-3/4`。
因此，图片的类为：`w-full object-cover aspect-3/4`
右侧BiographySection（col-span-12 md:col-span-8）：
- flex flex-col gap-y-5
传记段落：p标签，类：text-base text-gray-700 leading-relaxed
注意：JSON中每个段落都是独立的，所以我们直接映射。
另外，左侧的Caption部分（头像下面的文字）：
- 姓名：h2，类：text-xl font-bold text-gray-900
- 职位：两个文本，类：text-sm text-gray-600 mt-2 和 mt-1
最后，整个组件的结构如下：
注意：我们使用容器（container）吗？用户没有明确要求，但是组件内部已经使用了网格布局，并且是响应式的，所以不需要额外的容器。但是，整个组件的背景和内边距已经设置，所以直接按照结构输出。
代码实现：
角色
assistant
content