tailwind实现带入场动画渐显的tab选项卡切换代码-html代码-BFW代码库

tailwind实现带入场动画渐显的tab选项卡切换代码

代码语言：html

所属分类：选项卡

代码描述：tailwind实现带入场动画渐显的tab选项卡切换代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.3.js"></script>
<link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

</head>


<body class="bg-gradient-to-t from-sky-950 to-sky-500 flex flex-col justify-center items-center min-h-screen px-4
    [&_*]:transition-all
    [&_*]:ease-in-out
">

  <input class="peer/option1 sr-only" id="option-1" type="radio" name="panel" checked />
  <input class="peer/option2 sr-only" id="option-2" type="radio" name="panel" />
  <input class="peer/option3 sr-only" id="option-3" type="radio" name="panel" />
  <input class="peer/option4 sr-only" id="option-4" type="radio" name="panel" />

  <nav class="flex flex-col sm:flex-row items-center justify-end gap-2  w-full sm:w-fit
        [&_*]:duration-300
        *:flex
        *:items-center
        *:gap-2
        *:w-full
        *:justify-end
     sm:*:justify-center
        *:py-1
        *:px-3
        *:rounded-md
        *:text-sm
        *:cursor-pointer
        *:relative
        *:isolate
        *:overflow-hidden

        before:*:absolute
        before:*:inset-[0_100%_0_100%]
        before:*:m-auto
        before:*:bg-blue-100
        before:*:-z-10
        before:*:transition-all
        before:*:duration-300
        hover:before:*:inset-0
        
        peer-checked/option1:[&_#option-1-nav]:bg-white
        peer-checked/option1:[&_#option-1-nav>span]:rotate-180

        peer-checked/option2:[&_#option-2-nav]:bg-white
        peer-checked/option2:[&_#option-2-nav>span]:rotate-180

        peer-checked/option3:[&_#option-3-nav]:bg-white
        peer-checked/option3:[&_#option-3-nav>span]:rotate-180
        
        peer-checked/option4:[&_#option-4-nav]:bg-white
        peer-checked/option4:[&_#option-4-nav>span]:rotate-180
    ">
    <label for="option-1" id="option-1-nav">
      Products
      <span class="material-symbols-outlined material-fill-1">expand_more</span>
    </label>
    <label for="option-2" id="option-2-nav">
      Solutions
      <span class="material-symbols-outlined material-fill-1">expand_more</span>
    </label>
    <label for="option-3" id="option-3-nav">
      Resources
      <span class="material-symbols-outlined material-fill-1">expand_more</span>
    </label>
    <label for="option-4" id="option-.........完整代码请登录后点击上方下载按钮下载查看