tailwind自适应图文轮换商品服务介绍页效果

代码语言:html

所属分类:布局界面

代码描述:tailwind自适应图文轮换商品服务介绍页效果

代码标签: 图文 轮换 商品 服务 介绍 效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital@1&display=swap" rel="stylesheet">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/alpine.min.js"></script>

<style>
                       
.serif {
                               
font-family: 'Zilla Slab', serif;
                       
}

                       
[x-cloak] { display: none; }

                       
.grid-indigo {
                               
background-image: radial-gradient(#5a67d8 2px, transparent 2px);
                               
background-size: 16px 16px;
                       
}
               
</style>

</head>

<body class="antialiased sans-serif bg-gray-200 text-gray-600">
<div class="my-10 md:my-24 container mx-auto flex flex-col md:flex-row shadow-sm overflow-hidden" x-data="{ testimonialActive: 2 }" x-cloak>
<div class="relative w-full py-2 md:py-24 bg-indigo-700 md:w-1/2 flex flex-col item-center justify-center">
<div class="absolute top-0 left-0 z-10 grid-indigo w-16 h-16 md:w-40 md:h-40 md:ml-20 md:mt-24"></div>
<div class="relative text-2xl md:text-5xl py-2 px-6 md:py-6 md:px-1 md:w-64 md:mx-auto text-indigo-100 font-semibold leading-tight tracking-tight mb-0 z-20">
<span class="md:block">What Our</span>
<span class="md-block">Customers</span>
<span class="block">Are Saying!</span>
</div>
<div class="absolute right-0 bottom-0 mr-4 mb-4 hidden md:block">
<button class="rounded-l-full border-r bg-gray-100 text-gray-500 focus:outline-none hover:text-indigo-500 font-bold w-12 h-10" x-on:click="testimonialActive = testimonialActive === 1 ? 3 : testimonialActive - 1">
&#8592;
</button><button class="rounded-r-full bg-gray-100 text-gray-500 focus:outline-none hover:text-indigo-500 font-bold w-12 h-10" x-on:click="testimonialActive = testimonialActive >= 3 ? 1 : testimonialActive + 1">
&#8594;
</button>
</div>
</div>
<div class="bg-gray-100 md:w-1/2">
<div class="flex flex-col h-full relative">
<div class="absolute top-0 left-0 mt-3 ml-4 md:mt-5 md:ml-12">
<svg xmlns="http://www.w3.org/2000/svg" class="text-indigo-200 fill-current w-12 h-12 md:w-16 md:h-16" viewBox="0 0 24 24">
<path d="M6.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0