仪表盘风格卡片 Tailwind网站组件

<div id="dashboard" class="version-container  max-w-6xl mx-auto">
        <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl shadow-2xl p-8 text-white">
            <div class="text-center mb-8">
                <h1 class="text-4xl font-bold mb-2">🚀 IP智能分析仪表盘</h1>
                <p class="text-gray-300">全方位网络信息监控</p>
            </div>

<div class="bg-gray-800/50 rounded-2xl p-6 border border-gray-700 animate-scaleIn" style="animation-delay: 0.1s">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">安全等级</h3>
                        <div class="w-3 h-3 bg-blue-400 rounded-full animate-pulse"></div>
                    </div>
                    <p class="text-2xl font-bold text-blue-400">可信</p>
                    <p class="text-sm text-gray-400">DNS解析正常</p>
                </div>

<div class="bg-gray-800/50 rounded-2xl p-6 border border-gray-700 animate-scaleIn" style="animation-delay: 0.2s">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">地理精度</h3>
                        <div class="w-3 h-3 bg-yellow-400 rounded-full animate-pulse"></div>
                    </div>
                    <p class="text-2xl font-bold text-yellow-400">高</p>
                    <p class="text-sm text-gray-400">城市级定位</p>
                </div>

<div class="bg-gray-800/50 rounded-2xl p-6 border border-gray-700 animate-scaleIn" style="animation-delay: 0.3s">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">ISP类型</h3>
                        <div class="w-3 h-3 bg-purple-400 rounded-full animate-pulse"></div>
                    </div>
                    <p class="text-2xl font-bold text-purple-400">商业</p>
                    <p class="text-sm text-gray-400">大型提供商</p>
                </div>
            </div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div class="bg-gray-800/50 rounded-2xl p-6 border border-gray-700">
                    <h3 class="text-2xl font-bold mb-6 text-center">📍 位置信息</h3>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center py-3 border-b border-gray-700">
                            <span class="text-gray-400">IP地址:</span>
                            <span class="text-xl font-bold text-blue-400" data-field="ip">1.1.1.1</span>
                        </div>
                        <div class="flex justify-between items-center py-3 border-b border-gray-700">
                            <span class="text-gray-400">国家:</span>
                            <span class="text-lg font-semibold" data-field="country">🇺🇸 美国</span>
                        </div>
                        <div class="flex justify-between items-center py-3 border-b border-gray-700">
                            <span class="text-gray-400">地区:</span>
                            <span class="text-lg font-semibold" data-field="region">加利福尼亚州</span>
                        </div>
                        <div class="flex justify-between items-center py-3">
                            <span class="text-gray-400">城市:</span>
                            <span class="text-lg font-semibold" data-field="city">山景城</span>
                        </div>
                    </div>
                </div>

<div class="bg-gray-800/50 rounded-2xl p-6 border border-gray-700">
                    <h3 class="text-2xl font-bold mb-6 text-center">🏢 服务商信息</h3>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center py-3 border-b border-gray-700">
                            <span class="text-gray-400">ISP:</span>
                            <span class="text-lg font-semibold text-green-400" data-field="isp">Google LLC</span>
                        </div>
                        <div class="flex justify-between items-center py-3 border-b border-gray-700">
                            <span class="text-gray-400">组织:</span>
                            <span class="text-lg font-semibold" data-field="org">Google Public DNS</span>
                        </div>
                        <div class="flex justify-between items-center py-3">
                            <span class="text-gray-400">时区:</span>
                            <span class="text-lg font-semibold text-orange-400" data-field="timezone">America/Los_Angeles</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>