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

代码语言:html

所属分类:菜单导航

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

代码标签: tailwind css 图标 导航条 代码

下面为部分代码预览,完整代码请点击下载或在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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0