Все компоненты

Компонент корзины покупок

Отзывчивая корзина покупок, выполненная в стиле брутализм, отличающаяся высокой контрастностью и необычной компоновкой. Он поддерживает темную тему с Tailwind CSS.

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

                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex justify-between items-center mt-4">
            <h4 class="text-xl font-bold text-gray-800 dark:text-white">Total:</h4>
            <p class="text-xl font-bold text-gray-800 dark:text-white">$79.98</p>
        </div>
        <button class="w-full mt-4 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition duration-200">Checkout</button>
    </div>
    <div class="flex items-center justify-center mt-4">
        <p class="text-gray-600 dark:text-gray-300 text-sm">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
    </div>
</div>

Адаптивный компонент таблицы данных, стилизованный в стиле ретро/винтаж 80-х/90-х годов с использованием Tailwind CSS. Он отличается блочным дизайном, яркими цветовыми акцентами (фиолетовый/оранжевый в светлом режиме, зеленый/неоновый в темном режиме) и моноширинным шрифтом для ностальгического ощущения техники. Таблица включает в себя различные стили заголовков и строк, элементы с рамками, такие как аватары и значки статуса, а также поддерживает темный режим через CSS. К данным заполнителей относятся аватары пользователей, контактная информация, значки статуса, роли и даты присоединения. Таблица прокручивается горизонтально на небольших экранах для лучшей отзывчивости.

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

                <!-- Component Start -->
<div class="font-mono bg-orange-100 dark:bg-gray-900 p-4 sm:p-8 rounded-none border-4 border-purple-600 dark:border-green-400 shadow-xl">
  <h2 class="text-3xl sm:text-4xl font-bold text-purple-700 dark:text-yellow-300 mb-6 text-center uppercase tracking-wider">
    User Archives ~ System Log
  </h2>
  <div class="overflow-x-auto rounded-none border-2 border-purple-500 dark:border-green-500">
    <table class="min-w-full w-full">
      <thead class="bg-purple-500 dark:bg-green-500 text-sm uppercase">
        <tr>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            User Profile
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            Contact_Info
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            Status_Signal
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            Assigned_Role
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest text-left">
            Join_Date
          </th>
        </tr>
      </thead>
      <tbody class="bg-orange-50 dark:bg-gray-800 divide-y-2 divide-purple-300 dark:divide-green-700">
        <!-- Row 1 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar Max Power">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Max Power</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 101</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Online</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-green-200 text-green-800 dark:bg-green-600 dark:text-green-100 border-2 border-green-500 dark:border-green-300">
              ACTIVE
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            Net Runner
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1985-04-12
          </td>
        </tr>
        <!-- Row 2 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/women/47.jpg" alt="User Avatar Glitch Martin">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Glitch Martin</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 202</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Offline</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-red-200 text-red-800 dark:bg-red-600 dark:text-red-100 border-2 border-red-500 dark:border-red-300">
              INACTIVE
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            Code Weaver
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1991-11-20
          </td>
        </tr>
        <!-- Row 3 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/men/62.jpg" alt="User Avatar Rex Viper">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Rex "Viper" Fury</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 303</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Online</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-yellow-200 text-yellow-800 dark:bg-yellow-600 dark:text-yellow-100 border-2 border-yellow-500 dark:border-yellow-300">
              PENDING_VERIFICATION
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            System Admin
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1988-07-07
          </td>
        </tr>
        <!-- Row 4 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/women/75.jpg" alt="User Avatar Zara Byte">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Zara Byte</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 404</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Idle</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 border-2 border-gray-500 dark:border-gray-400">
              SUSPENDED
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            Data Analyst
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1995-01-23
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="mt-6 text-center text-xs text-purple-700 dark:text-green-400">
    SYSTEM ONLINE | ALL RECORDS CURRENT | END OF TRANSMISSION
  </div>
</div>
<!-- Component End -->

Окно поиска по дизайну материалов

Компонент Search Box, вдохновленный принципами Material Design, созданный с использованием Tailwind CSS. Он отличается отзывчивым поведением, адаптирующимся к ширине контейнера, визуальной обратной связью с помощью переходов теней при наведении и фокусе (эффекты глубины), а также полной поддержкой темных тем. Компонент включает в себя ведущий значок поиска и обеспечивает чистую современную эстетику. Реализация только CSS. Идеально подходит для встраивания в различные макеты благодаря своей природе «w-full». Для обеспечения специальных возможностей убедитесь, что элемент 'input' соединен с соответствующим '<label>' или предоставьте описательный 'aria-label'.

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

                <!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
  <div class="pl-4 pr-2 py-3">
    <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input
    type="search"
    name="search_query"
    id="material_search_box_input"
    placeholder="Search..."
    aria-label="Search"
    class="
      appearance-none
      w-full h-12
      pl-0 pr-4 py-3
      text-base text-gray-900 dark:text-gray-100
      bg-transparent
      focus:outline-none
      placeholder-gray-500 dark:placeholder-gray-400
    "
  />
