react实现卡片堆叠的待办事项应用代码-html代码-BFW代码库

react实现卡片堆叠的待办事项应用代码

代码语言：html

代码描述：react实现卡片堆叠的待办事项应用代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

:root {
        --bg-color: #ddd;
        --txt-s-color: #444;
        --bg-s-color: #eee;
        --bg-t-color: #fff;
        --shadow-color: #27272727;
        --shadow-s-color: #6767672f;
        --primary-color: #6256ca;
        --txt-color: #000;
}

.dark {
        --bg-color: #030712;
        --txt-s-color: #e7e5e4;
        --bg-s-color: #334155;
        --bg-t-color: #1f2937;
        --shadow-color: #818cf827;
        --shadow-s-color: #00002f;
        --primary-color: #c4b5fd;
        --txt-color: #f9fafb;
}

body {
        font-family: sans-serif;
        background-color: var(--bg-color);
        height: 100vh;
        position: relative;
}

.button-group {
        position: absolute;
        top: 2rem;
        display: flex;
        gap: 1rem;
        inset-inline: 0;
        justify-content: center;

        button {
                width: 3rem;
                aspect-ratio: 1;
                border: none;
                outline: none;
                border-radius: 1rem;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                padding: 0.75rem;
                position: relative;
                box-shadow: 0 4px;
                border: 2px solid;
                transition: box-shadow 200ms ease-in-out, translate 200ms ease-in-out;
                background-color: var(--bg-t-color);

                &:hover::before,
                &:focus-within::before {
                        scale: 100%;
                        translate: 0 125%;
                }

                &:active {
                        box-shadow: 0 0;
                        translate: 0 5%;
                }

                &::before {
                        z-index: 10;
                        position: absolute;
                        content: var(--var-content);
                        scale: 0;
                        color: var(--txt-s-color);
                        background-color: var(--bg-s-color);
                        padding: 0.5rem;
                        border-radius: 4px;
                        bottom: 0px;
                        transition: scale 200ms ease-in-out, translate 200ms ease-in-out;
                        box-shadow: 0 2px 5px var(--shadow-color);
                        text-transform: capitalize;
                }
        }

        .add {
                color: #54c392;
                --var-content: "Add";
        }

        .done {
                color: #fccd2a;
                --var-content: "Done";
        }

        .delete {
                color: #f5004f;
                --var-content: "remove";
        }
}

.todo-wrapper {
        position: absolute;
        top: 30%;
        left: 50%;
        translate: -50% -50%;
        transition: translate 200ms ease-in-out;
        z-index: 1;
}

.todo {
        width: inherit;
        aspect-ratio: 1;
        background-color: var(--bg-s-color);
        border-radius: 2px;
        box-shadow: 0 0 20px var(--shadow-s-color);
        padding.........完整代码请登录后点击上方下载按钮下载查看