Компоненты Хронология Ретро временная шкала

Ретро временная шкала

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

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

HTML-код

<div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row">
    <div class="md:w-1/2">
      <div class="border-r-2 border-purple-500 dark:border-purple-700 pr-8">
        <div class="mb-8 text-right">
          <div class="text-sm text-gray-600 डार्क:text-gray-300">1985</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">Started Coding</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Learned my first programming language on a vintage computer.</p>
        </div>
        <div class="mb-8 text-right">
          <div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">First Website</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Launched my first personal website, very Geocities-esque.</p>
        </div>
      </div>
    </div>
    <div class="md:w-1/2 mt-8 md:mt-0">
      <div class="border-l-2 border-teal-500 dark:border-teal-700 प्ल-8">
        <div class="mb-8">
          <div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">Went Pro</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Started working as a professional web developer.</p>
        </div>
        <div class="mb-8">
          <div class="text-sm text-gray-600 dark:text-gray-300">2020</div>
          <h4 class="text-xl font-bold text-gray-800 dark:text-white">Modern Technologies</h4>
          <p class="mt-2 text-gray-700 dark:text-gray-200">Embracing modern frameworks and design trends, still with a nod to the classics.</p>
        </div>
      </div>
    </div>
  </div>
</div>

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

Компонент временной шкалы

Минималистичный компонент временной шкалы с плоским дизайном для демонстрации работ или продуктов в портфолио с яркими цветами и поддержкой темных тем.

Открытый

Компонент временной шкалы

Простой адаптивный компонент временной шкалы, выполненный в скевоморфном стиле с цветовой гаммой в оттенках серого, подходит для бизнес/корпоративных сайтов. Он имеет поддержку темной темы и использует Tailwind CSS для стилизации.

Открытый

Компонент временной шкалы

Адаптивный компонент временной шкалы со скевоморфным дизайном, аналогичная цветовая схема, умеренная сложность для блогов/контентных сайтов с поддержкой темной темы. JavaScript не нужен, использует Tailwind CSS с поддержкой темного режима. Используются изображения с picsum.photos и аватарки с randomuser.me.

Открытый