Fancy Price Component - Copy this React, Tailwind Component to your project

<section class={`py-10 ${index % 2 === 1 ? 'bg-gray-50' : ''}`}> <div class="container mx-auto px-6"> <div class="mb-1"> <div class={`flex flex-col ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'} items-center gap-8 `}> <div class="lg:w-1/2"> <img src={image} alt={title} class="w-full h-[400px] object-cover rounded-lg shadow-lg transform transition-transform duration-500 hover:scale-105" /> </div> <div class="lg:w-1/2 space-y-6"> <div class="flex items-center gap-4"> <i class={`fas ${iconClass} text-4xl text-d3 flex-shrink-0`}></i> <h3 class="text-3xl font-bold">{title}</h3> </div> <p class="text-xl text-gray-600">{description}</p> <div class="space-y-4"> {benefits.map((benefit) => ( <div class="flex items-center gap-3"> <i class="fas fa-star text-4xl text-d1 flex-shrink-0"></i> <span class="text-lg text-gray-700">{benefit}</span> </div> ))} </div> <slot name="price" /> </div> </div> </div> </div> </section>