Sezione Fondi Aiuti

<!-- tab component -->
<section class="py-6 md:py-8">
    <h2 class="sr-only" id="tablist-1">Fondi</h2>
    <ul role="tablist" aria-labelledby="tablist-1" class="n7-tablist is-tablist is-manual border-b n7-border-gray-01 mb-4 md:mb-10 flex">
        <li role="presentation">
            <button id="tab-1" type="button" role="tab" class="n7-tab n7-tablist__tab is-tab p-3 md:px-6 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-gray-02 aria-selected:n7-border-gray-04" aria-selected="true" aria-controls="tabpanel-1">
                <span class="focus">Fondi comunitari</span>
            </button>
        </li>

        <li role="presentation">
            <button id="tab-2" type="button" role="tab" class="n7-tab n7-tablist__tab is-tab p-3 md:px-6 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-gray-02 aria-selected:n7-border-gray-04" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
                <span class="focus">Fondi nazionali e regionali</span>
            </button>
        </li>
    </ul>

    <div id="tabpanel-1" class="n7-tablist__tabpanel" role="tabpanel" aria-labelledby="tab-1">
        <h3 class="text-4xl pb-6">Fondi comunitari</h3>
        <div class="grid gap-6">
            <article class="n7-card n7-background-gray-01 rounded-md shadow-md transition hover:shadow-lg
   md:grid-cols-[min-content_1fr]
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="n7-card__image w-12 md:w-16 lg:w-24 h-12 md:h-16 lg:h-24
  ">
                    <img class="object-scale-down w-full h-full" alt="Fondo Europeo Agricolo di Garanzia" src="/images/eu-european-union.png" />
                </div>

                <div class="grid gap-2.5 md:gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
                        <h3 class="n7-card__title text-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                FEAGA<br> Fondo Europeo Agricolo di Garanzia

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <p class="n7-card__excerpt text-base md:text-lg n7-content-03">
                        Testo aggiuntivo da configurazione
                    </p>

                </div>
            </article>

            <article class="n7-card n7-background-gray-01 rounded-md shadow-md transition hover:shadow-lg
   md:grid-cols-[min-content_1fr]
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="n7-card__image w-12 md:w-16 lg:w-24 h-12 md:h-16 lg:h-24
  ">
                    <img class="object-scale-down w-full h-full" alt="Fondo europeo agricolo per lo sviluppo rurale" src="/images/Psr-progamma-sviluppo-rurale.png" />
                </div>

                <div class="grid gap-2.5 md:gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
                        <h3 class="n7-card__title text-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                FEASR-PSR<br> Fondo europeo agricolo per lo sviluppo rurale

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <p class="n7-card__excerpt text-base md:text-lg n7-content-03">
                        Testo aggiuntivo da configurazione
                    </p>

                </div>
            </article>

            <article class="n7-card n7-background-gray-01 rounded-md shadow-md transition hover:shadow-lg
   md:grid-cols-[min-content_1fr]
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="n7-card__image w-12 md:w-16 lg:w-24 h-12 md:h-16 lg:h-24
  ">
                    <img class="object-scale-down w-full h-full" alt=" Fondo per lo sviluppo e la coesione" src="/images/Fsc-fondo-per-lo-sviluppo-e-coesione.png" />
                </div>

                <div class="grid gap-2.5 md:gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
                        <h3 class="n7-card__title text-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                FSC<br> Fondo per lo sviluppo e la coesione

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <p class="n7-card__excerpt text-base md:text-lg n7-content-03">
                        Testo aggiuntivo da configurazione
                    </p>

                </div>
            </article>

            <article class="n7-card n7-background-gray-01 rounded-md shadow-md transition hover:shadow-lg
   md:grid-cols-[min-content_1fr]
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="n7-card__image w-12 md:w-16 lg:w-24 h-12 md:h-16 lg:h-24
  ">
                    <img class="object-scale-down w-full h-full" alt="Piano Regionale Agricolo Forestale" src="/images/rt-regione-toscana.png" />
                </div>

                <div class="grid gap-2.5 md:gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
                        <h3 class="n7-card__title text-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                PRAF<br> Piano Regionale Agricolo Forestale

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <p class="n7-card__excerpt text-base md:text-lg n7-content-03">
                        Testo aggiuntivo da configurazione
                    </p>

                </div>
            </article>

        </div>

    </div>

    <div id="tabpanel-2" class="n7-tablist__tabpanel hidden" role="tabpanel" aria-labelledby="tab-2">
        <h3 class="text-4xl pb-6">Fondi nazionali e regionali</h3>
        <div class="grid gap-6">
            <article class="n7-card n7-background-gray-01 rounded-md shadow-md transition hover:shadow-lg
   md:grid-cols-[min-content_1fr]
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="n7-card__image w-12 md:w-16 lg:w-24 h-12 md:h-16 lg:h-24
  ">
                    <img class="object-scale-down w-full h-full" alt="Fondo Europeo Agricolo di Garanzia" src="/images/eu-european-union.png" />
                </div>

                <div class="grid gap-2.5 md:gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
                        <h3 class="n7-card__title text-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                FEAGA<br> Fondo Europeo Agricolo di Garanzia

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <p class="n7-card__excerpt text-base md:text-lg n7-content-03">
                        Testo aggiuntivo da configurazione
                    </p>

                </div>
            </article>

            <article class="n7-card n7-background-gray-01 rounded-md shadow-md transition hover:shadow-lg
   md:grid-cols-[min-content_1fr]
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="n7-card__image w-12 md:w-16 lg:w-24 h-12 md:h-16 lg:h-24
  ">
                    <img class="object-scale-down w-full h-full" alt="Fondo europeo agricolo per lo sviluppo rurale" src="/images/Psr-progamma-sviluppo-rurale.png" />
                </div>

                <div class="grid gap-2.5 md:gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
                        <h3 class="n7-card__title text-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                FEASR-PSR<br> Fondo europeo agricolo per lo sviluppo rurale

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <p class="n7-card__excerpt text-base md:text-lg n7-content-03">
                        Testo aggiuntivo da configurazione
                    </p>

                </div>
            </article>

            <article class="n7-card n7-background-gray-01 rounded-md shadow-md transition hover:shadow-lg
   md:grid-cols-[min-content_1fr]
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="n7-card__image w-12 md:w-16 lg:w-24 h-12 md:h-16 lg:h-24
  ">
                    <img class="object-scale-down w-full h-full" alt=" Fondo per lo sviluppo e la coesione" src="/images/Fsc-fondo-per-lo-sviluppo-e-coesione.png" />
                </div>

                <div class="grid gap-2.5 md:gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
                        <h3 class="n7-card__title text-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                FSC<br> Fondo per lo sviluppo e la coesione

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <p class="n7-card__excerpt text-base md:text-lg n7-content-03">
                        Testo aggiuntivo da configurazione
                    </p>

                </div>
            </article>

            <article class="n7-card n7-background-gray-01 rounded-md shadow-md transition hover:shadow-lg
   md:grid-cols-[min-content_1fr]
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="n7-card__image w-12 md:w-16 lg:w-24 h-12 md:h-16 lg:h-24
  ">
                    <img class="object-scale-down w-full h-full" alt="Piano Regionale Agricolo Forestale" src="/images/rt-regione-toscana.png" />
                </div>

                <div class="grid gap-2.5 md:gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
                        <h3 class="n7-card__title text-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                PRAF<br> Piano Regionale Agricolo Forestale

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <p class="n7-card__excerpt text-base md:text-lg n7-content-03">
                        Testo aggiuntivo da configurazione
                    </p>

                </div>
            </article>

        </div>

    </div>
</section>