<div class="group relative w-full max-w-md mx-auto bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-lg p-6 md:p-8 transition-all duration-300 hover:shadow-xl hover:border-blue-500 dark:hover:border-blue-400"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white tracking-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Team Settings</h3> </div> <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed mb-6">Manage your team permissions, invites, roles, and integrations here. Changes apply instantly across all team workspaces.</p> <div class="flex flex-col sm:flex-row gap-4 sm:justify-end"> <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors">Cancel</button> <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-300 transition-all duration-150">Save Changes</button> </div> </div>
<div class="group card">
<div class="flex items-center justify-between mb-4"> <h3 class="card-title">Team Settings</h3> </div> <p class="card-description"> Manage your team permissions, invites, roles, and integrations here. Changes apply instantly across all team workspaces. </p> <div class="flex flex-col sm:flex-row gap-4 sm:justify-end"> <button class="btn btn-cancel">Cancel</button> <button class="btn btn-save">Save Changes</button> </div>
/\* tailwind.css \*/ .card-container { @apply flex flex-col md:flex-row items-center justify-between w-full max-w-screen-xl px-6 md:px-12 py-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md space-y-6 md:space-y-0 md:space-x-8 text-sm text-gray-700 dark:text-gray-300 font-medium tracking-tight leading-relaxed hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-300 ease-in-out; }
