构建布局与组件

|
<div className="flex flex-row gap-4 p-4 bg-gray-100">
  {/* flex 启用弹性布局，flex-row 设置水平排列，gap-4 设置子元素间距 */}
  <div className="p-4 bg-blue-500 text-white rounded">项目 1</div>
  {/* 第一个弹性项目，蓝色背景 */}
  <div className="p-4 bg-green-500 text-white rounded">项目 2</div>
  {/* 第二个弹性项目，绿色背景 */}
  <div className="p-4 bg-purple-500 text-white rounded">项目 3</div>
  {/* 第三个弹性项目，紫色背景 */}
</div>

|
<div className="flex justify-center items-center h-64 bg-gray-100">
  {/* 使用 justify-center 和 items-center 实现完全居中 */}
  <div className="p-6 bg-white rounded-lg shadow-lg">
    {/* 居中的白色卡片 */}
    完全居中的内容
  </div>
</div>

|
<div className="grid grid-cols-3 gap-4 p-4">
  {/* grid 启用网格布局，grid-cols-3 创建三列，gap-4 设置网格间距 */}
  <div className="p-6 bg-blue-100 rounded-lg">卡片 1</div>
  {/* 第一列第一行的卡片 */}
  <div className="p-6 bg-green-100 rounded-lg">卡片 2</div>
  {/* 第二列第一行的卡片 */}
  <div className="p-6 bg-purple-100 rounded-lg">卡片 3</div>
  {/* 第三列第一行的卡片 */}
  <div className="p-6 bg-yellow-100 rounded-lg">卡片 4</div>
  {/* 第一列第二行的卡片 */}
  <div className="p-6 bg-pink-100 rounded-lg">卡片 5</div>
  {/* 第二列第二行的卡片 */}
  <div className="p-6 bg-indigo-100 rounded-lg">卡片 6</div>
  {/* 第三列第二行的卡片 */}
</div>

|
<div className="grid grid-cols-4 gap-4 p-4">
  {/* 创建四列网格 */}
  <div className="col-span-2 p-6 bg-blue-500 text-white rounded-lg">
    {/* col-span-2 让这个元素跨越两列 */}
    占据两列的内容
  </div>
  <div className="p-6 bg-green-500 text-white rounded-lg">正常</div>
  <div className="p-6 bg-purple-500 text-white rounded-lg">正常</div>
  <div className="p-6 bg-yellow-500 text-white rounded-lg">正常</div>
  <div className="col-span-4 p-6 bg-red-500 text-white rounded-lg">
    {/* col-span-4 让这个元素跨越全部四列 */}
    占据整行的内容
  </div>
</div>

|
<div className="container mx-auto p-4 bg-gray-100">
  {/* container 设置响应式最大宽度，mx-auto 实现水平居中，p-4 添加内边距 */}
  <div className="bg-white p-6 rounded-lg shadow">
    {/* 白色内容区域 */}
    这是一个响应式容器，会根据屏幕尺寸自动调整宽度
  </div>
</div>

|
<div className="space-y-4 p-6 bg-gray-100">
  {/* space-y-4 为所有子元素添加垂直间距，p-6 为容器添加内边距 */}
  <div className="p-4 bg-white rounded shadow">
    {/* p-4 为这个元素添加内边距 */}
    第一个卡片，有内边距
  </div>
  <div className="p-4 bg-white rounded shadow">
    {/* 第二个卡片，也有内边距 */}
    第二个卡片，有内边距
  </div>
  <div className="p-4 bg-white rounded shadow">
    {/* 第三个卡片，也有内边距 */}
    第三个卡片，有内边距
  </div>
</div>

|
<div className="space-y-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <div className="font-sans text-lg">
    {/* font-sans 应用无衬线字体，text-lg 设置较大字号 */}
    这是无衬线字体（Sans Serif），看起来简洁现代
  </div>
  <div className="font-serif text-lg">
    {/* font-serif 应用衬线字体 */}
    这是衬线字体（Serif），看起来传统正式
  </div>
  <div className="font-mono text-lg">
    {/* font-mono 应用等宽字体 */}
    这是等宽字体（Monospace），适合代码展示
  </div>
</div>

