Feature Rich Component - Copy this React, Tailwind Component to your project

import React, { useState } from 'react'; import CalendarTodayIcon from '@mui/icons-material/CalendarToday'; const ItineraryComponent = () => { const [selectedDay, setSelectedDay] = useState(1); const days = Array.from({ length: 7 }, (_, i) => i + 1); const itinerary = [ { id: 1, plan: "Visit the museum and have lunch at the park." }, { id: 2, plan: "Shopping in the local market." }, { id: 3, plan: "Boat ride and dinner by the river." }, { id: 4, plan: "Hiking in the mountains." }, { id: 5, plan: "Relaxing day at the beach." }, { id: 6, plan: "City tour and theater play." }, { id: 7, plan: "Spa day and fine dining." } ]; return ( <div className='container mx-auto p-4'> <div className='flex justify-center flex-wrap mb-8'> {days.map((day) => ( <button key={day} onClick={() => setSelectedDay(day)} aria-label={`Select Day ${day}`} className={`m-2 p-2 xl:p-4 rounded-lg transition-colors duration-300 ease-in-out ${selectedDay === day ? 'bg-blue-500 text-white' : 'bg-white text-blue-500'} hover:bg-blue-600 hover:text-white focus:bg-blue-700 focus:text-white`} > <CalendarTodayIcon className='mr-2' /> Day {day} </button> ))} </div> <div className='text-center'> <h2 className='text-2xl font-bold mb-4'>Itinerary for Day {selectedDay}</h2> <p className='text-lg'>{itinerary.find(day => day.id === selectedDay)?.plan}</p> </div> </div> ); }; export default ItineraryComponent; make this styled