tailwindcss布局实现个人信息卡片展示交互效果代码-html代码-BFW代码库

tailwindcss布局实现个人信息卡片展示交互效果代码

代码语言：html

代码描述：tailwindcss布局实现个人信息卡片展示交互效果代码

下面为部分代码预览，完整代码请点击下载或在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@48,400,0,0" />
  
  
  


  
  
</head>

<body translate="no">
  <body class="bg-gradient-to-t from-blue-950 to-blue-900  text-[#101232] flex justify-center items-center min-h-screen">
  <h1 class="sr-only">Glassy Profile</h1>
  <input type="checkbox" id="data" class="sr-only peer/data"  role="switch" aria-label="Data Toggle">
  <input type="checkbox" id="content" class="sr-only peer/content"  role="switch" aria-label="Content Toggle">
  <div class="z-10 rounded-xl overflow-hiddenS group relative
        before:absolute
        before:w-32
        before:aspect-square
        before:rounded-full
        before:bg-blue-600
        before:blur-lg 
        before:right-3
        before:top-0
        before:-z-10

        after:absolute
        after:w-32
        after:asp.........完整代码请登录后点击上方下载按钮下载查看