<html>

<head>
    <title>Sticky Note Web Widget</title>
    <link rel="stylesheet" type="text/css" href="sticky.css">
    </link>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script>
</head>

<body>
    <div>
        <ul>
            <li> <a href="#" contenteditable="true">
                    <h2>Title #1</h2>
                    <p>Text Content #1</p>
                </a> </li>
            <li> <a href="#" contenteditable="true">
                    <h2>Title #2</h2>
                    <p>Text Content #2</p>
                </a> </li>
            <li> <a href="#" contenteditable="true">
                    <h2>Title #3</h2>
                    <p>Text Content #3</p>
                </a> </li>
            <li> <a href="#" contenteditable="true">
                    <h2>Title #4</h2>
                    <p>Text Content #4</p>
                </a> </li>
            <li> <a href="#" contenteditable="true">
                    <h2>Title #5</h2>
                    <p>Text Content #5</p>
                </a> </li>
            <li> <a href="#" contenteditable="true">
                    <h2>Title #6</h2>
                    <p>Text Content #6</p>
                </a> </li>
            <li> <a href="#" contenteditable="true">
                    <h2>Title #7</h2>
                    <p>Text Content #7</p>
                </a> </li>
            <li> <a href="#" contenteditable="true">
                    <h2>Title #8</h2>
                    <p>Text Content #8</p>
                </a> </li>
        </ul>
    </div>
</body>

</html>
@import url("https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300&display=swap");
div {
    margin: 20px auto;
    width: 70%;
    font-family: "Lato";
    padding: 5px;
    background: #666;
    color: #fff;
}
* {
    margin: 0;
    padding: 0;
}
h4 {
    font-weight: bold;
    font-size: 2rem;
}
p {
    font-family: "Reenie Beanie";
    font-size: 2rem;
}
ul,
li {
    list-style: none;
}
ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 10em;
    width: 10em;
    padding: 1em;
    box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
    transition: transform 0.15s linear;
}
ul li {
    margin: 1em;
}
ul li:nth-child(odd) a {
    transform: rotate(-4deg);
    position: relative;
    top: 5px;
}
ul li:nth-child(even) a {
    transform: rotate(4deg);
    position: relative;
    top: 5px;
}
ul li:nth-child(3n) a {
    transform: rotate(-3deg);
    position: relative;
    top: -5px;
}
ul li:nth-child(5n) a {
    transform: rotate(5deg);
    position: relative;
    top: -10px;
}
ul li a:hover,
ul li a:focus {
    box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.7);
    transform: scale(1.25);
    position: relative;
    z-index: 5;
}
ul li:nth-child(even) a {
    position: relative;
    top: 5px;
    background: #cfc;
}
ul li:nth-child(3n) a {
    position: relative;
    top: -5px;
    background: #ccf;
}
$(document).ready(function () {
    all_notes = $("li a");
    all_notes.on("keyup", function () {
        note_title = $(this).find("h2").text();
        note_content = $(this).find("p").text();
        item_key = "list_" + $(this).parent().index();
        data = { title: note_title, content: note_content };
        window.localStorage.setItem(item_key, JSON.stringify(data));
    });
    all_notes.each(function (index) {
        data = JSON.parse(window.localStorage.getItem("list_" + index));
        if (data !== null) {
            note_title = data.title;
            note_content = data.content;
            $(this).find("h2").text(note_title);
            $(this).find("p").text(note_content);
        }
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js