Сверстать админку из figma/pixso в html + tailwind

Техническое задание на верстку приложения из Figma в HTML + Tailwind

Общие требования:

1. Адаптивность: Только десктоп.
2. Кроссбраузерность: Обеспечить корректное отображение в последних версиях браузеров (Chrome, Firefox, Safari, Edge).
3. Компонентность: Использование компонентного подхода с использованием Tailwind CSS для создания переиспользуемых стилей.

Структура проекта:

1. HTML: Структура страниц и компонентов согласно макету в Figma.
2. Tailwind CSS: Использование утилитарных классов для стилизации элементов.
3. Статические файлы: Все необходимые изображения, иконки и шрифты должны быть включены в проект.

Макеты и страницы:

1. Главная страница:
   
   
   • Заголовок, подзаголовок, кнопки CTA.
   • Превью продуктов/услуг.
   • Отзывы клиентов.
   • Контактная информация и форма обратной связи.
2. Страница продукта/услуги:
   
   
   • Детальное описание продукта/услуги.
   • Галерея изображений.
   • Спецификации и характеристики.
   • Блок с ценой и кнопкой "Купить/Заказать".
3. О нас:
   
   
   • Информация о компании.
   • Команда.
   • История и достижения.
4. Блог/Новости:
   
   
   • Список статей с кратким превью.
   • Полный текст статьи.
5. Контакты:
   
   
   • Форма обратной связи.
   • Карта с указанием местоположения.
   • Контактная информация (телефон, email, адрес).

Структура кода:

1. Файловая структура:
   
   
   • /index.html
   • /about.html
   • /product.html
   • /blog.html
   • /contact.html
   • /assets/ - директория для статических файлов (изображения, шрифты, иконки)
   • /css/ - директория для дополнительных стилей (если необходимо)
   • /js/ - директория для скриптов (если необходимо)
2. HTML:
   
   
   • Использование семантических тегов (<header>, <footer>, <section>, <article>, <nav>, <main> и т.д.).
   • Подключение Tailwind CSS через CDN или локально.
3. Tailwind CSS:
   
   
   • Использование утилитарных классов для стилизации.
   • Настройка конфигурационного файла Tailwind (tailwind.config.js) для кастомизации темы и добавления собственных стилей, если необходимо.