@props(['href', 'title', 'active' => true])

<div class="tw:p-4 tw:max-w-sm" style="display: {{ $active ? 'block' : 'none' }};">
    <div class="tw:flex tw:rounded-lg tw:h-full  tw:bg-cyan-900 tw:p-8 tw:flex-col">
        <div class="tw:flex tw:items-center tw:mb-3">
            <div
                class="tw:w-8 tw:h-8 tw:mr-3 tw:inline-flex tw:items-center tw:justify-center tw:rounded-full tw:bg-indigo-500 tw:text-white tw:flex-shrink-0">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    class="tw:w-5 tw:h-5" viewBox="0 0 24 24">
                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                </svg>
            </div>
            <h2 class="tw:text-white  tw:text-lg tw:font-medium">{{ $title }}</h2>
        </div>
        <div class="tw:flex tw:flex-col tw:justify-between tw:flex-grow">
            <p class="tw:leading-relaxed tw:text-base tw:text-white ">
                {{ $slot }}
            </p>
            <a href="{{ $href }}"
                class="tw:mt-3 tw:text-cyan-200 hover:tw:text-blue-600 tw:inline-flex tw:items-center">Configurar
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2" class="tw:w-4 tw:h-4 tw:ml-2" viewBox="0 0 24 24">
                    <path d="M5 12h14M12 5l7 7-7 7"></path>
                </svg>
            </a>
        </div>
    </div>
</div>