|
<div className="space-y-3 p-6">
  {/* space-y-3 为子元素添加垂直间距，p-6 添加内边距 */}
  <div className="font-thin text-lg">极细字体（Thin 100）</div>
  {/* font-thin 应用最细的字体 */}
  <div className="font-light text-lg">细字体（Light 300）</div>
  {/* font-light 应用细字体 */}
  <div className="font-normal text-lg">正常字体（Normal 400）</div>
  {/* font-normal 应用正常字体，这是默认值 */}
  <div className="font-medium text-lg">中等字体（Medium 500）</div>
  {/* font-medium 应用中等字体 */}
  <div className="font-semibold text-lg">半粗字体（Semibold 600）</div>
  {/* font-semibold 应用半粗字体 */}
  <div className="font-bold text-lg">粗体（Bold 700）</div>
  {/* font-bold 应用粗体，最常用的粗体级别 */}
  <div className="font-extrabold text-lg">超粗字体（Extrabold 800）</div>
  {/* font-extrabold 应用超粗字体 */}
  <div className="font-black text-lg">最粗字体（Black 900）</div>
  {/* font-black 应用最粗的字体 */}
</div>

|
<div className="space-y-6 p-6">
  {/* space-y-6 为子元素添加垂直间距，p-6 添加内边距 */}
  <div>
    {/* 紧凑行高示例 */}
    <div className="font-semibold mb-2">紧凑行高（leading-tight）</div>
    {/* font-semibold 设置半粗字体，mb-2 添加底部外边距 */}
    <p className="leading-tight text-gray-700">
      {/* leading-tight 设置紧凑行高，text-gray-700 设置文本颜色 */}
      这是一段使用紧凑行高的文本。行高较小，文本看起来比较紧凑，适合标题或需要节省空间的场合。每一行之间的距离较小，文本密度较高。
    </p>
  </div>
  <div>
    {/* 正常行高示例 */}
    <div className="font-semibold mb-2">正常行高（leading-normal）</div>
    {/* 这是默认的行高，适合大多数正文内容 */}
    <p className="leading-normal text-gray-700">
      这是一段使用正常行高的文本。行高适中，文本看起来舒适易读，适合大多数正文内容。每一行之间的距离适中，既不会显得拥挤，也不会浪费空间。
    </p>
  </div>
  <div>
    {/* 宽松行高示例 */}
    <div className="font-semibold mb-2">宽松行高（leading-relaxed）</div>
    {/* 适合需要更好可读性的长文本 */}
    <p className="leading-relaxed text-gray-700">
      这是一段使用宽松行高的文本。行高较大，文本看起来更加舒适，适合需要更好可读性的长文本。每一行之间的距离较大，文本密度较低，阅读体验更好。
    </p>
  </div>
</div>

|
<div className="space-y-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <div className="border-b pb-2">
    {/* border-b 添加底部边框，pb-2 添加底部内边距 */}
    <div className="font-semibold mb-2">左对齐（text-left）</div>
    {/* font-semibold 设置半粗字体，mb-2 添加底部外边距 */}
    <p className="text-left text-gray-700">这是一段左对齐的文本。左对齐是默认的对齐方式，适合大多数正文内容。文本从左边开始排列，右边自然换行，这是最自然的阅读方式。</p>
  </div>
  <div className="border-b pb-2">
    {/* 居中对齐示例 */}
    <div className="font-semibold mb-2">居中对齐（text-center）</div>
    <p className="text-center text-gray-700">这是一段居中对齐的文本。居中对齐适合标题、按钮文字等需要强调的内容。文本在容器中居中显示，左右两边留出相等的空白。</p>
  </div>
  <div className="border-b pb-2">
    {/* 右对齐示例 */}
    <div className="font-semibold mb-2">右对齐（text-right）</div>
    <p className="text-right text-gray-700">这是一段右对齐的文本。右对齐适合数字、日期等需要对齐的内容。文本从右边开始排列，左边自然换行，常用于表格或列表。</p>
  </div>
  <div>
    {/* 两端对齐示例 */}
    <div className="font-semibold mb-2">两端对齐（text-justify）</div>
    <p className="text-justify text-gray-700">这是一段两端对齐的文本。两端对齐让文本的左右两边都对齐，适合需要整齐边界的段落。文本会自动调整单词间距，让每一行都填满容器的宽度。</p>
  </div>
</div>

