{{ form_start(form) }}

<div class="relative py-3 max-w-2xl mx-auto mb-12 mt-8">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-blue-700 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
        <div class="max-w-2xl mx-auto">
            <div class="divide-y divide-gray-200">
                <div class="text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
 
                    <div class="relative">
                        {{ form_label(form.comment, 'Commentaire : ', {'label_attr': {'class': 'text-gray-600 text-xl peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all peer-focus:-top-3.5 peer-focus:text-gray-600 peer-focus:text-xl'}}) }}
                        {{ form_widget(form.comment, {'attr': {'class': 'peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600', 'placeholder': 'Commentaire'}}) }}
                        {{ form_errors(form.comment) }}
                    </div>
                    
                    <div class="relative">
                        <button type="submit" class="bg-blue-500 text-3xl lg:text-base hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline add-another-collection-widget">
                            {{ button_label|default('Confirmer la commande') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{ form_end(form) }}