تغییر Opacity

سلام. من در حال ساخت یک پروژه تمرینی برای ری اکت هستم و در قسمت هدر سایت وقتی روی آیکون search کلیک میکنم یک div که شامل Input هست پایین هدر نشان داده میشود و در این موقع میخواهم که opacity سایر قسمتهای پیچ کم شود. چون از react router استفاده میکنم چگونه این رو پیاده سازی کنم؟ من از tailwind برای استایل دهی استفاده میکنم

const App = () => {
return (
<BrowserRouter>
<Header />
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/account" element={<Account />} />
    <Route path="/favorite" element={<Favorite />} />
    <Route path="/products" element={<ProductCard/>} />
    <Route path="/shop" element={<Shop/>} />
  </Routes>
  <Footer/>
</BrowserRouter>
);  
}