Can someone assist me with a design challenge I'm facing? I'm struggling to incorporate a date range picker based on the client's specifications. I am currently working on a website where I need to match the design to the mockup provided. I attempted to use Airbnb react dates for this purpose, but I found the customization process challenging, especially for the dates input field. Despite having the basic layout in place, whenever I try to integrate a date range picker, it disrupts the overall design. Any help in implementing the date range picker according to the mockup design would be greatly appreciated. Below, you'll find the link to my code on GitHub which includes both the codes and a demo of the design.

GitHub Link - https://github.com/ramanujamgond/header-widget.git

Demo Link -

Mockup Design

Mockup of the design - The date range picker

Note - The design is just a basic structure without any functionality or API calls implemented yet.

Header Component

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">
...
export default Header;

Header Widget

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>

                    ...
                    
                </Tabs>
            </div>
        </>
    )
}

export default HeaderWidget;