tailwind布局实现消息列表切换交互动画效果代码-html代码-BFW代码库

tailwind布局实现消息列表切换交互动画效果代码

代码语言：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.3.3.js"></script>
         <link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  
  
  
<style>
.material-fill-1 {
    font-variation-settings:
        'FILL'1,
        'wght'400,
        'GRAD'0,
        'opsz'48
}
</style>

  
  
</head>

  <body class="bg-gradient-to-tr  from-indigo-200 from-indigo-300 text-gray-400 flex flex-col gap-4 justify-center items-center min-h-screen
        [&_*]:transition-all
        [&_*]:duration-500
        [&_*]:ease-in-out
    ">
  <input class="peer/option1 sr-only" id="option-1" type="radio" name="panel" />
  <input class="peer/option2 sr-only" id="option-2" type="radio" name="panel" checked />

  <header class="flex items-center gap-2 justify-end w-72 sm:w-96
            [&>label]:bg-blue-50
            [&>label]:text-blue-300
            [&>label]:rounded-full
            [&>label]:grid
            [&>label]:place-content-center
            [&>label]:w-16
            sm:[&>label]:w-20
            [&>label]:aspect-squar.........完整代码请登录后点击上方下载按钮下载查看