Flight Booking Interface - Copy this React, Tailwind Component to your project
Design a sleek and modern flight booking interface with a gray background and a clean, minimalistic layout. The interface contains three primary options at the top: 'Flights,' 'Hotel,' and 'My Trip,' each represented by distinct icons. Below, a section shows the flight details, starting with the departure location ('Flying From') on the left and the destination ('Flying To') on the right. The departure city is 'LHR' (London Heathrow), and the destination city is 'BOM' (Mumbai, India), both displayed in large, bold black text with airport icons beside them. Between the cities, there's a round trip icon in the center to indicate the type of flight. Below the city names, a blue dropdown menu allows users to select options like 'Round Trip,' 'All Airlines,' and 'Any Class.' Next to these dropdowns, checkboxes provide the option to select 'Direct Flight' and 'Flex (+/ 3 days)' for flexible travel dates. On the right side, under the 'Depart Date' and 'Return Date' sections, the departure date is shown as '19 Apr 2024' (Friday), and the return date is '30 Apr 2024' (Monday). Both dates are displayed in bold black text with blue calendar icons beside them for easy selection. Further to the right, a 'Travellers & Class' section displays a dropdown showing '1 Traveller' and 'Economy' class, with an icon of a seated traveler beside it. Finally, a large blue 'Search' button is positioned on the far right, encouraging users to finalize their flight search. The overall design uses light blue accents for interactive elements such as the icons, checkboxes, and borders, providing a crisp and modern feel to the user interface, enhancing usability and clarity.
