Next.js项目中无法按设计稿实现日期范围选择器求助

我在开发网站时遇到问题，无法按照客户需求实现符合设计稿的日期范围选择器。开发要求严格对齐设计稿完成样式，之前尝试接入Airbnb的react-dates组件，但是该组件自定义门槛过高，尤其是日期输入字段的定制难度很大，每次接入第三方日期范围选择器都会破坏已经完成的现有设计。目前我已经写完基础布局，希望能得到帮助实现符合设计稿要求的日期范围选择器，相关代码如下可供参考。

所有组件统一放在components目录下，包含Header和HeaderWidget两个组件，计划在HeaderWidget组件中实现日期选择器功能：
注：目前仅实现了基础样式结构，未添加任何功能和API调用，仅为HTML骨架。

Header 组件代码 #

import Image from 'next/image';

// import logo
import Logo from '../../assets/images/logo.png';

// import masthead image
import mastHead from '../../assets/images/masthead.png';

// import property overview icon details
import PropertryDetails from '../../assets/images/53-plus-hotels.svg';
import Location100Plus from '../../assets/images/100-locations.svg';
import BestPriceGurantee from '../../assets/images/best-guarantee.svg';
import Travelers74Mn from '../../assets/images/74mn-travelers.svg';
import TopHeader from './TopHeader';

// import widget
import HeaderWidget from '../widget/HeaderWidget';

const Header = () => {
    return (
        <>
            <section className="position-relative">
                <div className="header-glass-wrapper">
                    <TopHeader />
                    <nav className="navbar navbar-expand-md navbar-dark fixed-top bg-transparent margin-top">
                        <div className="container">
                            <a className="navbar-brand" href="#">
                                <Image src={Logo} alt="Picture of the author" height="65" />
                            </a>
                            <button className="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNavbar">
                                <span className="navbar-toggler-icon"></span>
                            </button>
                            <div className="navbar-collapse collapse" id="collapseNavbar">
                                <ul className="navbar-nav ms-auto">
                                    <li className="nav-item">
                                        <a className="nav-link nav-text-color mx-4" href="">Menu 1</a>
                                    </li>

                                    <li className="nav-item">
                                        <a className="nav-link nav-text-color mx-4" href="">Menu 2</a>
                                    </li>

                                    <li className="nav-item">
                                        <a className="nav-link nav-text-color mx-4" href="">Menu 3</a>
                                    </li>

                                    <li className="nav-item">
                                        <a className="nav-link nav-text-color mx-4" href="">Menu 4</a>
                                    </li>

                                    <li className="nav-item">
                                        <a className="nav-link nav-text-color mx-4" href="">Menu 5</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                </div>

                <header>
                    <Image src={mastHead} className="masthead" alt="Hero Image" />
                    <div className="widget-select-wrapper">
                        <div className="widget-heading-wrapper">
                            <div className="standard-cursive-text">Explore the</div>
                            <div className="widget-heading">Unexplored</div>
                        </div>

                        <HeaderWidget />
                    </div>
                    <div className="container">
                        <div className="row">
                            <div className="col-md-3 d-flex justify-content-center">
                                <div className="website-overview">
                                    <Image src={PropertryDetails} alt="Property detail icon" />
                                </div>
                            </div>
                            <div className="col-md-3 d-flex justify-content-center">
                                <div className="website-overview">
                                    <Image src={Location100Plus} alt="Property detail icon" />
                                </div>
                            </div>
                            <div className="col-md-3 d-flex justify-content-center">
                                <div className="website-overview">
                                    <Image src={BestPriceGurantee} alt="Property detail icon" />
                                </div>
                            </div>
                            <div className="col-md-3 d-flex justify-content-center">
                                <div className="website-overview">
                                    <Image src={Travelers74Mn} alt="Property detail icon" />
                                </div>
                            </div>
                        </div>
                    </div>
                </header>

                <div className="cloud-pattern"></div>
            </section>
        </>
    );
};

export default Header;

HeaderWidget 组件代码 #

import React from 'react';

// import react tabs
import { Tab, Tabs, TabList, TabPanel, resetIdCounter } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const HeaderWidget = () => {
    resetIdCounter();
    return (
        <>
            <div className="multiple-widget-item-wrapper">
                <Tabs>
                    <TabList>
                        <Tab>Hotels</Tab>
                        <Tab>Holiday Packages</Tab>
                        <Tab>Boat Houses</Tab>
                        <Tab>Sightseeing</Tab>
                    </TabList>

                    <TabPanel>
                        <div className="widget-date-range-picker">
                            <div className="location-search-wrapper"><input className="form-control location-search" type="text" placeholder="Enter Location" /></div>
                            <div className="date-picker-wrapper-checkIn"><input className="form-control date-picker-check-in" type="text" placeholder="22 Sept 2021" /></div>
                            <div className="date-picker-wrapper-checkOut"><input className="form-control date-picker-check-out" type="text" placeholder="23 Sept 2021" /></div>
                            <div><button type="button" className="btn standard-search-btn">Search</button></div>
                        </div>
                    </TabPanel>

                    <TabPanel>
                        <div className="widget-date-range-picker">
                            <div className="location-search-wrapper"><input className="form-control location-search" type="text" placeholder="Enter Location" /></div>
                            <div className="date-picker-wrapper-checkIn"><input className="form-control date-picker-check-in" type="text" placeholder="22 Sept 2021" /></div>
                            <div className="date-picker-wrapper-checkOut"><input className="form-control date-picker-check-out" type="text" placeholder="23 Sept 2021" /></div>
                            <div><button type="button" className="btn standard-search-btn">Search</button></div>
                        </div>
                    </TabPanel>

                    <TabPanel>
                        <div className="widget-date-range-picker">
                            <div className="location-search-wrapper"><input className="form-control location-search" type="text" placeholder="Enter Location" /></div>
                            <div className="date-picker-wrapper-checkIn"><input className="form-control date-picker-check-in" type="text" placeholder="22 Sept 2021" /></div>
                            <div className="date-picker-wrapper-checkOut"><input className="form-control date-picker-check-out" type="text" placeholder="23 Sept 2021" /></div>
                            <div><button type="button" className="btn standard-search-btn">Search</button></div>
                        </div>
                    </TabPanel>

                    <TabPanel>
                        <div className="widget-date-range-picker">
                            <div className="location-search-wrapper"><input className="form-control location-search" type="text" placeholder="Enter Location" /></div>
                            <div className="date-picker-wrapper-checkIn"><input className="form-control date-picker-check-in" type="text" placeholder="22 Sept 2021" /></div>
                            <div className="date-picker-wrapper-checkOut"><input className="form-control date-picker-check-out" type="text" placeholder="23 Sept 2021" /></div>
                            <div><button type="button" className="btn standard-search-btn">Search</button></div>
                        </div>
                    </TabPanel>
                </Tabs>
            </div>
        </>
    )
}

export default HeaderWidget;

内容的提问来源于stack exchange，提问作者string1301