tailwind实现大气自适应登录页面表单效果代码-html代码-BFW代码库

tailwind实现大气自适应登录页面表单效果代码

代码语言：html

代码描述：tailwind实现大气自适应登录页面表单效果代码

下面为部分代码预览，完整代码请点击下载或在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>

</head>
<body>

<body class="bg-rose-500 flex justify-center items-center min-h-screen px-4 bg-[radial-gradient(at_center_bottom,#AD2B7B,#057AFD)]">

  <main class="bg-black/40 text-white backdrop-blur-lg p-6 sm:p-12 space-y-3 shadow-lg rounded-xl w-full max-w-sm relative
     [&>div]:transition-all
     [&>div]:duration-300

     [&_label]:cursor-pointer
     [&_label]:transition-all 
     [&_label]:duration-300
     hover:[&_label]:text-pink-500
     hover:[&_:not(.field)>label]:underline

     [&_a]:text-indigo-600
     [&_a]:hover:text-indigo-800
     [&_a]:transition
  ">

    <input type="radio" id="radio-1" name="panel-toggle" class="sr-only peer/radio-1" checked>
    <input type="radio&quo.........完整代码请登录后点击上方下载按钮下载查看