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:aspect-square
        after:rounded-full
        after:bg-teal-300
        after:blur-lg 
        after:left-4
        after:bottom-0
        after:-z-10

        peer-checked/data:first:[&_#toggle-data>span]:scale-0
        peer-checked/data:last:[&_#toggle-data>span]:scale-100

        peer-checked/data:[&_#panel-data]:-translate-y-14
        peer-checked/data:[&_#panel-social]:translate-y-12

        peer-checked/content:[&_#panel-content]:opacity-100
        peer-checked/content:[&_#panel-content]:pointer-events-auto
       ">
    <div class="relative bg-white rounded-xl bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70 w-60 p-8 text-center">
      <img src="//repo.bfw.wiki/bfwrepo/icon/654cbdf5685d4.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="rounded-full mx-auto w-20 h-20 border-4 border-white/70  opacity-70 group-hover:opacity-100  transition">

      <h3 class="font-bold mt-6">Mary Jane</h3>
      <p class="flex items-center justify-center gap-1 text-sm">
        <span class="material-symbols-outlined text-lg">location_on</span>
        Atlanta, GA
      </p>

      <label for="content" class="block mt-4 cursor-pointer  text-.........完整代码请登录后点击上方下载按钮下载查看