Картки — це універсальні компоненти інтерфейсу користувача, які можуть відображати різноманітний вміст, такий як зображення, текст і інтерактивні елементи, наприклад, кнопки. Tailwind CSS надає широкий вибір утиліт, що спрощують створення та стилізацію компонентів карток.

Структура картки

Базовий компонент картки зазвичай містить такі елементи: зображення, заголовок, описовий текст і кнопки дій.

Ми вже знайомі з окремими елементами цього компонента, тож об'єднаємо всі наші знання в одну повноцінну картку.

Пояснення

1. max-w-sm: Встановлює максимальну ширину елемента на малий розмір (24rem або 384px);
2. rounded: Додає невеликі заокруглені кути елементу;
3. overflow-hidden: Гарантує, що будь-який вміст, який виходить за межі елемента, буде приховано;
4. shadow-lg: Додає велику тінь до елемента.

1. w-full: Встановлює ширину зображення на 100% від контейнера;
2. px-6: Додає горизонтальні відступи по 1.5rem (24px) зліва та справа;
3. py-4: Додає вертикальні відступи по 1rem (16px) зверху та знизу;
4. font-bold: Застосовує жирне накреслення шрифту;
5. text-xl: Встановлює розмір шрифту xl (1.25rem або 20px);
6. mb-2: Додає нижній відступ 0.5rem (8px);
7. text-gray-700: Встановлює колір тексту середньо-сірий;
8. text-base: Встановлює розмір шрифту base (1rem або 16px).

1. px-6: Додає горизонтальний відступ по 1.5rem (24px) зліва та справа;
2. pt-4: Додає верхній відступ 1rem (16px);
3. pb-2: Додає нижній відступ 0.5rem (8px);
4. bg-blue-500: Встановлює колір фону на відтінок синього;
5. hover:bg-blue-700: Змінює колір фону на темніший відтінок синього при наведенні;
6. text-white: Встановлює білий колір тексту;
7. font-bold: Застосовує жирне накреслення шрифту;
8. py-2: Додає вертикальний відступ 0.5rem (8px);
9. px-4: Додає горизонтальний відступ 1rem (16px);
10. rounded: Додає невелике заокруглення кутів кнопки;
11. bg-gray-500: Встановлює колір фону на відтінок сірого;
12. hover:bg-gray-700: Змінює колір фону на темніший відтінок сірого при наведенні;
13. text-white: Встановлює білий колір тексту;
14. font-bold: Застосовує жирне накреслення шрифту;
15. py-2: Додає вертикальний відступ 0.5rem (8px);
16. px-4: Додає горизонтальний відступ 1rem (16px);
17. rounded: Додає невелике заокруглення кутів кнопки;
18. ml-2: Додає лівий відступ 0.5rem (8px).

Як бачите, всі утилітарні класи вже враховано. Тепер об'єднуємо все в одному компоненті картки.

Додамо ще одну секцію до попереднього прикладу — це будуть бейджі.

Пояснення — Бейджі

1. px-6: Додає горизонтальний відступ по 1.5rem (24px) зліва та справа;
2. pt-4: Додає верхній відступ 1rem (16px);
3. pb-2: Додає нижній відступ 0.5rem (8px);
4. inline-block: Відображає елемент як блочний контейнер на рівні рядка;
5. bg-gray-200: Встановлює світло-сірий колір фону;
6. rounded-full: Застосовує повністю заокруглені кути до елемента;
7. px-3: Додає горизонтальний відступ по 0.75rem (12px) зліва та справа;
8. py-1: Додає вертикальний відступ по 0.25rem (4px) зверху та знизу;
9. text-sm: Встановлює малий розмір шрифту (0.875rem або 14px);
10. font-semibold: Застосовує напівжирне накреслення шрифту;
11. text-gray-700: Встановлює середньо-сірий колір тексту;
12. mr-2: Додає правий відступ 0.5rem (8px);
13. mb-2: Додає нижній відступ 0.5rem (8px).

Примітка

Уся детальна інформація про компонент Card доступна тут.