Create styles.css

Templates/styles.css

@@ -0,0 +1,149 @@
+/* Ensure body doesn't overflow */
+body {
+    max-width: 100%;
+    overflow-x: hidden;
+}
+
+/* Background colors */
+.bg-light-gray {
+    background-color: #f3f4f6; /* Tailwind bg-gray-100 */
+}
+.bg-white {
+    background-color: #ffffff; /* Tailwind bg-white */
+}
+.bg-blue {
+    background-color: #2563eb; /* Tailwind bg-blue-600 */
+}
+.hover-bg-blue-dark:hover {
+    background-color: #1d4ed8; /* Tailwind hover:bg-blue-700 */
+}
+
+/* Text colors */
+.text-blue {
+    color: #2563eb; /* Tailwind text-blue-600 */
+}
+.text-gray {
+    color: #4b5563; /* Tailwind text-gray-700 */
+}
+.text-dark-gray {
+    color: #1f2937; /* Tailwind text-gray-800 */
+}
+
+/* Typography */
+.text-2xl {
+    font-size: 1.5rem; /* Tailwind text-2xl */
+}
+.text-lg {
+    font-size: 1.125rem; /* Tailwind text-lg */
+}
+.text-sm {
+    font-size: 0.875rem; /* Tailwind text-sm */
+}
+.font-bold {
+    font-weight: 700; /* Tailwind font-bold */
+}
+.font-medium {
+    font-weight: 500; /* Tailwind font-medium */
+}
+.font-semibold {
+    font-weight: 600; /* Tailwind font-semibold */
+}
+.text-center {
+    text-align: center; /* Tailwind text-center */
+}
+
+/* Spacing */
+.p-4 {
+    padding: 1rem; /* Tailwind p-4 */
+}
+.p-6 {
+    padding: 1.5rem; /* Tailwind p-6 */
+}
+.py-2 {
+    padding-top: 0.5rem; /* Tailwind py-2 */
+    padding-bottom: 0.5rem;
+}
+.px-4 {
+    padding-left: 1rem; /* Tailwind px-4 */
+    padding-right: 1rem;
+}
+.mt-1 {
+    margin-top: 0.25rem; /* Tailwind mt-1 */
+}
+.mb-4 {
+    margin-bottom: 1rem; /* Tailwind mb-4 */
+}
+.mt-6 {
+    margin-top: 1.5rem; /* Tailwind mt-6 */
+}
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    margin-top: 1rem; /* Tailwind space-y-4 */
+}
+
+/* Layout */
+.min-h-screen {
+    min-height: 100vh; /* Tailwind min-h-screen */
+}
+.flex {
+    display: flex; /* Tailwind flex */
+}
+.flex-col {
+    flex-direction: column; /* Tailwind flex-col */
+}
+.items-center {
+    align-items: center; /* Tailwind items-center */
+}
+.justify-center {
+    justify-content: center; /* Tailwind justify-center */
+}
+.w-full {
+    width: 100%; /* Tailwind w-full */
+}
+.max-w-4xl {
+    width: 100%; /* Ensure it uses full available width */
+    max-width: 64rem; /* Updated to Tailwind max-w-4xl for wider desktop layout */
+    min-width: 48rem; /* Ensure it doesn't shrink too much */
+}
+.block {
+    display: block; /* Tailwind block */
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .max-w-4xl {
+        max-width: 100%;
+        min-width: 0;
+    }
+    .p-6 {
+        padding: 1rem;
+    }
+}
+
+/* Borders and Shadows */
+.rounded {
+    border-radius: 0.375rem; /* Tailwind rounded */
+}
+.border-gray {
+    border: 1px solid #d1d5db; /* Tailwind border-gray-300 */
+}
+.shadow {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Tailwind shadow */
+}
+.shadow-sm {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Tailwind shadow-sm */
+}
+.focus-border-blue:focus {
+    border-color: #3b82f6; /* Tailwind focus:border-blue-500 */
+    outline: none;
+}
+.focus-ring-blue:focus {
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* Tailwind focus:ring-blue-500 */
+}
+
+/* Miscellaneous */
+.overflow-auto {
+    overflow: auto; /* Tailwind overflow-auto */
+}
+.hidden {
+    display: none; /* Tailwind hidden */
+}