body { font-family: 'Inter', sans-serif; background-color: #f7fafc; /* bg-gray-100 */ display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; /* p-4 */ } .card-container { background-color: #ffffff; /* bg-white */ padding: 1.5rem; /* p-6 */ border-radius: 1rem; /* rounded-2xl */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */ width: 100%; max-width: 48rem; /* max-w-2xl */ } .logo-container { display: flex; justify-content: center; margin-bottom: 1.5rem; /* mb-6 */ } .logo { width: 50%; /* Make the logo fill the container width */ height: auto; object-fit: contain; margin: 0 auto; /* Center the logo horizontally */ } .main-heading { font-size: 1.75rem; /* text-2xl */ font-weight: 700; /* font-bold */ text-align: center; color: #1e293b; /* text-indigo-900 */ margin-bottom: 0.5rem; /* mb-2 */ } .sub-heading { font-size: 1.25rem; /* text-lg */ font-weight: 600; /* font-semibold */ text-align: center; color: #4b5563; /* text-gray-600 */ margin-bottom: 1.5rem; /* mb-6 */ } .form-section { display: flex; flex-direction: column; gap: 1rem; /* space-y-4 */ } .input-group { display: grid; grid-template-columns: 1fr; /* grid-cols-1 */ gap: 1rem; /* gap-4 */ } .form-label { display: block; font-size: 1rem; /* text-sm */ font-weight: 500; /* font-medium */ color: #374151; /* text-gray-700 */ } .form-input, .form-textarea { margin-top: 0.25rem; /* mt-1 */ display: block; width: 100%; border-radius: 0.375rem; /* rounded-md */ border: 1px solid #d1d5db; /* border-gray-300 */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */ padding: 0.75rem; /* p-2 */ transition: all 0.2s ease-in-out; } .form-input:focus, .form-textarea:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #6366f1; /* focus:border-indigo-500 */ box-shadow: 0 0 0 1px #6366f1; /* focus:ring-indigo-500 */ } .form-textarea { resize: vertical; } .button-container { display: flex; justify-content: center; } .submit-button { width: 100%; padding: 0.75rem 1.5rem; /* px-6 py-3 */ border-radius: 0.375rem; /* rounded-md */ border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); font-size: 1rem; /* text-base */ font-weight: 500; /* font-medium */ color: #ffffff; /* text-white */ background-color: #f97316; /* bg-orange-500 */ transition: background-color 0.15s ease-in-out; } .submit-button:hover { background-color: #ea580c; /* hover:bg-orange-600 */ } .submit-button:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f97316; /* focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 */ } .submitted-data-container { margin-top: 2rem; /* mt-8 */ padding-top: 1.5rem; /* pt-6 */ border-top: 2px solid #e5e7eb; /* border-t-2 border-gray-200 */ } .data-heading { font-size: 1.25rem; /* text-xl */ font-weight: 700; /* font-bold */ color: #1e293b; /* text-indigo-900 */ margin-bottom: 1rem; /* mb-4 */ } .data-list { background-color: #f9fafb; /* bg-gray-50 */ padding: 1rem; /* p-4 */ border-radius: 0.375rem; /* rounded-md */ box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* shadow-inner */ } .data-item { color: #374151; /* text-gray-700 */ margin-bottom: 0.5rem; /* mb-2 */ } .status-message { font-size: 1rem; text-align: center; margin-top: 1rem; padding: 0.75rem; border-radius: 0.375rem; } .success { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; } .error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; } /* Responsive styles for screens larger than 768px (md breakpoint) */ @media (min-width: 768px) { body { padding: 2rem; /* md:p-8 */ } .card-container { padding: 2rem; /* md:p-8 */ } .main-heading { font-size: 2.25rem; /* md:text-3xl */ } .sub-heading { font-size: 1.5rem; /* md:text-xl */ margin-bottom: 2rem; /* md:mb-8 */ } .form-section { gap: 1.5rem; /* md:space-y-6 */ } .input-group { grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */ gap: 1.5rem; /* md:gap-6 */ } .submit-button { width: auto; /* sm:w-auto */ } }