Kazimariusz

<div class="winsticky">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky yellow">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky green">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky blue">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky purple">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

<div class="winsticky pink">
    <div class="ws_top"></div>
    <div class="ws_content">This is a sticky note.</div>
</div>

/* Windows 7 Sticky Note - www.kazimariusz.com */

@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

.winsticky {
    --color-top:#F5F5F5;
    --color-background-start:#FFFFFF;
    --color-background-end:#EBEBEB;
}

.winsticky {
    font-family: "Caveat", cursive;
    font-size:24px;
    min-width: 225px;
    min-height: 206px;
    display: inline-flex;
    flex-direction: column;
    box-shadow: 0px 2px 5px #000;
}

.winsticky .ws_top {
    background-color: var(--color-top);
    height: 35px;
    position: relative;
    line-height:0px;
}

.winsticky .ws_top:before {
    position: absolute;
    left:16px;
    top:12px;
    content: url('data:image/svg+xml,<svg width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="2" x="0" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="10" x="4" y="0" fill="hsl(0, 0%, 0%)"></rect></svg>');
}

.winsticky .ws_top:after {
    position: absolute;
    inset:0px;
    left:calc(100% - 27px);
    top:11px;
    display:block;
    content:"";
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAMhJREFUKFNtkkENwkAURF/vKMABIkABNYAAEIAAigAEUAFVwJULiCCQcEUBAugsf5rtpv/ys/kzs/Nnt+Jf8+if6FMtYaoAr6NfgTdQEgXeAl1OOIfssSe3QRJQYprtgIsItqRBHQANH8AiB0vEBJNmwClI3iMp22ZOMGAJ3OIgoAjDTiVBnuVX9lzaqfGhtGSwQB2wAQ7ACrg7VvvPwUrJ5fSSNd+gjDWQ532v/MrSUxDP2KX1O1h9lEhBkr3GBKmovhOvPPomP5tVKmelHKPVAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
}

.winsticky .ws_top:before, .winsticky .ws_top:after {
    opacity:0.5;
}

.winsticky .ws_content {
    background: linear-gradient(var(--color-background-start) 0%, var(--color-background-end) 100%);
    flex-grow: 1;
    position: relative;
    padding:6px 5px;
}

.winsticky .ws_content:after {
    position: absolute;
    right:4px;
    bottom:4px;
    content:url('data:image/svg+xml,<svg width="10" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" x="9" y="0" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="1" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="9" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="5" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="9" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="8" y="9" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="5" y="4" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="4" y="5" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="5" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="4" y="9" fill="hsl(0, 0%, 0%)"></rect><rect width="1" height="1" x="1" y="8" fill="hsl(0, 0%, 0%)"></rect><rect width="2" height="1" x="0" y="9" fill="hsl(0, 0%, 0%)"></rect></svg>');
    opacity:0.3;
    line-height:0px;
}

/* Colours */

.winsticky.white {
    --color-top:#F5F5F5;
    --color-background-start:#FFFFFF;
    --color-background-end:#EBEBEB;
}

.winsticky.yellow {
    --color-top:#f8f7b6;
    --color-background-start:#fefecc;
    --color-background-end:#fcf9a1;
}

.winsticky.green {
    --color-top:#c5f7c1;
    --color-background-start:#d2ffcc;
    --color-background-end:#ade3aa;
}

.winsticky.blue {
    --color-top:#c9ecf8;
    --color-background-start:#d9f3fb;
    --color-background-end:#afd0e8;
}

.winsticky.purple {
    --color-top:#D4CDF3;
    --color-background-start:#DEDAFE;
    --color-background-end:#C6B8FE;
}

.winsticky.pink {
    --color-top:#EDC0ED;
    --color-background-start:#F4CFF4;
    --color-background-end:#E6A8E6;
}