tailwindcss实现透明磨砂玻璃组件ui效果代码-html代码-BFW代码库

tailwindcss实现透明磨砂玻璃组件ui效果代码

代码语言：html

代码描述：tailwindcss实现透明磨砂玻璃组件ui效果代码

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

<html lang="en" class="h-full bg-neutral-900 antialiased"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<script>
tailwind.config = {
theme: {
fontFamily: { sans: ['Inter', 'sans-serif'] }
}
}
</script>
<style>
/* range slider (webkit) */
input[type=range]::-webkit-slider-runnable-track {
@apply bg-white/20 h-1 rounded-full;
}
input[type=range]::-webkit-slider-thumb {
@apply appearance-none w-4 h-4 bg-white rounded-full shadow-lg -mt-1;
}
input[type=range] {
@apply bg-transparent cursor-pointer;
}
/* range slider (firefox) */
input[type=range]::-moz-range-track {
background: rgba(255,255,255,0.2);
height: 4px; border-radius: 9999px;
}
input[type=range]::-moz-range-thumb {
background: #fff; border: none; width:16px; height:16px; border-radius:50%; cursor:pointer;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucide.min.js"></script>
<link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&amp;display=swap"><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style></head>
<body class="h-full flex items-center justify-center p-6 text-white"><div class="fixed top-0 w-full h-screen bg-cover bg-center -z-10" style="background-image: url(&quot;https://images.unsplash.com/photo-1612543827278-d19245d6a00d?w=3840&amp;q=80&quot;);"></div>
<div class="w-full max-w-screen-xl grid grid-cols-1 lg:grid-cols-2 gap-6">
  <!-- Audio / Mindset card -->
  <div class="relative rounded-3xl overflow-hidden bg-gradient-to-br p-8 backdrop-blur from-yellow-200/20 via-cyan-200/10 to-cyan-400/20">
    <!-- brand -->
    <div class="flex gap-2 absolute top-8 left-8 items-start">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24&qu.........完整代码请登录后点击上方下载按钮下载查看