|
<div className="max-w-2xl mx-auto p-8 bg-white rounded-lg shadow-lg">
  {/* max-w-2xl 设置最大宽度，mx-auto 实现水平居中，p-8 添加内边距，bg-white 设置白色背景，rounded-lg 设置圆角，shadow-lg 添加阴影 */}
  <h1 className="font-serif font-bold text-3xl text-center mb-4 text-gray-900">
    {/* font-serif 应用衬线字体，font-bold 设置粗体，text-3xl 设置大字号，text-center 居中对齐，mb-4 添加底部外边距，text-gray-900 设置深灰色文本 */}
    文章标题
  </h1>
  <div className="text-sm text-gray-500 text-center mb-6">
    {/* text-sm 设置小字号，text-gray-500 设置灰色文本，text-center 居中对齐，mb-6 添加底部外边距 */}
    作者：张三 | 发布时间：2024年1月1日
  </div>
  <div className="space-y-4">
    {/* space-y-4 为子元素添加垂直间距 */}
    <p className="font-sans font-normal leading-relaxed text-left text-gray-700">
      {/* font-sans 应用无衬线字体，font-normal 设置正常字体粗细，leading-relaxed 设置宽松行高，text-left 左对齐，text-gray-700 设置文本颜色 */}
      这是文章的第一段正文。我们使用了无衬线字体，正常字体粗细，宽松的行高，让文本更加易读。左对齐的方式让阅读更加自然，深灰色的文本颜色既不会太刺眼，也能保证良好的对比度。
    </p>
    <p className="font-sans font-normal leading-relaxed text-left text-gray-700">
      这是文章的第二段正文。通过合理的排版设置，我们能够创建出既美观又易读的文本内容。合适的字体、粗细、行高和对齐方式，能够让读者更加专注于内容本身，而不是被排版问题分散注意力。
    </p>
    <blockquote className="font-serif font-medium italic leading-relaxed text-left pl-4 border-l-4 border-blue-500 text-gray-600">
      {/* font-serif 应用衬线字体，font-medium 设置中等字体粗细，italic 设置斜体，leading-relaxed 设置宽松行高，text-left 左对齐，pl-4 添加左侧内边距，border-l-4 添加左侧边框，border-blue-500 设置蓝色边框，text-gray-600 设置文本颜色 */}
      "这是一段引用文字。我们使用了衬线字体和斜体来区分引用内容，左侧的蓝色边框进一步强调了这是引用内容。"
    </blockquote>
  </div>
</div>

|
<div className="grid grid-cols-5 gap-4 p-6">
  {/* grid 启用网格布局，grid-cols-5 创建五列，gap-4 设置间距，p-6 添加内边距 */}
  <div className="bg-blue-50 p-4 rounded text-center text-blue-900">
    {/* bg-blue-50 设置最浅的蓝色背景，p-4 添加内边距，rounded 设置圆角，text-center 居中对齐，text-blue-900 设置深蓝色文本 */}
    blue-50
  </div>
  <div className="bg-blue-200 p-4 rounded text-center text-blue-900">
    {/* bg-blue-200 设置浅蓝色背景 */}
    blue-200
  </div>
  <div className="bg-blue-500 p-4 rounded text-center text-white">
    {/* bg-blue-500 设置标准蓝色背景，text-white 设置白色文本 */}
    blue-500
  </div>
  <div className="bg-blue-700 p-4 rounded text-center text-white">
    {/* bg-blue-700 设置深蓝色背景 */}
    blue-700
  </div>
  <div className="bg-blue-900 p-4 rounded text-center text-white">
    {/* bg-blue-900 设置最深的蓝色背景 */}
    blue-900
  </div>
</div>

|
<div className="space-y-4 p-6 bg-gray-100">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距，bg-gray-100 设置浅灰色背景 */}
  <div className="bg-blue-500 p-4 rounded text-white">
    {/* bg-blue-500 设置蓝色背景，p-4 添加内边距，rounded 设置圆角，text-white 设置白色文本 */}
    完全不透明（opacity-100）
  </div>
  <div className="bg-blue-500 opacity-75 p-4 rounded text-white">
    {/* opacity-75 设置 75% 透明度，影响整个元素 */}
    75% 透明度（opacity-75）
  </div>
  <div className="bg-blue-500 opacity-50 p-4 rounded text-white">
    {/* opacity-50 设置 50% 透明度 */}
    50% 透明度（opacity-50）
  </div>
  <div className="bg-blue-500 opacity-25 p-4 rounded text-white">
    {/* opacity-25 设置 25% 透明度 */}
    25% 透明度（opacity-25）
  </div>
</div>

