Компонент временной шкалы
Компонент временной шкалы Minimalist/Flat Design для демонстрации работ или продуктов в портфолио, разработанный с поддержкой отзывчивости и темного режима с использованием Tailwind CSS.
HTML-код
<div class="bg-gray-100 dark:bg-gray-900 p-6">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">My Portfolio Timeline</h2>
<div class="relative">
<div class="flex flex-col">
<!-- Timeline Item 1 -->
<div class="flex items-center mb-8">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
<div class="mt-2">
<img src="https://picsum.photos/200/100" alt="Project Image" class="rounded-lg shadow-md">
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="flex items-center mb-8">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
<div class="mt-2">
<img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-lg shadow-md">
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="flex items-center mb-8">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
<div class="mt-2">
<img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-lg shadow-md">
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="flex items-center mb-8">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
<div class="mt-2">
<img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="rounded-lg shadow-md">
</div>
</div>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент временной шкалы
Адаптивный компонент временной шкалы со скевоморфным дизайном, аналогичная цветовая схема, умеренная сложность для блогов/контентных сайтов с поддержкой темной темы. JavaScript не нужен, использует Tailwind CSS с поддержкой темного режима. Используются изображения с picsum.photos и аватарки с randomuser.me.
Ретро/винтажная история компании
Отзывчивый компонент временной шкалы в стиле ретро/винтаж с поддержкой темного режима для бизнес/корпоративных веб-сайтов
Компонент временной шкалы
Отзывчивый компонент временной шкалы для панелей мониторинга, с микровзаимодействиями и пастельной цветовой схемой, с поддержкой темных тем. Он использует Tailwind CSS для стилизации и включает в себя изображения-заполнители из picsum.photos и аватары из randomuser.me.