</div>
<!-- Component End -->

Компонент стекломорфной среды

Адаптивный компонент медиакарты с дизайном стекломорфизма (эффект матового стекла), созданный с помощью Tailwind CSS. Содержит заполнитель изображения (из picsum.photos) со значком воспроизведения при наведении, текстовым контентом, авторским разделом с аватаром (из randomuser.me) и кнопками действий. Компонент поддерживает темный режим с использованием вариантов Tailwind CSS 'dark:' и реагирует на различные размеры экрана. JavaScript не требуется. Для оптимального визуального эффекта разместите этот компонент на контрастном фоне. Функциональность темного режима предполагает соответствующую конфигурацию CSS Tailwind (например, 'darkMode: "class"' в вашем tailwind.config.js).

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

                <div class="w-full max-w-md md:max-w-lg lg:max-w-xl overflow-hidden rounded-2xl shadow-2xl bg-white/30 dark:bg-slate-800/30 backdrop-blur-xl border border-white/20 dark:border-slate-700/20 font-sans">
  <!-- Image -->
  <div class="relative">
    <img class="w-full h-56 sm:h-64 object-cover" src="https://picsum.photos/seed/mediacomp/800/600" alt="Media placeholder image">
    <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
      <svg class="w-16 h-16 text-white/80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
    </div>
  </div>

  <!-- Content Area -->
  <div class="p-5 sm:p-6">
    <h2 class="text-2xl sm:text-3xl font-bold text-slate-800 dark:text-white mb-2">
      Glassmorphic Media Showcase
    </h2>
    <p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-4">
      Discover the elegance of glassmorphism. This component blends translucent effects with content, offering a modern UI experience that is both responsive and dark-mode ready.
    </p>

    <!-- Author/Meta Info -->
    <div class="flex items-center space-x-3 mt-4">
      <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white/50 dark:border-slate-700/50 shadow-md" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Author Avatar">
      <div>
        <p class="text-sm sm:text-base font-semibold text-slate-700 dark:text-slate-200">Alexia Glass</p>
        <p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400">Content Creator | 3 hours ago</p>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="mt-6 flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0">
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-indigo-600 hover:bg-indigo-700 text-white 
                     dark:bg-indigo-500 dark:hover:bg-indigo-600 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        View Details
      </button>
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-white/50 hover:bg-white/70 text-slate-700 
                     dark:bg-slate-700/50 dark:hover:bg-slate-700/70 dark:text-slate-200 
                     border border-white/60 dark:border-slate-600/60 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        Bookmark
      </button>
    </div>
  </div>
</div>

Компонент скевоморфной навигации

Скевоморфный компонент навигации, разработанный для имитации реальных элементов, таких как физическая панель управления или приборная панель. Отличается адаптивным дизайном, эффектами наведения, имитирующими нажатие физических кнопок, и поддержкой темных тем. Навигация включает в себя тонкие тени, градиенты и текстуры для создания 3D-тактильного вида, напоминающего физические интерфейсы.

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

                <!-- Skeuomorphic Navigation Component with Dark Mode Support -->
<nav class="w-full bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 p-2 transition-all duration-300">
  <!-- Container for the nav items -->
  <div class="flex flex-col md:flex-row items-center justify-between">
    
    <!-- Logo Area - Mimicking a metal plate with engraved logo -->
    <div class="flex items-center p-2 bg-gradient-to-r from-gray-300 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600 m-2">
      <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center shadow-lg border-2 border-gray-300 dark:border-gray-700">
        <span class="text-white font-bold text-xl">S</span>
      </div>
      <span class="ml-3 font-bold text-gray-700 dark:text-gray-200 tracking-wider text-shadow">SKEUOUI</span>
    </div>
    
    <!-- Navigation buttons - Mimicking physical buttons -->
    <div class="flex flex-wrap justify-center md:justify-end">
      <!-- Home Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          Home
        </button>
        <div class="h-1 w-full bg-blue-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Products Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          Products
        </button>
        <div class="h-1 w-full bg-green-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Services Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          Services
        </button>
        <div class="h-1 w-full bg-purple-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
    </div>
    
    <!-- User Profile - Mimicking an ID badge -->
    <div class="m-2 flex items-center bg-gradient-to-r from-blue-100 to-blue-50 dark:from-blue-900 dark:to-blue-800 p-2 rounded-lg border border-blue-200 dark:border-blue-700 shadow">
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="User" class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-600">
        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
      </div>
      <div class="ml-2">
        <div class="text-sm font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
        <div class="text-xs text-gray-600 dark:text-gray-400">Admin Panel</div>
      </div>
    </div>
  </div>
  
  <!-- Mobile Menu Toggle Button - Styled as a switch -->
  <div class="md:hidden mt-2 flex justify-center">
    <div class="relative w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner border border-gray-400 dark:border-gray-600 flex items-center p-1 cursor-pointer">
      <div class="absolute left-1 w-6 h-6 bg-gradient-to-br from-white to-gray-200 dark:from-gray-600 dark:to-gray-800 rounded-full shadow transform transition-transform border border-gray-300 dark:border-gray-500"></div>
      <div class="w-full flex justify-between text-xs px-1 font-bold">
        <span class="text-gray-700 dark:text-gray-300">|</span>
        <span class="text-gray-700 dark:text-gray-300">|</span>
      </div>
    </div>
  </div>