|
<div className="space-y-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <div className="border border-gray-300 p-4 rounded">
    {/* border 添加边框，border-gray-300 设置浅灰色边框，p-4 添加内边距，rounded 设置圆角 */}
    默认边框（border）
  </div>
  <div className="border-2 border-blue-500 p-4 rounded-lg">
    {/* border-2 设置 2px 边框宽度，border-blue-500 设置蓝色边框，rounded-lg 设置较大圆角 */}
    2px 蓝色边框（border-2 border-blue-500）
  </div>
  <div className="border-4 border-green-500 p-4 rounded-xl">
    {/* border-4 设置 4px 边框宽度，border-green-500 设置绿色边框，rounded-xl 设置超大圆角 */}
    4px 绿色边框（border-4 border-green-500）
  </div>
  <div className="border-l-4 border-purple-500 p-4 bg-purple-50 rounded">
    {/* border-l-4 设置左侧 4px 边框，border-purple-500 设置紫色边框，bg-purple-50 设置浅紫色背景 */}
    左侧边框（border-l-4 border-purple-500）
  </div>
</div>

|
<div className="grid grid-cols-3 gap-6 p-6 bg-gray-100">
  {/* grid 启用网格布局，grid-cols-3 创建三列，gap-6 设置间距，p-6 添加内边距，bg-gray-100 设置浅灰色背景 */}
  <div className="bg-white p-6 rounded-lg shadow-sm">
    {/* bg-white 设置白色背景，p-6 添加内边距，rounded-lg 设置圆角，shadow-sm 添加最小阴影 */}
    小阴影（shadow-sm）
  </div>
  <div className="bg-white p-6 rounded-lg shadow">
    {/* shadow 添加默认阴影 */}
    默认阴影（shadow）
  </div>
  <div className="bg-white p-6 rounded-lg shadow-md">
    {/* shadow-md 添加中等阴影 */}
    中等阴影（shadow-md）
  </div>
  <div className="bg-white p-6 rounded-lg shadow-lg">
    {/* shadow-lg 添加大阴影 */}
    大阴影（shadow-lg）
  </div>
  <div className="bg-white p-6 rounded-lg shadow-xl">
    {/* shadow-xl 添加超大阴影 */}
    超大阴影（shadow-xl）
  </div>
  <div className="bg-white p-6 rounded-lg shadow-2xl">
    {/* shadow-2xl 添加最大阴影 */}
    最大阴影（shadow-2xl）
  </div>
</div>

|
<div className="grid grid-cols-2 gap-6 p-6 bg-gray-50">
  {/* grid 启用网格布局，grid-cols-2 创建两列，gap-6 设置间距，p-6 添加内边距，bg-gray-50 设置浅灰色背景 */}
  <div className="bg-white p-6 rounded-lg shadow-md border border-gray-200">
    {/* bg-white 设置白色背景，p-6 添加内边距，rounded-lg 设置圆角，shadow-md 添加中等阴影，border 添加边框，border-gray-200 设置浅灰色边框 */}
    <h3 className="text-xl font-bold text-gray-900 mb-2">
      {/* text-xl 设置大字号，font-bold 设置粗体，text-gray-900 设置深灰色文本，mb-2 添加底部外边距 */}
      卡片标题
    </h3>
    <p className="text-gray-600 leading-relaxed">
      {/* text-gray-600 设置灰色文本，leading-relaxed 设置宽松行高 */}
      这是一个使用白色背景、边框和阴影的卡片。通过组合使用这些视觉工具类，我们能够创建出既美观又有层次感的视觉效果。
    </p>
  </div>
  <div className="bg-gradient-to-br from-blue-500 to-purple-600 p-6 rounded-lg shadow-lg text-white">
    {/* bg-gradient-to-br 设置从左上到右下的渐变背景，from-blue-500 设置起始蓝色，to-purple-600 设置结束紫色，shadow-lg 添加大阴影，text-white 设置白色文本 */}
    <h3 className="text-xl font-bold mb-2">
      {/* text-xl 设置大字号，font-bold 设置粗体，mb-2 添加底部外边距 */}
      渐变卡片
    </h3>
    <p className="opacity-90 leading-relaxed">
      {/* opacity-90 设置 90% 透明度，leading-relaxed 设置宽松行高 */}
      这是一个使用渐变背景的卡片。渐变背景能够创建出更加丰富的视觉效果，让页面看起来更加生动有趣。
    </p>
  </div>
</div>

