Search Modal - Copy this React, Tailwind Component to your project

{/* Search Section */} {isSearchVisible && ( <div className="search section" style={{ display: "flex", alignItems: "center" }}> <TextField placeholder="Search messages..." variant="outlined" size="small" value={searchQuery} onChange={handleSearch} onKeyDown={handleKeyDown} // Add the key down event handler InputProps={{ startAdornment: <InputAdornment position="start"><SearchIcon /></InputAdornment>, }} style={{ width: 'calc(100% 100px)', marginRight: '10px' }} /> <IoMdClose onClick={toggleSearchSection} style={{ cursor: 'pointer' }} /> {/* Displaying filtered messages */} {filteredMessages.length > 0 && ( <div className="filtered messages"> {filteredMessages.map((msg, index) => ( <div key={index} className="filtered message"> {msg.content} </div> ))} </div> )} </div> )} create a modal of this search bar