sfp_front_nuxt_iguassu_alliance/app/components/PartnershipCard.vue

<template>
    <div class="relative border-gradient w-[285px] h-[200px] flex items-center jusfiy-center">
        <NuxtImg :src="image" class="w-full h-full object-cover" />
        <div class="max-w-[198] absolute inset-0 flex flex-col justify-center items-center gap-3 px-4">
            <span class="bg-[#8DC63F] text-white text-[10px] font-bold uppercase px-3 py-1 rounded-full">
                {{ tag }}
            </span>
            <p class="text-white text-center text-[17px] font-bold uppercase leading-tight">
                {{ title }}
            </p>
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    image: string;
    tag: string;
    title: string;
}>();
</script>

<style scoped>
.border-gradient {
    border: 2px solid transparent;
    border-image: linear-gradient(to right, #8DC63F, #5F980F) 1;
}
</style>