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

<template>
    <section class="p-3 rounded-lg flex flex-col" :class="{'bg-gray-800': second === false, 'bg-gray-700': second === true}">
        <div class="flex items-center">
            <div class="col-span-full font-semibold text-gray-300" v-if="heading" 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>