abiball/templates/ticket/_partials/_form.html.twig

<div class="bg-white/50 backdrop-blur-sm rounded-2xl border border-gray-100 p-4 hover:shadow-md transition-all duration-300">
    <div class="grid grid-cols-12 gap-4">
        <div class="relative col-span-4">
            <twig:ux:icon name="mingcute:ticket-fill" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
            <select name="ticket" class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all">
                <option value="" disabled selected>Ticket wählen*</option>
                <option value="1">All-Inclusive</option>
                <option value="2">After-Show</option>
                <option value="3">Kind (6-12)</option>
                <option value="4">Kind (0-6)</option>
            </select>
            <div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
                <twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-gray-400" />
            </div>
        </div>

        <div class="relative col-span-3">
            <twig:ux:icon name="mdi:food" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
            <select name="food" class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all">
                <option value="" disabled selected>Ernährung wählen*</option>
                <option value="1">Mit Fleisch</option>
                <option value="2">Vegetarisch</option>
                <option value="3">Vegan</option>
            </select>
            <div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
                <twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-gray-400" />
            </div>
        </div>

        <div class="relative col-span-4">
            <twig:ux:icon name="mdi:note" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
            <input type="text" 
                   placeholder="z.B. Allergien" 
                   name="note" 
                   class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-gray-200 text-gray-800 text-[15px] placeholder-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all" />
        </div>

        <div class="flex justify-center items-center col-span-1">
            <button data-action="form#removeEntry" 
                    class="group p-2.5 hover:bg-red-50 rounded-xl transition-all duration-300" 
                    title="Ticket entfernen">
                <twig:ux:icon name="mingcute:delete-fill" 
                             class="w-6 h-6 text-red-400 group-hover:text-red-500 transition-colors" />
            </button>
        </div>
    </div>
</div>