Компоненты Функциональные компоненты Компонент Функциональные компоненты

Компонент Функциональные компоненты

Функциональная составляющая для E-commerce с адаптивным дизайном и поддержкой темных тем.

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

HTML-код

<div class="bg-gray-100 dark:bg-gray-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Связанные компоненты

Функциональная составляющая блога

Функциональные компоненты Компонент с 3D дизайном, Комплементарная цветовая гамма, умеренная сложность для блогов, адаптивный с поддержкой темных тем. Никакого JS, только HTML и Tailwind.

Открытый

Компонент документации в стиле ар-деко фиолетовый

Документация/вики-компонент умеренной сложности с темой дизайна в стиле ар-деко, с геометрическими узорами и роскошным стилем с использованием фиолетового/фиолетового цветового спектра. Полностью адаптивный с поддержкой темного режима.

Открытый

Event_Conference_Schedule

Адаптивный компонент расписания мероприятий/конференций с дизайном, вдохновленным бумагой/печатью, и цветовой палитрой зеленого леса, включая поддержку темного режима. Он имеет навигацию с вкладками для разных дней и расширяемые сведения о сеансе.

Открытый