Прочтите часть 1, если нет! Это вторая часть TailwindCSS, используемого в фреймворке React.js. Теперь, когда у нас установлен TailwindCSS, приступим к созданию компонентов. Вы можете назвать свое приложение create-response-app как угодно, я лично назвал свое TailwindCSS.

Удалите шаблонный код из файла App.js, мы будем использовать его позже. Сделаем компонент Hero!

Герой

Раздел «Герой» - это первое, что пользователь увидит на вашем сайте, чтобы произвести первое впечатление. Возможно, вы заметили, что на других веб-сайтах будет отображаться логотип со слоганом или анимированной графикой. Давайте сделаем это для этого проекта с Tailwind!

Создадим папку с компонентами и в ней будет наш файл Hero.js.

Здесь мы установили белый цвет фона с высотой, охватывающей весь экран. Мы также сделали так, чтобы наш текст располагался по центру страницы. Экспортируйте это и поместите в свой файл App.js, чтобы мы могли увидеть результат.

Сейчас это действительно просто, так что давайте сделаем панель навигации! В компонентах мы создадим Nav.js, чтобы мы могли экспортировать его в App.js.

Панель навигации

Итак, теперь мы превратили его в гибкий бокс с размером по ширине, охватывающим экран. Мы также установили нашу панель навигации на высоту 16 пикселей и все элементы внутри должны быть центрированы. Вот как это выглядит сейчас:

Давайте добавим другие разделы нашего базового приложения в стиле TailwindCSS, чтобы они могли быть элементами на панели.

Информация

Далее мы сделаем информационный раздел. Информационный раздел посвящен компании и тому, что они предлагают с точки зрения продуктов или услуг. Вы можете увидеть рядом с ним рисунок, слайд с изображением или сетку. Давайте создадим базовую структуру, прежде чем добавлять к ней.

Мы использовали тот же стиль <div> для информации с добавленным макетом сетки и текстом сбоку. Мы установили черный фон и выровняли все элементы по центру. Сейчас у нас есть три сетки с интервалом, установленным зазором-6. В нашей реальной сетке мы установили высоту и ширину 60 пикселей, а также границу для создания трехмерного затенения.

Наша навигационная панель закреплена на экране! Информационная секция также занимает весь экран. После того, как наши навигационные элементы были добавлены, мы можем переходить между разными разделами веб-сайта в любое время.

Далее мы добавим страницу контактов.

Контакт

Страница контактов обычно является последним разделом для отправки запросов в компанию. Мы создадим поле базового типа ввода и добавим к нему базовый стиль.

Установим высоту экрана. Помимо центрирования, на этот раз мы разместим элементы по оси x на 8 пикселей из-за текстового описания сбоку. Мы также установим высоту и ширину поля ввода и кнопки отправки. Кнопка была размещена в нижней части поля ввода с «относительным w-full bottom-0».

И это будет выглядеть примерно так!

Наконец, давайте создадим нижний колонтитул!

Нижний колонтитул

Нижний колонтитул простой и будет размещен в самом низу страницы. Мы просто добавим ему немного стиля и текста и вуаля.

Не плохо!

В части 3 мы добавим больше вещей на наш сайт в стиле TailwindCSS. Из логотипа, фонов, макетов продуктов с описанием, анимации / эффектов и многого другого.