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;40.........完整代码请登录后点击上方下载按钮下载查看