JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lead Source Filters</title>
<style>
    .filter-dropdown {
        position: relative;
        display: inline-block;
    }

    .checkbox-list {
        display: none;
        position: absolute;
        background: #fff;
        border: 1px solid #ccc;
        padding: 10px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        width: 150px; /* Adjust width as needed */
    }

    .filter-dropdown.active .checkbox-list {
        display: block;
    }

    .checkbox-list label {
        display: flex; /* Ensures alignment of checkbox and text */
        align-items: center;
        margin: 5px 0; /* Adds spacing between rows */
        cursor: pointer;
    }

    .checkbox-list input[type="checkbox"] {
        margin-right: 8px; /* Space between checkbox and text */
    }
</style>
</head>
<body>
    <div class="filter-dropdown">
        <button id="filter-button">Filter Lead Sources</button>
        <div class="checkbox-list" id="checkbox-list">
            <!-- Checkbox options -->
        </div>
    </div>

    <script>
        const leadSources = [
            "Google Ads", "Facebook Ads", "LinkedIn", "Twitter", "Instagram",
            "Organic Search", "Referral", "Email Campaign", "Direct Traffic",
            "YouTube", "Bing Ads", "Pinterest", "Snapchat", "TikTok",
            "Reddit", "Quora", "SMS Campaign", "Event Booth", "Webinar",
            "Cold Call"
        ];

        const checkboxList = document.getElementById('checkbox-list');
        const filterButton = document.getElementById('filter-button');

        // Add the "Select All" checkbox
        const selectAllCheckbox = document.createElement('input');
        selectAllCheckbox.type = 'checkbox';
        selectAllCheckbox.id = 'select-all';
        selectAllCheckbox.checked = true; // Checked by default

    ...