React'ta öğe ortalama

import Search from "./search"
export default function NavBar(){
    return(
    <div className="container-2xl  py-1 flex justify-items-center justify-start  border-b ">
        
        
            <div className="text-4xl nav-logo py-2 text-white">YourWiki</div>
            <Search/>
           {/* <div className="container-md mx-auto flex justify-center items-center"><Search/></div>*/}
            
            {/* <div className=""><button type="button" className=" flex justify-items-center justify-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">Home </button></div> */}
      
            
        
    </div>
    )
    
}

import { FaSearch } from "react-icons/fa";
export default function Search(){
     return(
      <div className="bg-red-800 md:container-md md:mx-auto">
        <form >
        <div id="box" className=" flex py-1  justify-items-center justify-center ">
         <button type="submit" className="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-l-lg text-sm px-4 py-3  dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"><FaSearch/></button>
        <input type="text" id="search" className="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-r-lg text-sm px-20 py-3  dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" placeholder="Search in YourWiki"/>
        
        </div>
        </form>
        </div>
        
     )

}