tailwind布局实现手机端简洁车险方案多家智能报价ui效果代码-html代码-BFW代码库

tailwind布局实现手机端简洁车险方案多家智能报价ui效果代码

代码语言：html

代码描述：tailwind布局实现手机端简洁车险方案多家智能报价ui效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>车险方案报价</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1E40AF', // 深蓝主色调，体现专业可靠
            secondary: '#3B82F6', // 蓝色辅助色
            success: '#10B981', // 成功色
            warning: '#F59E0B', // 警告色
            neutral: '#F3F4F6', // 背景色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .insurance-card {
        @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300;
      }
      .insurance-card:hover {
        @apply shadow-lg transform -translate-y-1;
      }
      .btn-primary {
        @apply bg-primary text-white py-3 px-6 rounded-lg font-medium transition-all duration-300 active:scale-95;
      }
      .toggle-switch:checked + .toggle-slider {
        @apply bg-success;
      }
      .toggle-switch:checked + .toggle-slider:before {
        @apply transform translate-x-5;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen">
  <!-- 顶部导航 -->
  <header class="bg-primary text-white shadow-md fixed top-0 left-0 right-0 z-50">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <button class="text-white focus:outline-none">
        <i class="fa fa-arrow-left text-xl"></i>
      </button>
      <h1 class="text-xl font-bold">车险方案报价</h1>
      <button class="text-white focus:outline-none">
        <i class="fa fa-info-circle text-xl"></i>
      </button>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class=.........完整代码请登录后点击上方下载按钮下载查看