tailwind实现简洁大气的书籍导航菜单效果代码-html代码-BFW代码库

tailwind实现简洁大气的书籍导航菜单效果代码

代码语言：html

代码描述：tailwind实现简洁大气的书籍导航菜单效果代码

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


<!DOCTYPE html>
<html lang="en" class="bg-black">

<head>

  <meta charset="UTF-8">



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.0.0.js"></script>


  
  
<style>
@font-face {
  font-family: "Roboto Flex";
  src: url("//repo.bfw.wiki/bfwrepo/font/RobotoFlex.woff2") format("woff2");
}
body {
  font-family: "Roboto Flex", sans-serif;
}

.group-hover\:transition-transform {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  animation-direction: alternate;
}

.num {
  font-size: 10rem;
  line-height: 0.9;
  font-weight: 550;
  font-variation-settings: "wdth" 35, "YTFI" 788;
}

.stretch {
  font-weight: 500;
  font-variation-settings: "wdth" 35;
  writing-mode: vertical-rl;
}
</style>



</head>

<body >
  <div class="relative py-4 sm:py-8 xl:py-3 min-w-screen min-h-screen flex items-center justify-center text-white">
	<div class="grid border-x lg:grid-cols-6 sm:grid-cols-3 grid-cols-2 lg:divide-x divide-solid divide-white">
		<article class="group h-full grid grid-cols-1 auto-rows-min divide-y text-sm.........完整代码请登录后点击上方下载按钮下载查看