Компонент "Колонны"

Адаптивные столбцы в оттенках серого в 3D для страницы портфолио с поддержкой темного режима.

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

HTML-код

<section class="py-10 dark:bg-gray-900">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 1</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project one, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 2</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project two, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 3</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project three, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
    </div>
  </div>
</section>

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

Компонент "Колонны"

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

Открытый

Компонентный нейроморфизм столбцов

Столбцы Компонентный Неморфизм - Мягкий стиль пользовательского интерфейса, который создает элементы, выступающие из фона с помощью тонких теней. Этот компонент является адаптивным и имеет поддержку темных тем. Код JavaScript не нужен. Для темного режима достаточно поддержки CSS.

Открытый

Компонент "Колонны"

Отзывчивый компонент колонн, выполненный в стиле ретро/винтаж, поддерживающий как светлую, так и темную темы. Содержит изображения-заполнители и аватары из picsum.photos и randomuser.me соответственно.

Открытый