Elegant Neumorphic Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elegant Neumorphic Table</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(to top left, #ffff00, #ff0000);
            font-family: 'Arial', sans-serif;
        }
        .table-container {
            width: 90%;
            max-width: 1200px;
            margin: 20px;
            padding: 20px;
            background: linear-gradient(to top left, #ffffff, #f0f0f5);
            border-radius: 15px;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2), -10px -10px 20px rgba(255, 255, 255, 0.5);
            overflow: hidden;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            border-radius: 10px;
            background: #e0e5ec;
            box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
        }
        th, td {
            padding: 15px;
            text-align: center;
            border: 1px solid #ddd;
            background: #f5f5f5;
            border-radius: 5px;
            transition: background 0.3s ease, box-shadow 0.3s ease;
            box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
        }
        th {
            background: #ff0000;
            color: #fff;
            font-weight: bold;
            position: relative;
        }
        th::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
            box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
        }
        td {
            background: #ffff00;
        }
        td:hover {
            background: #e0e5ec;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        .filter-input {
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
        }
        .filter-input input {
            padding: 10px;
            border: none;
            border-radius: 20px;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
            outline: none;
            font-size: 16px;
            width: 300px;
            background: linear-gradient(to top left, #ffffff, #f5f5f5);
        }
        .filter-input input::placeholder {
            color: #888;
        }
        .filter-input input:focus {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        tr {
            animation: fadeIn 0.5s ease-in-out;
        }
        @media (max-width: 768px) {
            .table-container {
                width: 100%;
                margin: 10px;
            }
            .filter-input input {
                width: 100%;
            }
        }
        h2{text-align: center;}
    </style>
</head>
<body>
    <div class="table-container">
        <h2>Elegant Neumorphic Table</h2>
        <div class="filter-input">
            <input type="text" id="search" placeholder="Search...">
        </div>
        <table id="data-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>28</td>
                    <td>New York</td>
                </tr>
                <tr>
                    <td>Jane Smith</td>
                    <td>34</td>
                    <td>Los Angeles</td>
                </tr>
                <tr>
                    <td>Sam Wilson</td>
                    <td>22</td>
                    <td>Chicago</td>
                </tr>
                <tr>
                    <td>Emma Johnson</td>
                    <td>45</td>
                    <td>San Francisco</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        document.getElementById('search').addEventListener('input', function() {
            const searchValue = this.value.toLowerCase();
            const rows = document.querySelectorAll('#data-table tbody tr');
            rows.forEach(row => {
                const cells = row.querySelectorAll('td');
                const matches = Array.from(cells).some(cell => cell.textContent.toLowerCase().includes(searchValue));
                row.style.display = matches ? '' : 'none';
            });
        });
    </script>
</body>
</html>

Elegant Neumorphic Table - MeggiTools