Публикации по теме 'tailwind-css'
Начните свой следующий проект с 30 бесплатных идей CSS-шаблонов Tailwind
Я представлю подборку полностью бесплатных CSS-шаблонов Tailwind. Эти предложения не только предоставляются бесплатно, но также могут похвастаться полной адаптируемостью и настраиваемостью для различных целей, таких как панели администратора, целевые страницы, веб-сайты, блоги и многое другое.
1. Простой свет
Спешите начать свой следующий проект? Используйте Simple Light — шаблон целевой страницы продукта, созданный с помощью Tailwind CSS и React.js. Этот удивительный шаблон..
Шаблон портфолио с Next.js, Typescript и TailwindCSS
Здравствуйте! В этой статье я поделюсь потрясающим шаблоном портфолио, созданным с помощью Next.js, Typescript и TailwindCSS. Этот шаблон предназначен для создания красивого сайта личного портфолио. У него есть отличный настраиваемый параметр. Полностью адаптивный и отлично смотрится на любом устройстве. Этот шаблон содержит пользовательские страницы для ваших портфолио и сообщений в блогах. Он подходит для дизайнеров, разработчиков или фрилансеров, которые хотят показать свои проекты и..
Создание макета домашней ленты Pinterest с помощью Next.JS и Tailwind CSS, но самый простой способ
Привет, ребята, сегодня мы собираемся сделать сетку Pinterest для их домашней ленты. В этом проекте мы будем использовать Next.JS и tailwind CSS с Unsplash API.
Во-первых, давайте посмотрим, что мы собираемся строить.
Вот как выглядит домашняя лента Pinterest
После проверки с помощью Chrome Devtools мы видим, что они реализовали макет, используя перевод, абсолютную позицию и т. д. для своего макета.
Но мы собираемся реализовать тот же макет гораздо проще, используя..
Как создать динамический сменщик темы с помощью React и Tailwind CSS. С помощью React useContext Hook.
В этой статье мы рассмотрим следующее:
Добавление пользовательских цветов и тем в попутный ветер. Создание приложения для реагирования, которое использует хук useContext React для хранения нашей темы. Встроенный JavaScript для динамического обновления нашей темы.
Параметры:
Вы можете клонировать мой проект здесь Tailwind Theme Changer . Вы можете следовать этому руководству, чтобы создать свой собственный.
Шаг 1. Добавьте попутный ветер в свой проект React
Сначала вам..
⚛️React.js + 🌈Градиенты = Градиенты
Руководство по созданию веб-сайта с изменяющимся градиентом фона.
Как начинающий фронтенд-разработчик, вы, возможно, ищете проект для портфолио, чтобы продемонстрировать свои навыки фронтенда. Gradientti — это простое приложение, которое делает это — вы можете просматривать цветовые градиенты CSS, создавать свои собственные, а также копировать сгенерированный код CSS.
Подробнее о приложении: Живая ссылка | Ссылка на гитхаб
Приложение Gradientti построено с использованием..
Разработайте приложение для назначения встреч с помощью React и Tailwind CSS
Часть 14. Поиск в отфильтрованном массиве
Search.js
Давайте посмотрим, как мы можем закодировать некоторые функции поиска в наш компонент. Итак, я собираюсь начать с компонента Search.js, и здесь мне нужно инициировать событие, когда кто-то что-то вводит в поле поиска.
Что я сделаю, так это создам событие onChange. И это будет иметь переменную события, которая будет создана для нас на основе того, что происходит, когда кто-то что-то вводит, и это вызовет эту функцию стрелки.
А..
Часть 9: Создание макета для навигации
Используйте TailwindCSS и Svelte, чтобы создать панель навигации, и научитесь размещать ее с помощью Figma.
См. макет здесь с файлом Figma .
Навигационные панели использовались на протяжении веков, еще до появления печатной газеты, поэтому сказать, что это важно, значит ничего не сказать. Можно сказать, что заголовок книги — это своего рода панель навигации. Вы смотрите на страницу, чтобы увидеть, где вы находитесь, но книги не дали вам ссылку, по которой можно было бы щелкнуть...
