Service Details - Copy this React, Tailwind Component to your project

1. **Service Details:** Show the **name** of the service as a bold title. Display the **description** of the service as a paragraph below the title. Show the **price** of the service, styled in a noticeable way (e.g., larger font or highlighted). 2. **Layout:** Use a **card based** layout for each service. Each card should contain the service name at the top, followed by the description, and the price at the bottom. The cards should be arranged in a grid layout, which adapts to different screen sizes. On larger screens, show 3 4 cards per row. On smaller screens (like mobile), the cards should stack vertically. 3. **Styling:** Use Bootstrap classes for layout and styling (e.g., `card`, `card body`, `text center`, `row`, `col`). Add some padding and margin to ensure the layout is clean and visually appealing. Use Bootstrap's **card** component for each service, ensuring it has a light background with a shadow effect on hover. 4. **Responsiveness:** The component should be fully responsive, adapting to mobile, tablet, and desktop screens. Ensure that on mobile devices, the cards stack vertically, and on larger screens, they display in a grid. 5. **Data Structure:** Assume the data for each service is provided in a simple array with the fields `name`, `description`, and `price`. 6. **Tools/Technologies:** Use **HTML**, **Bootstrap 5**, and **JavaScript** for this component.