tailwind布局实现黑白两色待办事项ui交互效果代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局实现黑白两色待办事项ui交互效果代码
代码标签： tailwind 布局 黑白 两色 待办 事项 ui 交互
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
.rotate-45 {
--transform-rotate: 45deg;
transform: rotate(45deg);
}
.group:hover .group-hover\:flex {
display: flex;
}
input[type=checkbox]:checked+label span:first-of-type {
background-color: #10B981;
border-color: #10B981;
color: #fff;
}
input[type=checkbox]:checked+label span:nth-of-type(2) {
text-decoration: line-through;
color: #9CA3AF;
}
</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="flex items-center justify-center w-screen h-screen font-medium">
<div class="flex flex-grow items-center justify-center h-full text-gray-600 bg-gray-100">
<!-- Component Start -->
<div class="max-w-full p-8 bg-white rounded-lg shadow-lg w-96">
<div class="flex items-center mb-6">
<svg class="h-8 w-8 text-indigo-500 stroke-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
</svg>
<h4 class="font-semibold ml-3 text-lg">Frodo's Jobs</h4>
</div>
<div>
<input class="hidden" type="checkbox" id="task_1" checked>
<label class="flex items-center h-10 px-2 rounded cursor-pointer hover:bg-gray-100" for="task_1">
<span class="flex items-center justify-center w-5 h-5 text-transparent border-2 border-gray-300 rounded-full">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span class="ml-4 text-sm">Weed front garden.</span>
</label>
</div>
<div>
<input class="hidden" type="checkbox" id="task_2" checked>
<label class="flex items-center h-10 px-2 rounded cursor-pointer hover:bg-gray-100" for="task_2">
<span class="flex items-center justify-center w-5 h-5 text-transparent border-2 border-gray-300 rounded-full">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span class="ml-4 text-sm">Chill and smoke some Old Toby.</span>
</label>
</div>
<div>
<input class="hidden" type="checkbox" id="task_3">
<label class="flex items-center h-10 px-2 rounded cursor-pointer hover:bg-gray-100" for="task_3">
<span class="flex items-center justify-center w-5 h-5 text-transparent border-2 border-gray-300 rounded-full">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span class="ml-4 text-sm">Keep ring secret and safe.</span>
</label>
</div>
<div>
<input class="hidden" type="checkbox" id="task_4">
<label class="flex items-center h-10 px-2 rounded cursor-pointer hover:bg-gray-100" for="task_4">
<span class="flex items-center justify-center w-5 h-5 text-transparent border-2 border-gray-300 rounded-full">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span class="ml-4 text-sm">Meet Gandalf at Bree.</span>
</label>
</div>
<div>
<input class="hidden" type="checkbox" id="task_5">
<label class="flex items-center h-10 px-2 rounded cursor-pointer hover:bg-gray-100" for="task_5">
<span class="flex items-center justify-center w-5 h-5 text-transparent border-2 border-gray-300 rounded-full">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span class="ml-4 text-sm">Destroy ring and defeat dark lord.</span>
</label>
</div>
<button class="flex items-center w-full h-8 px-2 mt-2 text-sm font-medium rounded">
<svg class="w-5 h-5 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap=&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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