Компоненты Индикаторы прогресса Компонент индикаторов прогресса

Компонент индикаторов прогресса

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

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

HTML-код

<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-8 space-y-8">
  <h1 class="text-4xl font-bold mb-4 text-gray-100">Portfolio Progress Indicators</h1>
  <div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg space-y-6">
    <h2 class="text-2xl font-bold text-gray-200">Current Projects</h2>
    <div class="space-y-4">
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 1" class="rounded-full">
          <span class="text-lg font-semibold">Project Alpha</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-green-500" style="width: 60%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 2" class="rounded-full">
          <span class="text-lg font-semibold">Project Beta</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-yellow-500" style="width: 40%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 3" class="rounded-full">
          <span class="text-lg font-semibold">Project Gamma</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-red-500" style="width: 80%;"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-gray-800 rounded-lg w-full max-w-xl p-6 shadow-lg">
    <h2 class="text-2xl font-bold text-gray-200">Completed Projects</h2>
    <div class="space-y-4">
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 4" class="rounded-full">
          <span class="text-lg font-semibold">Project Delta</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-blue-500" style="width: 100%;"></div>
        </div>
      </div>
      <div class="flex justify-between items-center bg-gray-700 p-4 rounded-lg">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/50/50" alt="Project 5" class="rounded-full">
          <span class="text-lg font-semibold">Project Epsilon</span>
        </div>
        <div class="relative w-full h-4 bg-gray-600 rounded-full overflow-hidden">
          <div class="absolute top-0 left-0 h-4 bg-purple-500" style="width: 90%;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

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

Компонент «Индикаторы промышленного прогресса»

Сложный, высококонтрастный компонент индикаторов прогресса с эстетикой промышленного дизайна, подходящий для деловых/корпоративных сайтов. Имеет несколько индикаторов выполнения, подробный раздел состояния и текстуры исходных материалов, полностью адаптивный с поддержкой темного режима.

Открытый

Индикаторы прогресса в сельском хозяйстве Cyberpunk

Набор футуристических индикаторов прогресса в стиле киберпанк для сельскохозяйственного или фермерского веб-сайта с теплыми закатными тонами. Отзывчивый с поддержкой темного режима.

Открытый

Компонент «Индикаторы прогресса»

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

Открытый