tailwind布局实现黑白两色待办事项ui交互效果代码-html代码-BFW代码库

tailwind布局实现黑白两色待办事项ui交互效果代码

代码语言：html

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