tailwindcss实现图标导航条效果代码-html代码-BFW代码库

tailwindcss实现图标导航条效果代码

代码语言：html

代码描述：tailwindcss实现图标导航条效果代码，结合了all图标库，实现图标悬浮菜单。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">

  
</head>

<body >
  <div class="bg-gradient-to-tr from-indigo-500 to-pink-500 w-screen h-screen flex">
	<div class="bg-black/30 w-96 m-auto flex justify-stretch rounded-md shadow-lg backdrop-blur">
		<a href="#" class="text-slate-200 hover:text-white hover:bg-black/20 w-1/4 py-3 flex flex-col items-center hover:scale-110 rounded-md transition-all">
			<i class="fa-solid fa-house"></i>
			<small>Home</small>
		</a>
		<a href="#" class="text-slate-200 hover:text-white hover:bg-black/20 w-1/4 py-3.........完整代码请登录后点击上方下载按钮下载查看