JSFiddle - React, Tailwind, and code Playground

by TerryJuneJr

HTML

<!DOCTYPE html>

<html>
    <head>
        <title>Sticky Note</title>
    </head>

    <body>
        <div class="sticky-note">
            <div class="sticky-note-inside">
                <h1>YOLO</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet, arcu sit amet luctus cursus, elit arcu blandit lectus, ut ultricies justo arcu quis mi. Duis urna sapien, placerat id congue pretium, bibendum a arcu. Mauris nibh felis, lobortis vitae vehicula quis, rhoncus suscipit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lorem nec eros facilisis luctus eget sit amet ligula. Quisque mattis aliquam justo, quis sodales ligula tincidunt non. Proin a tincidunt felis. Phasellus purus nisi, molestie sed fringilla nec, interdum nec elit. Sed tristique luctus ornare. Morbi libero tortor, ultrices sed eleifend id, accumsan vitae nisl.</p>
            </div>
        </div>
    </body>
</html>

CSS

* {
    color: #333;
    font-family: "Comic Sans", "Comic Sans MS", cursive;

    margin: 0;
    padding: 0;
}

body {
    padding: 500px;
}

.sticky-note {
    background-color: #FFFF66;

    width: 300px;
}

.sticky-note-inside {
    box-shadow: inset 0 0 25px #CCCC52;

    padding: 1em;
}

.sticky-note h1 {
    border-bottom: 1px solid #000000;

    text-align: center;
}