Компонент Функциональные компоненты
Минималистичная функциональная составляющая приборной панели с адаптивным дизайном и поддержкой темных тем.
HTML-код
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white p-4 sm:p-6 lg:p-8">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">Total Users</h2>
<p class="text-3xl font-bold">1500</p>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">Revenue</h2>
<p class="text-3xl font-bold">$5000</p>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">Orders</h2>
<p class="text-3xl font-bold">300</p>
</div>
</div>
</div>
</div>Связанные компоненты
Карточка товара в электронной коммерции с микровзаимодействиями
Простая карточка товара для электронной коммерции с триадической цветовой гаммой и элементами микровзаимодействия для добавления в корзину и лайка, с отзывчивостью и поддержкой темного режима.
Карточка объявления о продаже недвижимости
Сложная карточка со списком недвижимости, вдохновленная бумагой и печатью, с корпоративными синими тонами, разработанная для платформ по размещению объявлений о недвижимости. Она отличается адаптивным макетом, поддержкой темного режима и множеством подробностей об объекте.
Event_Conference_Schedule
Адаптивный компонент расписания мероприятий/конференций с дизайном, вдохновленным бумагой/печатью, и цветовой палитрой зеленого леса, включая поддержку темного режима. Он имеет навигацию с вкладками для разных дней и расширяемые сведения о сеансе.