Компоненты Контейнер Компонент-контейнер

Компонент-контейнер

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

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

HTML-код

<div class="max-w-4xl mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:shadow-xl hover:scale-105">
    <div class="flex items-center p-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
      <div class="ml-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
      </div>
    </div>
    <img src="https://picsum.photos/800/400" alt="Placeholder Image" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
    <div class="p-4">
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Engaging Title</h3>
      <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 transition duration-200 ease-in-out">Learn More</button>
    </div>
  </div>
</div>

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

Скевморфный контейнер для социальных сетей

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

Открытый

Компонент-контейнер

Минималистичный компонент-контейнер для дашборда с использованием Tailwind CSS с поддержкой темного режима.

Открытый

Компонент контейнера для электронной коммерции

Glassmorphism Компонент контейнера электронной коммерции с триадической цветовой схемой и сложной компоновкой, включая поддержку темного режима

Открытый