|
<div className="space-x-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 active:bg-blue-800 transition-colors">
    {/* bg-blue-500 设置蓝色背景，text-white 设置白色文本，px-4 py-2 设置内边距，rounded 设置圆角，hover:bg-blue-600 设置悬浮时更深的蓝色，active:bg-blue-800 设置点击时最深的蓝色，transition-colors 添加颜色过渡动画 */}
    悬浮和点击按钮
  </button>
  <button className="bg-gray-500 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed" disabled>
    {/* bg-gray-500 设置灰色背景，opacity-50 设置半透明，cursor-not-allowed 设置禁用鼠标样式，disabled 属性禁用按钮 */}
    禁用按钮
  </button>
</div>

|
<div className="space-y-6 p-6">
  {/* space-y-6 为子元素添加垂直间距，p-6 添加内边距 */}
  <div>
    {/* 不同大小的按钮 */}
    <div className="font-semibold mb-3">不同大小的按钮</div>
    {/* font-semibold 设置半粗字体，mb-3 添加底部外边距 */}
    <div className="flex items-center gap-3">
      {/* flex 启用弹性布局，items-center 垂直居中，gap-3 设置间距 */}
      <button className="bg-blue-500 text-white px-2 py-1 text-sm rounded hover:bg-blue-600 transition-colors">
        {/* bg-blue-500 设置蓝色背景，text-white 设置白色文本，px-2 py-1 设置小内边距，text-sm 设置小字号，rounded 设置圆角，hover:bg-blue-600 设置悬浮时更深的蓝色，transition-colors 添加颜色过渡动画 */}
        小按钮
      </button>
      <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
        {/* px-4 py-2 设置标准内边距 */}
        标准按钮
      </button>
      <button className="bg-blue-500 text-white px-6 py-3 text-lg rounded hover:bg-blue-600 transition-colors">
        {/* px-6 py-3 设置大内边距，text-lg 设置大字号 */}
        大按钮
      </button>
    </div>
  </div>
  <div>
    {/* 不同颜色的按钮 */}
    <div className="font-semibold mb-3">不同颜色的按钮</div>
    <div className="flex items-center gap-3 flex-wrap">
      {/* flex-wrap 允许换行 */}
      <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
        {/* 蓝色按钮 */}
        蓝色按钮
      </button>
      <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors">
        {/* bg-green-500 设置绿色背景，hover:bg-green-600 设置悬浮时更深的绿色 */}
        绿色按钮
      </button>
      <button className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition-colors">
        {/* bg-red-500 设置红色背景，hover:bg-red-600 设置悬浮时更深的红色 */}
        红色按钮
      </button>
      <button className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition-colors">
        {/* bg-gray-500 设置灰色背景，hover:bg-gray-600 设置悬浮时更深的灰色 */}
        灰色按钮
      </button>
    </div>
  </div>
  <div>
    {/* 不同样式的按钮 */}
    <div className="font-semibold mb-3">不同样式的按钮</div>
    <div className="flex items-center gap-3 flex-wrap">
      <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
        {/* 实心按钮 */}
        实心按钮
      </button>
      <button className="border-2 border-blue-500 text-blue-500 px-4 py-2 rounded hover:bg-blue-50 transition-colors">
        {/* border-2 设置 2px 边框，border-blue-500 设置蓝色边框，text-blue-500 设置蓝色文本，hover:bg-blue-50 设置悬浮时浅蓝色背景 */}
        边框按钮
      </button>
      <button className="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:shadow-lg hover:bg-blue-600 transition-all">
        {/* rounded-lg 设置较大圆角，shadow-md 添加中等阴影，hover:shadow-lg 设置悬浮时更大阴影，hover:bg-blue-600 设置悬浮时更深的蓝色，transition-all 添加所有属性过渡动画 */}
        阴影按钮
      </button>
    </div>
  </div>
</div>

