tailwind自适应图文轮换商品服务介绍页效果-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看