产品特色服务 Tailwind网站组件

<section class="bg-gradient-to-br from-gray-50 to-blue-50 py-16 px-4 rounded-3xl mb-16"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">产品特色服务</h2> <p class="text-gray-600 max-w-2xl mx-auto">专业化的服务体系，为您提供全方位的解决方案</p> </div> <div class="max-w-4xl mx-auto"> <div class="flex flex-wrap justify-center gap-4"> <div class="hexagon-item group"> <div class="hexagon bg-gradient-to-br from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 transition-all duration-300"> <div class="hexagon-content"> <div class="text-white text-center"> <div class="text-3xl mb-2">📊</div> <h3 class="font-bold">PostgreSQL</h3> </div> </div> <div class="flip-card-back bg-gradient-to-br from-purple-600 to-purple-700"> <div class="text-white text-center text-sm"> <p>企业级数据库</p> <p class="mt-2">高并发支持</p> </div> </div> </div> </div> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front bg-gradient-to-br from-red-500 to-red-600"> <div class="text-white text-center"> <div class="text-4xl mb-2">🐳</div> <h3 class="font-bold">Docker</h3> </div> </div> <div class="flip-card-back bg-gradient-to-br from-red-600 to-red-700"> <div class="text-white text-center text-sm"> <p>容器化部署</p> <p class="mt-2">环境一致性</p> </div> </div> </div> </div> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front bg-gradient-to-br from-yellow-500 to-orange-500"> <div class="text-white text-center"> <div class="text-4xl mb-2">☁️</div> <h3 class="font-bold">AWS</h3> </div> </div> <div class="flip-card-back bg-gradient-to-br from-yellow-600 to-orange-600"> <div class="text-white text-center text-sm"> <p>云服务平台</p> <p class="mt-2">弹性伸缩</p> </div> </div> </div> </div> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front bg-gradient-to-br from-indigo-500 to-indigo-600"> <div class="text-white text-center"> <div class="text-4xl mb-2">🔧</div> <h3 class="font-bold">Kubernetes</h3> </div> </div> <div class="flip-card-back bg-gradient-to-br from-indigo-600 to-indigo-700"> <div class="text-white text-center text-sm"> <p>容器编排</p> <p class="mt-2">自动化运维</p> </div> </div> </div> </div> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front bg-gradient-to-br from-teal-500 to-teal-600"> <div class="text-white text-center"> <div class="text-4xl mb-2">📊</div> <h3 class="font-bold">MongoDB</h3> </div> </div> <div class="flip-card-back bg-gradient-to-br from-teal-600 to-teal-700"> <div class="text-white text-center text-sm"> <p>NoSQL数据库</p> <p class="mt-2">灵活存储</p> </div> </div> </div> </div> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front bg-gradient-to-br from-pink-500 to-pink-600"> <div class="text-white text-center"> <div class="text-4xl mb-2">🚀</div> <h3 class="font-bold">GraphQL</h3> </div> </div> <div class="flip-card-back bg-gradient-to-br from-pink-600 to-pink-700"> <div class="text-white text-center text-sm"> <p>数据查询语言</p> <p class="mt-2">高效API</p> </div> </div> </div> </div> </div> </div></section> <style>
.flip-card {
                    background-color: transparent;
                    width: 150px;
                    height: 120px;
                    perspective: 1000px;
                    margin: 0 auto;
                }
                .flip-card-inner {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    transition: transform 0.6s;
                    transform-style: preserve-3d;
                    cursor: pointer;
                }
                .flip-card:hover .flip-card-inner {
                    transform: rotateY(180deg);
                }
                .flip-card-front, .flip-card-back {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                }
                .flip-card-back {
                    transform: rotateY(180deg);
                }
                @media (max-width: 768px) {
                    .flip-card {
                        width: 120px;
                        height: 100px;
                    }
                }
</style>