tailwind实现可左右滚动的ai功能分类图标文本代码
代码语言：html
所属分类：加载滚动
代码描述：tailwind实现可左右滚动的ai功能分类图标文本代码
代码标签： tailwind 左右 滚动 ai 功能 分类 图标 文本 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI功能选择</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
<style>
.bg-linear-to-r {
background: linear-gradient(to right, var(--tw-gradient-stops));
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto p-4">
<div class="relative">
<!-- 左侧渐变遮罩和按钮 -->
<div class="pointer-events-none absolute left-0 h-full transition-all w-8 bg-linear-to-r from-white to-transparent dark:from-gray-950 sm:w-32 sm:from-15%">
<button id="scrollLeft" class="group pointer-events-auto flex h-full cursor-pointer items-center px-2 text-2xl text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-300 max-sm:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.55 16 21 6.56l-1.57-1.24-7.94 10.06L11 16l.49.62 7.94 10.06L21 25.44 13.55 16Z" fill="currentColor"></path>
</svg>
</button>
</div>
<!-- 功能列表 -->
<div id="scrollContainer" class="no-scrollbar flex gap-7 overflow-x-auto overscroll-x-none pb-5 pt-6 *:whitespace-nowrap">
<!-- 图像生成 -->
<label id="category-0" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="0">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-7 14c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
</svg>
图像生成
</div>
</label>
<!-- 视频生成 -->
<label id="category-1" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="1">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M18 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM9 16V8l6 4-6 4z"/>
</svg>
视频生成
</div>
</label>
<!-- 文本生成 -->
<label id="category-2" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="2">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M3 3h18v2H3V3zm0 4h18v2H3V7zm0 4h18v2H3v-2zm0 4h12v2H3v-2z"/>
</svg>
文本生成
</div>
</label>
<!-- 语言翻译 -->
<label id="category-3" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="3">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h-2l-3-6h2l2 4 2-4h2l-3 6zm6-2h-2l-1-3h-2l-1 3h-2l3-6h2l3 6z"/>
</svg>
语言翻译
</div>
</label>
<!-- 语音合成 -->
<label id="category-4" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="4">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2a10 10 0 0 0-10 10 10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2zm-2 15v-2h4v2h-4zm0-4v-2h6v2h-6zm0-4V7h8v2h-8z"/>
</svg>
语音合成
</div>
</label>
<!-- 3D建模 -->
<label id="category-5" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="5">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.83l6.59 3.29L12 11.42 5.41 8.12 12 4.83zM4 9.88l6 3v6.24l-6-3V9.88zm8 9.12V12.88l6-3v6.24l-6 3z"/>
</svg>
3D建模
</div>
</label>
<!-- 物体检测 -->
<label id="category-6" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="6">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M3 3h6v6H3V3zm8 0h10v2H11V3zm0 4h10v2H11V7zM3 11h6v2H3v-2zm8 0h10v2H11v-2zM3 15h6v6H3v-6zm8 0h10v2H11v-2zm0 4h10v2H11v-2z"/>
</svg>
物体检测
</div>
</label>
<!-- 文本分析 -->
<label id="category-7" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="7">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M4 4h16v2H4V4zm0 4h16v2H4V8zm0 4h10v2H4v-2zm0 4h16v2H4v-2z"/>
</svg>
文本分析
</div>
</label>
<!-- 图像编辑 -->
<label id="category-8" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="8">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M3 3h18v18H3V3zm16 16V5H5v14h14zm-4-8l-4 4-2-2-3 3V9h9v2z"/>
</svg>
图像编辑
</div>
</label>
<!-- 代码生成 -->
<label id="category-9" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="9">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M9 15l-3-3 3-3m6 6l3-3-3-3m-8 1h10"/>
</svg>
代码生成
</div>
</label>
<!-- 问答系统 -->
<label id="category-10" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="10">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
<svg class="text-2xl" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</svg>
问答系统
</div>
</label>
<!-- 数据可视化 -->
<label id="category-11" class="select-none">
<input class="form-input peer sr-only hidden" type="radio" value="11">
<div class="flex flex-col items-center justify-center gap-1.5 text-[.82rem] leading-tight text-gray-500 hover:text-gray-700 peer-checked:text-indigo-700 hover:peer-checked:text-indigo-700 dark:text-gray-300 dark:hover:text-gray-100 dark:peer-checked:text-yellow-500">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0