adrema/resources/js/components/ui/Box.vue

<template>
    <section class="p-3 rounded-lg flex flex-col"
        :class="{ 'bg-gray-800 group-[.is-popup]:bg-zinc-700': second === false, 'bg-gray-700 group-[.is-popup]:bg-zinc-600': second === true }">
        <div class="flex items-center">
            <div v-if="heading" class="col-span-full font-semibold text-gray-300 group-[.is-popup]:text-zinc-300"
                v-text="heading"></div>
            <slot name="in-title"></slot>
        </div>
        <main :class="{ 'mt-2': heading, [containerClass]: true }">
            <slot></slot>
        </main>
    </section>
</template>

<script>
export default {
    props: {
        heading: {
            type: String,
        },
        second: {
            type: Boolean,
            default: false,
        },
        containerClass: {
            default: function () {
                return '';
            },
        },
    },
};
</script>