</nav>

Компонент списка желаний

Адаптивный компонент списка желаний со стилем дизайна Glassmorphism с использованием Tailwind CSS, поддерживающий темный режим с эффектами матового стекла и случайными изображениями-заполнителями.

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

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 w-11/12 max-w-md">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-4">My Wishlist</h2>
        <ul class="space-y-4">
            <li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
                <div class="flex-grow mx-4">
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
                <div class="flex-grow mx-4">
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
                <img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
                <div class="flex-grow mx-4">
                    <h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

Компонент заголовка

Отзывчивый компонент заголовка с ретро/винтажным дизайном, с поддержкой темной темы и ностальгической эстетикой 80-х/90-х годов.

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

                <header class="bg-gray-800 text-white p-5 shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <h1 class="ml-3 text-lg font-bold">Retro Header</h1>
        </div>
        <nav class="hidden md:flex space-x-4">
            <a href="#" class="text-lg hover:text-gray-400">Home</a>
            <a href="#" class="text-lg hover:text-gray-400">About</a>
            <a href="#" class="text-lg hover:text-gray-400">Services</a>
            <a href="#" class="text-lg hover:text-gray-400">Contact</a>
        </nav>
        <button class="md:hidden focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>
        </button>
    </div>
    <div class="mt-4 text-center">
        <img class="mx-auto rounded-lg shadow-lg" src="https://picsum.photos/400/200?random=1" alt="Random Placeholder">
        <p class="mt-2 text-sm text-gray-400">A touch of nostalgia from the 80s/90s.</p>
    </div>
</header>
<style>
@media (prefers-color-scheme: dark) {
    header {
        background-color: #1c1c1c;
    }
    a {
        color: #cbd5e1;
    }
    a:hover {
        color: #f3f4f6;
    }
}
</style>

Компонент «Оглавление»

Адаптивный компонент Table of Contents, выполненный в стиле пользовательского интерфейса Dark Mode, с разделами, заголовками, описаниями и случайными изображениями/аватарами.

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

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
    <ul class="space-y-3">
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 1</h3>
            <p class="text-gray-400">Description of Section 1</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 2</h3>
            <p class="text-gray-400">Description of Section 2</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="mt-2 rounded" />
        </li>
        <li class="hover:bg-gray-800 rounded p-2 transition duration-300">
            <h3 class="font-semibold">Section 3</h3>
            <p class="text-gray-400">Description of Section 3</p>
            <img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="mt-2 rounded" />
        </li>
    </ul>
    <div class="mt-5 border-t border-gray-700 pt-4">
        <h4 class="font-semibold">Author</h4>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
            <span class="text-gray-400">John Doe</span>
        </div>
    </div>
</div>

Компонент кнопок "Нравится/Реакция"

Компонент кнопок 3D-дизайна «Нравится»/«Реакция» с использованием Tailwind CSS с поддержкой темной темы и отзывчивыми эффектами.

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

                <div class="flex justify-center items-center space-x-4 p-8 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-blue-500 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">Like</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" /> 
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-pink-500 rounded hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-500">Love</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-yellow-500 rounded hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-500">Wow</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-green-500 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500">Haha</button>
    </div>
</div>

Компонент отображения содержимого

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

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

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <div class="p-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
        <p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
        <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
    </div>
</div>

Категории

Компонент корзины покупок

Ретро-сетка данных

Окно поиска по дизайну материалов

Компонент стекломорфной среды

Компонент скевоморфной навигации

Компонент списка желаний

Компонент заголовка

Компонент «Оглавление»

Компонент кнопок "Нравится/Реакция"

Компонент отображения содержимого