|
<div className="space-y-6 p-6 max-w-md">
  {/* space-y-6 为子元素添加垂直间距，p-6 添加内边距，max-w-md 设置最大宽度 */}
  <div>
    {/* 基础输入框 */}
    <label className="block text-sm font-medium text-gray-700 mb-2">
      {/* block 设置为块级元素，text-sm 设置小字号，font-medium 设置中等字体粗细，text-gray-700 设置深灰色文本，mb-2 添加底部外边距 */}
      基础输入框
    </label>
    <input 
      type="text" 
      placeholder="请输入内容" 
      className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
      {/* w-full 设置全宽，px-4 py-2 设置内边距，border 添加边框，border-gray-300 设置浅灰色边框，rounded 设置圆角，focus:outline-none 移除默认焦点轮廓，focus:ring-2 添加焦点环，focus:ring-blue-500 设置蓝色焦点环，focus:border-transparent 设置焦点时透明边框，transition-all 添加所有属性过渡动画 */}
    />
  </div>
  <div>
    {/* 带阴影的输入框 */}
    <label className="block text-sm font-medium text-gray-700 mb-2">
      带阴影的输入框
    </label>
    <input 
      type="text" 
      placeholder="请输入内容" 
      className="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:shadow-md transition-all"
      {/* rounded-lg 设置较大圆角，shadow-sm 添加小阴影，focus:shadow-md 设置焦点时中等阴影 */}
    />
  </div>
  <div>
    {/* 错误状态的输入框 */}
    <label className="block text-sm font-medium text-red-700 mb-2">
      {/* text-red-700 设置深红色文本 */}
      错误状态的输入框
    </label>
    <input 
      type="text" 
      placeholder="请输入内容" 
      className="w-full px-4 py-2 border-2 border-red-300 rounded focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all"
      {/* border-2 设置 2px 边框，border-red-300 设置浅红色边框，focus:ring-red-500 设置红色焦点环 */}
    />
    <p className="mt-1 text-sm text-red-600">
      {/* mt-1 添加顶部外边距，text-sm 设置小字号，text-red-600 设置红色文本 */}
      请输入有效的内容
    </p>
  </div>
  <div>
    {/* 禁用状态的输入框 */}
    <label className="block text-sm font-medium text-gray-700 mb-2">
      禁用状态的输入框
    </label>
    <input 
      type="text" 
      placeholder="请输入内容" 
      disabled
      className="w-full px-4 py-2 border border-gray-300 rounded bg-gray-100 text-gray-500 cursor-not-allowed"
      {/* bg-gray-100 设置浅灰色背景，text-gray-500 设置灰色文本，cursor-not-allowed 设置禁用鼠标样式，disabled 属性禁用输入框 */}
    />
  </div>
</div>

|
<div className="space-x-4 p-6">
  {/* space-y-4 为子元素添加垂直间距，p-6 添加内边距 */}
  <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors duration-200">
    {/* transition-colors 只过渡颜色属性，duration-200 设置 200ms 的过渡时间 */}
    颜色过渡（200ms）
  </button>
  <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 hover:scale-105 transition-all duration-300">
    {/* hover:scale-105 设置悬浮时放大 5%，transition-all 过渡所有属性，duration-300 设置 300ms 的过渡时间 */}
    颜色和缩放过渡（300ms）
  </button>
  <button className="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 hover:shadow-lg transition-all duration-500 ease-in-out">
    {/* hover:shadow-lg 设置悬浮时大阴影，duration-500 设置 500ms 的过渡时间，ease-in-out 设置缓入缓出效果 */}
    完整过渡（500ms，缓入缓出）
  </button>
</div>

|
<nav className="bg-white shadow-md">
  {/* bg-white 设置白色背景，shadow-md 添加中等阴影 */}
  <div className="container mx-auto px-4">
    {/* container 设置响应式最大宽度，mx-auto 实现水平居中，px-4 添加左右内边距 */}
    <div className="flex items-center justify-between h-16">
      {/* flex 启用弹性布局，items-center 垂直居中，justify-between 两端对齐，h-16 设置高度 */}
      <div className="flex items-center">
        {/* Logo 区域 */}
        <div className="text-xl font-bold text-blue-600">
          {/* text-xl 设置大字号，font-bold 设置粗体，text-blue-600 设置蓝色文本 */}
          我的网站
        </div>
      </div>
      <div className="hidden md:flex items-center space-x-6">
        {/* hidden 在小屏幕隐藏，md:flex 在中等屏幕及以上显示，items-center 垂直居中，space-x-6 设置水平间距 */}
        <a href="#" className="text-gray-700 hover:text-blue-600 transition-colors">
          {/* text-gray-700 设置深灰色文本，hover:text-blue-600 设置悬浮时蓝色文本，transition-colors 添加颜色过渡动画 */}
          首页
        </a>
        <a href="#" className="text-gray-700 hover:text-blue-600 transition-colors">
          关于
        </a>
        <a href="#" className="text-gray-700 hover:text-blue-600 transition-colors">
          服务
        </a>
        <a href="#" className="text-gray-700 hover:text-blue-600 transition-colors">
          联系
        </a>
      </div>
      <div className="md:hidden">
        {/* md:hidden 在中等屏幕及以上隐藏 */}
        <button className="text-gray-700 hover:text-blue-600 transition-colors">
          {/* 移动端菜单按钮 */}
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            {/* w-6 h-6 设置宽度和高度，fill="none" 不填充，stroke="currentColor" 使用当前文本颜色，viewBox 设置视图框 */}
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            {/* strokeLinecap="round" 设置圆角端点，strokeLinejoin="round" 设置圆角连接，strokeWidth={2} 设置线宽，d 定义路径 */}
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

