Компонент временной шкалы
Адаптивный компонент временной шкалы, разработанный в стиле брутализма с использованием Tailwind CSS, поддерживает темную тему и имеет замещающие изображения и аватары.
HTML-код
<div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
<h1 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">Timeline</h1>
<div class="border-l-4 border-gray-300 dark:border-gray-700">
<div class="mb-12 ml-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md">
<span class="text-sm font-bold text-gray-800 dark:text-white ml-3">John Doe</span>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder" class="rounded-lg mt-2">
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">2023-10-01</span>
</div>
<div class="mb-12 ml-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md">
<span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Jane Smith</span>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<p class="text-gray-700 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="https://picsum.photos/200/100?random=2" alt="Placeholder" class="rounded-lg mt-2">
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">2023-10-05</span>
</div>
<div class="mb-12 ml-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md">
<span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Alice Johnson</span>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<img src="https://picsum.photos/200/100?random=3" alt="Placeholder" class="rounded-lg mt-2">
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">2023-10-10</span>
</div>
</div>
</div>Связанные компоненты
Компонент временной шкалы
Адаптивный компонент временной шкалы с дизайном Glassmorphism, дополнительной цветовой схемой и поддержкой темных тем, подходящий для бизнес-сайтов. Он оснащен полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия.
Компонент временной шкалы
Адаптивный компонент временной шкалы со стилем 3D-дизайна, использующий монохроматическую цветовую схему, предназначенный для демонстрации работ или продуктов в портфолио. Он включает в себя множество интерактивных элементов и поддерживает темную тему.
Компонент временной шкалы
Простой адаптивный компонент временной шкалы, выполненный в скевоморфном стиле с цветовой гаммой в оттенках серого, подходит для бизнес/корпоративных сайтов. Он имеет поддержку темной темы и использует Tailwind CSS для стилизации.