Обзор компонентов ценообразования Tailwind

Статья о том, как создать хороший компонент ценообразования для сайта.

Мы рассмотрим несколько примеров из более чем 78 (!) различных версий компонентов ценообразования для Tailwind CSS, доступных в библиотеках Shuffle Editor.

Вертикальное и горизонтальное разделение в компоненте ценообразования

Zospace UI от Shuffle — вертикальное разделение с четким предложением, какой пакет выбрать. Выделение одного из планов в наглядной форме — обычное требование при создании прайс-листа.

В данном случае это сделано не с помощью текста, а четко передано визуально. Невозможно не обратить внимание на средний план.

Однако иногда текста и характеристик не так много, чтобы стоило делать колонки. Тогда варианты можно расположить горизонтально, оставив больше места для цены. Второй (из пяти) вариант цены в библиотеке Zospace UI by Shuffle.

Посмотрите все Zospace UI в нашей галерее компонентов Tailwind с кодом, готовым к копированию* и использованию в вашем проекте. Вы можете посмотреть бесплатные примеры кода, не регистрируясь. При копировании обратите внимание, что вам, вероятно, придется использовать наш редактор для получения конфигурационных файлов и графических активов для компонентов.

Использование иконок в дизайне компонентов ценообразования

Все становится немного сложнее, когда планов становится больше.

Здесь Uinel UI by Shuffle ловко включает в себя 4 возможных плана на выбор, дополнительно давая каждому из них иконку. Это облегчает инстинктивное восприятие разницы между ними.

Это один из 6 вариантов ценообразования в этой библиотеке. Ознакомьтесь со всеми из них здесь: Uinel UI

Добавьте переключатель, когда вам нужно больше опций на одном экране

Flex — это удивительная библиотека, которая имеет ошеломляющее количество стилистических вариаций.

Ниже представлен один из 8 основных компонентов ценообразования. Каждый из этих восьми имеет 5 вариантов стиля.

Здесь также есть кнопка montly/annualy, которая позволяет смешивать тип оплаты.

Выделите CTA с помощью цветов

Pstls UI работает с нежными пастельными тонами, что позволяет использовать черный цвет в качестве привлекающего внимание.

Это позволяет ему выступать и в качестве CTA, и для выделения ключевого компонента.

Предпочтительный вариант подсветки

Жирный пользовательский интерфейс заслуживает своего названия. Экстравагантность шрифта, подсветка и тонкие линии, разделяющие планы, позволяют создать по-настоящему необычный сайт.

Это делает его идеальным для нестандартных проектов, которые хотят выделиться.

Начните с базового дизайна и добавьте свой собственный стиль

Plain UI — это библиотека, которая позволяет задать свой собственный стиль.

Поэтому ее компоненты имеют минималистичный вид и нейтральные цвета.

Таким образом, вы можете легко придать им характер, не борясь с замыслом дизайнера.

Это лишь несколько избранных примеров. Посмотрите на 2700+ компонентов для Tailwind CSS в редакторе Shuffle. Каждый из них имеет сотни подходящих компонентов, которые позволят вам создать красивый сайт за считанные минуты.

При желании вы также можете найти примеры наших дизайнов в различных фреймворках. У нас есть Bootstrap Components, Bulma Components и Material-UI Components, доступные как в галерее, так и в визуальном редакторе.