<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Tiles with Search and Highlighting</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        input[type="text"] {
            width: 98%;
            padding: 10px;
            margin-bottom: 20px;
            font-size: 16px;
        }
        .tilesold {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        .tiles {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            justify-items: center; /* Centers tiles within the grid */
        }
        .tile {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
            word-wrap: break-word; /* Allow long words to wrap */
            overflow: hidden; /* Ensures no overflow if content is too large */
        }
        .tile:hover {
            transform: scale(1.05);
        }
        .highlight {
            background-color: #86aceb; /* Highlight color */
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>

<h1>Search Tiles</h1>
<input type="text" id="searchInput" placeholder="Search for tiles..." onkeyup="filterTiles()">

<div class="tiles" id="tilesContainer">
    <!-- Dynamic tiles will be populated here -->
</div>

<script>
    // Sample data: an array of paragraphs
    const paragraphs = [
        "This is the first tile.",
        "Here is the second tile.",
        "Tile number three is different.",
        "This is the fourth idea.",
        "Fifth tile, not very interesting.",
        "Here's another tile for good measure.",
        "The seventh tile contains different content.",
        "Eighth tile showcases something unique.",
        "Ninth tile is about JavaScript",
        "Tenth tile focuses on dynamic content"
    ];

    // Function to add new lines to text after every maxLineSize characters
    function formatParagraph(text, maxLineSize) {
        let formattedText = '';
        
        // Loop through the text and add line breaks every maxLineSize characters
        for (let i = 0; i < text.length; i += maxLineSize) {
            formattedText += text.substring(i, i + maxLineSize) + '\n';
        }
        
        return formattedText.trim(); // Trim to remove the last newline if present
    }

    // Function to render tiles with highlighted search terms
    function renderTiles(filteredParagraphs, searchTerms) {
        const tilesContainer = document.getElementById('tilesContainer');
        tilesContainer.innerHTML = '';
        filteredParagraphs.forEach(paragraph => {
            const formattedText = formatParagraph(paragraph, 32); // Format the paragraph with new lines
            const tile = document.createElement('div');
            tile.className = 'tile';
            tile.innerHTML = highlightText(formattedText, searchTerms);
            tilesContainer.appendChild(tile);
        });
    }

    // Function to highlight the search term in the paragraph
    function highlightText(text, searchTerms) {
        if (!searchTerms || searchTerms.length === 0) return text; // Return unmodified text if no search terms
        const regex = new RegExp(`(${searchTerms.join('|')})`, 'gi'); // Create regex for case-insensitive matching
        return text.replace(regex, '<span class="highlight">$1</span>'); // Highlight match
    }

    // Function to filter tiles based on search input
    function filterTiles() {
        const searchInput = document.getElementById('searchInput').value;
        
        // Split input by comma and trim spaces
        const searchTerms = searchInput.split(',').map(term => term.trim().toLowerCase()).filter(term => term);

        // If no search terms are present, show all paragraphs
        const filteredParagraphs = searchInput ? paragraphs.filter(paragraph => 
            searchTerms.some(term => paragraph.toLowerCase().includes(term))
        ) : paragraphs;

        renderTiles(filteredParagraphs, searchTerms); // Pass the search terms for highlighting
    }

    // Initial render of all tiles
    renderTiles(paragraphs, '');
</script>

</body>
</html>

Fade in and out by changing the transparency. After the unnecessary tiles disappear, the found ones smoothly slide into their place. On the contrary, when new tiles appear, the old ones move away and make free space for them. In your answer, write only the changes that need to be made to the code.