Material Design 折叠面板

<div class="max-w-md mx-auto my-8 bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
    <div class="accordion-item">
        <input type="checkbox" id="accordion-1" class="hidden peer">
        <label for="accordion-1" class="flex items-center justify-between p-4 cursor-pointer bg-blue-500 text-white dark:bg-blue-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Product Details</h3>
            <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-blue-100 dark:bg-blue-900 text-gray-800 dark:text-gray-200">
                <p><strong>Material:</strong> 100% Cotton</p>
                <p><strong>Care Instructions:</strong> Machine wash cold</p>
                <p><strong>Origin:</strong> Made in Vietnam</p>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" id="accordion-2" class="hidden peer">
        <label for="accordion-2" class="flex items-center justify-between p-4 cursor-pointer bg-green-500 text-white dark:bg-green-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Shipping Information</h3>
            <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-green-100 dark:bg-green-900 text-gray-800 dark:text-gray-200">
                <p><strong>Shipping Options:</strong> Standard, Express</p>
                <p><strong>Estimated Delivery:</strong> 3-5 business days</p>
                <p><strong>Tracking:</strong> Available</p>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" id="accordion-3" class="hidden peer">
        <label for="accordion-3" class="flex items-center justify-between p-4 cursor-pointer bg-orange-500 text-white dark:bg-orange-700 dark:text-gray-100">
            <h3 class="text-lg font-medium">Customer Reviews</h3>
            <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
            <div class="p-4 bg-orange-100 dark:bg-orange-900 text-gray-800 dark:text-gray-200">
                <div class="mb-2">
                    <p class="font-semibold">John Doe</p>
                    <p class="text-sm">"Great product, highly recommend!"</p>
                </div>
                <div>
                    <p class="font-semibold">Jane Smith</p>
                    <p class="text-sm">"Fast shipping and excellent quality."</p>
                </div>
            </div>
        </div>
    </div>
</div>