Tailwind CSS 组件开发 #

<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded transition-colors">
  默认按钮
</button>

<!-- 主要按钮 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded font-medium">
  主要按钮
</button>

<!-- 次要按钮 -->
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded font-medium">
  次要按钮
</button>

<!-- 轮廓按钮 -->
<button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded font-medium transition-colors">
  轮廓按钮
</button>

<!-- 文字按钮 -->
<button class="text-blue-500 hover:text-blue-700 px-4 py-2 font-medium">
  文字按钮
</button>

<!-- 危险按钮 -->
<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded font-medium">
  删除
</button>

<!-- 小按钮 -->
<button class="bg-blue-500 text-white px-3 py-1.5 text-sm rounded">
  小按钮
</button>

<!-- 默认按钮 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  默认按钮
</button>

<!-- 大按钮 -->
<button class="bg-blue-500 text-white px-6 py-3 text-lg rounded">
  大按钮
</button>

<!-- 全宽按钮 -->
<button class="bg-blue-500 text-white w-full py-3 rounded">
  全宽按钮
</button>

<button class="
  bg-blue-500 text-white px-4 py-2 rounded font-medium
  hover:bg-blue-600
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  active:bg-blue-700
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-all
">
  完整状态按钮
</button>

<!-- 左侧图标 -->
<button class="flex items-center space-x-2 bg-blue-500 text-white px-4 py-2 rounded">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
  </svg>
  <span>添加</span>
</button>

<!-- 右侧图标 -->
<button class="flex items-center space-x-2 bg-blue-500 text-white px-4 py-2 rounded">
  <span>继续</span>
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
  </svg>
</button>

<!-- 纯图标按钮 -->
<button class="p-2 bg-blue-500 text-white rounded-full hover:bg-blue-600">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
  </svg>
</button>

<div class="bg-white rounded-lg shadow-md p-6">
  <h3 class="text-lg font-semibold text-gray-900">卡片标题</h3>
  <p class="text-gray-600 mt-2">这是卡片的描述内容，可以包含多行文字。</p>
</div>

<div class="bg-white rounded-lg shadow-md overflow-hidden">
  <img class="w-full h-48 object-cover" src="image.jpg" alt="图片">
  <div class="p-6">
    <h3 class="text-lg font-semibold text-gray-900">卡片标题</h3>
    <p class="text-gray-600 mt-2">卡片描述内容</p>
    <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
      了解更多
    </button>
  </div>
</div>

<div class="group bg-white rounded-lg shadow-md hover:shadow-xl p-6 transition-all duration-300 hover:-translate-y-1 cursor-pointer">
  <h3 class="font-semibold group-hover:text-blue-500 transition-colors">卡片标题</h3>
  <p class="text-gray-600 mt-2">卡片描述内容</p>
</div>

<div class="bg-white rounded-lg shadow-md overflow-hidden flex">
  <img class="w-48 h-48 object-cover" src="image.jpg" alt="图片">
  <div class="p-6 flex-1">
    <h3 class="text-lg font-semibold text-gray-900">卡片标题</h3>
    <p class="text-gray-600 mt-2">卡片描述内容</p>
  </div>
</div>

<!-- 基础输入框 -->
<input type="text" class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入内容">

<!-- 带标签 -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
  <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入用户名">
</div>

<!-- 带图标 -->
<div class="relative">
  <input type="text" class="w-full border border-gray-300 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="搜索...">
  <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
  </svg>
</div>

<textarea class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="请输入内容"></textarea>

<select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
  <option>请选择</option>
  <option>选项 1</option>
  <option>选项 2</option>
  <option>选项 3</option>
</select>

<!-- 复选框 -->
<label class="flex items-center">
  <input type="checkbox" class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500">
  <span class="ml-2">选项</span>
</label>

<!-- 单选框 -->
<label class="flex items-center">
  <input type="radio" class="w-4 h-4 text-blue-500 border-gray-300 focus:ring-blue-500">
  <span class="ml-2">选项</span>
</label>

<form class="space-y-4 max-w-md">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
    <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入用户名">
  </div>
  
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
    <input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入邮箱">
  </div>
  
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
    <input type="password" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入密码">
  </div>
  
  <button type="submit" class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600">
    注册
  </button>
</form>

<nav class="bg-white shadow">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <span class="font-bold text-xl">Logo</span>
      </div>
      
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-600 hover:text-blue-500">首页</a>
        <a href="#" class="text-gray-600 hover:text-blue-500">产品</a>
        <a href="#" class="text-gray-600 hover:text-blue-500">关于</a>
        <a href="#" class="text-gray-600 hover:text-blue-500">联系</a>
      </div>
      
      <div class="flex items-center space-x-4">
        <button class="text-gray-600 hover:text-blue-500">登录</button>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">注册</button>
      </div>
    </div>
  </div>
</nav>

<div class="w-64 bg-gray-100 min-h-screen p-4">
  <div class="font-bold text-xl mb-8">Logo</div>
  <nav class="space-y-2">
    <a href="#" class="flex items-center space-x-2 px-4 py-2 text-gray-700 hover:bg-gray-200 rounded">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
      </svg>
      <span>首页</span>
    </a>
    <a href="#" class="flex items-center space-x-2 px-4 py-2 text-gray-700 hover:bg-gray-200 rounded">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
      </svg>
      <span>用户</span>
    </a>
    <a href="#" class="flex items-center space-x-2 px-4 py-2 text-gray-700 hover:bg-gray-200 rounded">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
      </svg>
      <span>设置</span>
    </a>
  </nav>
</div>

<div class="fixed inset-0 z-50 overflow-y-auto">
  <!-- 遮罩层 -->
  <div class="fixed inset-0 bg-black/50 transition-opacity"></div>
  
  <!-- 模态框内容 -->
  <div class="flex min-h-full items-center justify-center p-4">
    <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
      <!-- 标题 -->
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold">模态框标题</h3>
        <button class="text-gray-400 hover:text-gray-600">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      
      <!-- 内容 -->
      <p class="text-gray-600 mb-6">这是模态框的内容描述。</p>
      
      <!-- 按钮 -->
      <div class="flex justify-end space-x-3">
        <button class="px-4 py-2 text-gray-600 hover:text-gray-800">取消</button>
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">确认</button>
      </div>
    </div>
  </div>
</div>

<!-- 基础标签 -->
<span class="inline-block px-3 py-1 text-sm font-medium bg-gray-100 text-gray-800 rounded-full">
  标签
</span>

<!-- 颜色标签 -->
<span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-800 rounded-full">
  蓝色标签
</span>

<span class="inline-block px-3 py-1 text-sm font-medium bg-green-100 text-green-800 rounded-full">
  成功
</span>

<span class="inline-block px-3 py-1 text-sm font-medium bg-red-100 text-red-800 rounded-full">
  错误
</span>

<span class="inline-block px-3 py-1 text-sm font-medium bg-yellow-100 text-yellow-800 rounded-full">
  警告
</span>