JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<div class="confetti-area">
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
        <div class="confetti"></div>
    </div>

CSS

body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }

        .confetti-area {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 20px;
            background-color: transparent;
            animation: confetti-animation 5s linear infinite;
        }

        .confetti:nth-child(1) { background-color: DodgerBlue; left: 20%; animation-delay: 0s; transform: rotate(10deg); }
        .confetti:nth-child(2) { background-color: OliveDrab; left: 40%; animation-delay: 0.5s; transform: rotate(20deg); }
        .confetti:nth-child(3) { background-color: Gold; left: 60%; animation-delay: 1s; transform: rotate(30deg); }
        .confetti:nth-child(4) { background-color: pink; left: 80%; animation-delay: 1.5s; transform: rotate(40deg); }
        .confetti:nth-child(5) { background-color: SlateBlue; left: 10%; animation-delay: 2s; transform: rotate(50deg); }
        .confetti:nth-child(6) { background-color: lightblue; left: 30%; animation-delay: 2.5s; transform: rotate(60deg); }
        .confetti:nth-child(7) { background-color: Violet; left: 50%; animation-delay: 3s; transform: rotate(70deg); }
        .confetti:nth-child(8) { background-color: PaleGreen; left: 70%; animation-delay: 3.5s; transform: rotate(80deg); }
        .confetti:nth-child(9) { background-color: SteelBlue; left: 90%; animation-delay: 4s; transform: rotate(90deg); }
        .confetti:nth-child(10) { background-color: SandyBrown; left: 25%; animation-delay: 4.5s; transform: rotate(100deg); }
        .confetti:nth-child(11) { background-color: Chocolate; left: 45%; animation-delay: 5s; transform: rotate(110deg); }
 ...