|
<div className="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
  {/* max-w-sm 设置最大宽度，mx-auto 实现水平居中，bg-white 设置白色背景，rounded-lg 设置圆角，shadow-lg 添加大阴影，overflow-hidden 隐藏溢出内容 */}
  <img 
    src="https://via.placeholder.com/400x200" 
    alt="卡片图片" 
    className="w-full h-48 object-cove bg-red-50"
    {/* w-full 设置全宽，h-48 设置高度，object-cover 保持宽高比并覆盖 */}
  />
  <div className="p-6">
    {/* p-6 添加内边距 */}
    <h3 className="text-xl font-bold text-gray-900 mb-2">
      {/* text-xl 设置大字号，font-bold 设置粗体，text-gray-900 设置深灰色文本，mb-2 添加底部外边距 */}
      卡片标题
    </h3>
    <p className="text-gray-600 leading-relaxed mb-4">
      {/* text-gray-600 设置灰色文本，leading-relaxed 设置宽松行高，mb-4 添加底部外边距 */}
      这是卡片的内容描述。通过组合使用 Tailwind CSS 的工具类，我们能够创建出既美观又实用的卡片组件。
    </p>
    <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
      {/* bg-blue-500 设置蓝色背景，text-white 设置白色文本，px-4 py-2 设置内边距，rounded 设置圆角，hover:bg-blue-600 设置悬浮时更深的蓝色，transition-colors 添加颜色过渡动画 */}
      了解更多
    </button>
  </div>
</div>

|
<form className="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
  {/* max-w-md 设置最大宽度，mx-auto 实现水平居中，bg-white 设置白色背景，p-8 添加内边距，rounded-lg 设置圆角，shadow-md 添加中等阴影 */}
  <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
    {/* text-2xl 设置超大字号，font-bold 设置粗体，text-gray-900 设置深灰色文本，mb-6 添加底部外边距，text-center 居中对齐 */}
    联系表单
  </h2>
  <div className="space-y-4">
    {/* space-y-4 为子元素添加垂直间距 */}
    <div>
      {/* 姓名输入框 */}
      <label className="block text-sm font-medium text-gray-700 mb-2">
        {/* block 设置为块级元素，text-sm 设置小字号，font-medium 设置中等字体粗细，text-gray-700 设置深灰色文本，mb-2 添加底部外边距 */}
        姓名
      </label>
      <input 
        type="text" 
        className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
        {/* w-full 设置全宽，px-4 py-2 设置内边距，border 添加边框，border-gray-300 设置浅灰色边框，rounded 设置圆角，focus:outline-none 移除默认焦点轮廓，focus:ring-2 添加焦点环，focus:ring-blue-500 设置蓝色焦点环，focus:border-transparent 设置焦点时透明边框，transition-all 添加所有属性过渡动画 */}
        placeholder="请输入您的姓名"
      />
    </div>
    <div>
      {/* 邮箱输入框 */}
      <label className="block text-sm font-medium text-gray-700 mb-2">
        邮箱
      </label>
      <input 
        type="email" 
        className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
        placeholder="请输入您的邮箱"
      />
    </div>
    <div>
      {/* 消息输入框 */}
      <label className="block text-sm font-medium text-gray-700 mb-2">
        消息
      </label>
      <textarea 
        rows={4}
        className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
        {/* rows={4} 设置行数，resize-none 禁止调整大小 */}
        placeholder="请输入您的消息"
      />
    </div>
    <button 
      type="submit" 
      className="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors font-medium"
      {/* w-full 设置全宽，font-medium 设置中等字体粗细 */}
    >
      提交
    </button>
  </div>
</form>