Healthcare Components - Copy this React, Tailwind Component to your project
Booking Section Layout: Use a segmented control or tab layout to present different booking options (Mobile Service, Online Consultation, Service at Center). Highlight the currently active booking option. Functional Details: Implement tabs that, when clicked, display information or redirect the user to the relevant booking form or page. Styling: Use bold, contrasting colors for active tabs to make them stand out. Ensure that the tabs are large enough to be easily clickable, especially on mobile devices.Our Services Section Layout: Use a card layout with each card representing a different service. Each card should contain an icon, a service title, and a short description. Cards should be displayed in a grid format, responsively adjusting to screen size. Functional Details: Cards can be clickable and lead to more detailed pages about each service. Optionally, add a 'View All' button at the bottom of the section to navigate to a complete services page. Styling: Use soft background colors for the cards to distinguish them from the rest of the layout. Icons should be minimalist and related to the service offered.News Section Layout: Display news items as cards in a horizontal slider format. Each card should feature a news image, the title, a brief description or excerpt, and additional metadata such as the publication date and author. Functional Details: Implement a carousel or slider using a JavaScript library like Slick or Bootstrap’s Carousel to navigate through the news articles. Include navigation dots or arrows for users to manually cycle through the news items. Styling: Use high quality images to attract attention. Keep text readable and clean, using a consistent font and spacing.
