Style Guide - Copy this React, Tailwind Component to your project

Redo my style.css on the better looking style like the https://cal.com/ website keeping all used buttoms etc . My code : :root { primary bg: rgb(244, 244, 244); secondary bg: rgb(255, 255, 255); text primary: rgb(36, 36, 36); text secondary: rgb(137, 137, 137); border color: rgb(229, 231, 235); hover bg: rgb(240, 240, 240); button primary: #007bff; /* Оригінальний синій для кнопок, або можна взяти більш нейтральний */ button primary hover: #0056b3; button success: #28a745; button success hover: #218838; button danger: #dc3545; button danger hover: #c82333; button secondary: #6c757d; button secondary hover: #5a6268; button warning: #f0ad4e; /* Для кнопки "Скинути" */ success message bg: #e6ffed; success message color: #28a745; error message bg: #ffebee; error message color: red; } body { font family: sans serif; /* font family: sans serif; */ background color: var( primary bg); margin: 0; padding: 0; box sizing: border box; color: var( text primary); webkit font smoothing: antialiased; /* :root { webkit font smoothing: antialiased; } */ moz osx font smoothing: grayscale; /* :root { moz osx font smoothing: grayscale; } */ display: flex; justify content: center; align items: flex start; /* Вирівнювання по верхньому краю для сторінок зі скролом */ min height: 100vh; } /* Загальні стилі для контейнерів форм (login, signup, addgrade, studentform) */ .form container, .login container, .registration container { background color: var( secondary bg); padding: 30px; /* Збільшено для кращих відступів */ border radius: 8px; box shadow: 0 4px 12px rgba(0,0,0,0.08); /* М'якша, більша тінь */ width: 100%; max width: 450px; /* Загальна максимальна ширина для форм */ margin top: 50px; /* Відступ зверху */ margin bottom: 50px; text align: center; } h1, h2 { text align: center; color: var( text primary); margin bottom: 25px; font size: 2em; /* Збільшено розмір заголовків */ font weight: 600; } label { display: block; margin bottom: 8px; color: var( text secondary); font weight: 500; text align: left; } input[type="text"], input[type="number"], input[type="email"], input[type="password"], select { width: calc(100% 20px); /* Враховуємо padding */ padding: 12px; /* Збільшено для кращого вигляду */ margin bottom: 20px; /* Збільшено відступ */ border: 1px solid var( border color); border radius: 6px; /* Трохи більший радіус */ font size: 1rem; box sizing: border box; /* Важливо для width: 100% */ } /* Загальні стилі кнопок */ button, .add button, .edit button, .delete button, .sort buttons a, .search form button { padding: 12px 20px; /* Збільшено для кращого вигляду */ border: none; border radius: 6px; cursor: pointer; font size: 1rem; text decoration: none; display: inline block; /* Для посилань, що виглядають як кнопки */ transition: background color 0.2s ease, transform 0.1s ease; text align: center; color: white; /* Дефолтний колір тексту для кнопок */ } button:hover, .add button:hover, .edit button:hover, .delete button:hover, .sort buttons a:hover, .search form button:hover { transform: translateY( 1px); /* Легкий ефект підняття */ } /* Конкретні кольори кнопок */ .add button, button[type="submit"] { /* Застосовуємо до add button та всіх submit кнопок */ background color: var( button success); } .add button:hover, button[type="submit"]:hover { background color: var( button success hover); } .edit button { background color: var( button primary); } .edit button:hover { background color: var( button primary hover); } .delete button { background color: var( button danger); } .delete button:hover { background color: var( button danger hover); } .logout button { background color: var( button danger); padding: 10px 18px; /* Менший розмір для кнопки виходу */ } .logout button:hover { background color: var( button danger hover); } .sort buttons a { background color: var( button primary); } .sort buttons a:hover { background color: var( button primary hover); } .search form button { background color: var( button secondary); } .search form button:hover { background color: var( button secondary hover); } .search form .add button { /* Кнопка "Скинути" у формі пошуку */ background color: var( button warning) !important; /* !important для перевизначення */ } .search form .add button:hover { background color: #e09b3b !important; /* Темніший помаранчевий */ } /* Повідомлення */ .message container, .success message, .error message, .logout message { padding: 12px; border radius: 6px; font weight: bold; margin bottom: 20px; text align: center; } .success message, .logout message { background color: var( success message bg); color: var( success message color); } .error message { background color: var( error message bg); color: var( error message color); } /* Специфічні стилі для students.jte */ .container { max width: 1200px; /* Збільшено ширину контейнера для таблиці */ margin: 50px auto; /* Відступи зверху/знизу та по центру */ padding: 30px; background color: var( secondary bg); border radius: 8px; box shadow: 0 4px 12px rgba(0,0,0,0.08); } .logout container { text align: right; margin bottom: 20px; } .action buttons { margin top: 30px; margin bottom: 30px; display: flex; flex wrap: wrap; justify content: space between; align items: center; gap: 15px; /* Забезпечує відступи між групами кнопок */ } .action buttons .left side buttons, .action buttons .right side search { display: flex; gap: 10px; align items: center; flex wrap: wrap; /* Дозволяє кнопкам переноситись на новий рядок на малих екранах */ } .search form { display: flex; gap: 10px; flex grow: 1; /* Дозволяє формі займати доступний простір */ max width: 400px; /* Обмеження ширини форми пошуку */ } .search form input[type="text"] { flex grow: 1; margin bottom: 0; /* Обнуляємо margin bottom для інпутів у flex контейнерах */ } table { width: 100%; border collapse: separate; /* Використовуємо separate для border radius на клітинках */ border spacing: 0; /* Прибираємо простір між клітинками */ margin top: 30px; background color: var( secondary bg); border radius: 8px; /* Радіус для всієї таблиці */ overflow: hidden; /* Обрізає кути, якщо border radius застосовано до таблиці */ } th, td { border: 1px solid var( border color); padding: 12px 15px; /* Більший padding */ text align: left; } th { background color: var( hover bg); /* Світліший фон для заголовків */ font weight: 600; color: var( text primary); position: sticky; /* Щоб заголовки залишалися видимими при прокрутці */ top: 0; z index: 1; } /* Стилі для першої та останньої клітинки заголовка */ th:first child { border top left radius: 8px; } th:last child { border top right radius: 8px; } tr:last child td:first child { border bottom left radius: 8px; } tr:last child td:last child { border bottom right radius: 8px; } td { color: var( text primary); } /* Стилі для рядків таблиці при наведенні */ tbody tr:hover { background color: var( hover bg); } .grades section { margin top: 30px; } .grades section h3 { margin bottom: 15px; color: var( text primary);} .grade item { margin bottom: 5px; font size: 0.95em; color: var( text secondary);} .grade item ul { list style: none; padding: 0; margin: 0; } .grade item ul li { margin bottom: 5px; } .sort buttons { margin bottom: 25px; display: flex; gap: 10px; flex wrap: wrap; justify content: center; /* Центрування кнопок сортування */ } .sort buttons a { flex grow: 1; /* Дозволяє кнопкам розтягуватися */ text align: center; max width: 250px; /* Обмеження ширини кнопок */ } .back link, .register link, .login link { display: block; text align: center; margin top: 25px; font size: 1rem; } .back link a, .register link a, .login link a { color: var( button primary); text decoration: none; font weight: 500; } .back link a:hover, .register link a:hover, .login link a:hover { text decoration: underline; } /* Адаптивні стилі */ @media (max width: 768px) { .container, .form container, .login container, .registration container { margin left: 15px; margin right: 15px; padding: 20px; } h1 { font size: 1.8em; } table { font size: 0.9em; } th, td { padding: 10px; } .action buttons { flex direction: column; align items: stretch; } .action buttons .left side buttons, .action buttons .right side search { flex direction: column; gap: 10px; width: 100%; } .search form { flex direction: column; width: 100%; max width: 100%; } .search form input[type="text"] { width: 100%; } .search form button, .search form .add button { width: 100%; } .sort buttons { flex direction: column; } .sort buttons a { width: 100%; max width: 100%; } }