三十的博客

Tailwind CSS 学习

本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。
发布时间
阅读量 加载中...

个人名片卡片

目标： 练习基础布局、间距、颜色和文字样式

练习要点 ​：

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="bg-white rounded-lg shadow-lg p-8 max-w-sm mx-auto">
      <img
        src="./header.jpg"
        alt="头像"
        class="rounded-full w-24 h-24 mx-auto mb-4"
      />
      <h2 class="text-2xl font-bold text-center text-gray-800">张三</h2>
      <p class="text-gray-600 text-center mb-2">前端开发者</p>
      <p class="text-sm text-gray-500 text-center">热爱编程与设计</p>
      <div class="flex justify-center space-x-4 mt-4">
        <button
          class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
        >
          联系我
        </button>
        <button
          class="border border-gray-300 hover:bg-gray-100 px-4 py-2 rounded"
        >
          了解更多
        </button>
      </div>
    </div>
  </body>
</html>

响应式导航栏

目标： 练习 Flexbox 布局和响应式设计

练习要点 ​：

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <nav class="bg-white shadow-lg">
      <div class="max-w-6xl mx-auto px-4">
        <div class="flex space-x-7">
          <div class="flex items-center py-4">
            <span class="text-gray-500 text-lg font-semibold">我的网站</span>
          </div>
          <div class="hidden md:flex items-center space-x-1">
            <a href="#" class="text-gray-500 hover:text-gray-700 px-4 py-2"
              >首页</a
            >
            <a href="#" class="text-gray-500 hover:text-gray-700 px-4 py-2"
              >服务</a
            >
            <a href="#" class="text-gray-500 hover:text-gray-700 px-4 py-2"
              >关于</a
            >
            <a href="#" class="text-gray-500 hover:text-gray-700 px-4 py-2"
              >联系</a
            >
          </div>
        </div>
      </div>
    </nav>
  </body>
</html>

产品展示网格

​ 目标： 练习 Grid 布局和卡片设计

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="max-w-7xl mx-auto px-4 py-8">
      <h2 class="text-3xl font-bold text-center mb-8">我们的产品</h2>
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <img
          src="./header.jpg"
          alt="产品图片"
          class="w-full h-48 object-cover"
        />
        <div class="p-6">
          <h3 class="text-gray-800 font-bold text-xl">产品名称</h3>
          <p class="text-gray-600 mb-2">产品描述文字...</p>
          <div class="flex justify-between items-center">
            <span class="text-green-600 text-2xl font-bold">$99</span>
            <button
              class="text-white bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded"
            >
              购买
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

用户评论组件

目标： 练习更复杂的布局和间距控制

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md p-6">
      <div class="flex items-center mb-4">
        <img src="./header.jpg" alt="用户" class="rounded-full w-12 h-12" />
        <div class="ml-4">
          <h4 class="font-semibold">李四</h4>
          <div class="flex text-yellow-400">
            ★★★★☆
            <!-- 五星评分 -->
          </div>
        </div>
      </div>
      <p class="text-gray-600">
        这个产品真的很棒！使用体验非常好，强烈推荐给大家。
      </p>
      <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
        <span>2天前</span>
        <button class="text-blue-500 hover:text-blue-600">回复</button>
      </div>
    </div>
  </body>
</html>

完整的登录页面

目标： 综合运用所有技能

此演示仅在桌面端浏览器中可用

html 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div
      class="flex items-center justify-center min-h-screen p-4 
      bg-gradient-to-br from-blue-400 to-purple-600"
    >
      <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-8">
        <h2 class="text-2xl font-bold text-center mb-2 text-gray-800">
          欢迎回来
        </h2>
        <p class="text-gray-600 text-center mb-8">请登录您的账户</p>

        <form class="space-y-6">
          <div>
            <label class="text-sm block font-medium text-gray-700 mb-2"
              >邮箱地址</label
            >
            <input
              type="email"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg 
              focus:ring-2 focus:ring-blue-500 focus:outline-none focus:border-transparent"
            />
          </div>

          <div>
            <label class="text-sm block font-medium text-gray-700 mb-2"
              >密码</label
            >
            <input
              type="password"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg 
              focus:ring-2 focus:ring-blue-500 focus:outline-none focus:border-transparent"
            />
          </div>

          <button
            type="submit"
            class="w-full bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-semibold py-2"
          >
            登录
          </button>
        </form>

        <div class="text-center mt-6">
          <a class="text-sm text-blue-500 hover:text-blue-600" href="#"
            >忘记密码？</a
          >
        </div>
      </div>
    </div>
  </body>
</html>
#Tailwind #Css