구성 요소 타임라인 Brutalist_Sepia_Timeline_Documentation
Brutalist_Sepia_Timeline_Documentation

문서 또는 위키 사이트를 위한 복잡하고 잔인한 스타일의 타임라인 구성 요소로, 세피아/갈색 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다. 높은 대비와 생생한 미학으로 설계되었습니다.
미리 보기

HTML 코드

<div class="p-4 sm:p-8 md:p-12 min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 font-mono">

  <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-8 sm:mb-12 text-stone-900 dark:text-stone-100 uppercase tracking-tighter border-b-4 border-stone-900 dark:border-stone-100 pb-2">
    Project Chronology <span class="text-stone-600 dark:text-stone-400">// V-0.1</span>
  </h1>

  <div class="max-w-6xl mx-auto relative">

    <!-- Vertical Line -->
    <div class="absolute left-4 sm:left-1/2 -ml-0.5 w-1 h-full bg-stone-500 dark:bg-stone-600 border border-stone-900 dark:border-stone-100 transform -translate-x-1/2"></div>

    <!-- Timeline Item 1 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item">
      <div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">System Architecture Draft</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Initial conceptualization of modular components and data flow. Focus on redundancy and fault tolerance.</p>
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Version 1.0.0 Alpha</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">12, JAN 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Dr. A. Smith</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 2 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full left-aligned-item">
      <div class="order-1 sm:order-1 sm:w-1/2 flex justify-start sm:justify-start pl-4 sm:pl-8 md:pl-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Core Module Prototyping</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Development begins on critical path components, including secure data handling and authentication layers.</p>
          <img src="https://picsum.photos/400/250?random=1" alt="Prototyping" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 mb-3 grayscale mix-blend-multiply dark:mix-blend-normal">
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Hotfix Branch 3.1</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">05, APR 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">J. Rodriguez</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 3 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item">
      <div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Security Audit & Remediation</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Comprehensive third-party security assessment. Identified and patched critical vulnerabilities.</p>
          <ul class="list-disc list-inside text-sm mb-3 text-stone-700 dark:text-stone-300">
              <li>CVE-2023-1234 patched.</li>
              <li>Cross-site scripting mitigation implemented.</li>
              <li>Access control list hardening applied.</li>
          </ul>
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Audit Report v2.1</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">20, JUN 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/29.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Cyb. Sec. Team</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 4 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full left-aligned-item">
      <div class="order-1 sm:order-1 sm:w-1/2 flex justify-start sm:justify-start pl-4 sm:pl-8 md:pl-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Beta Launch & Feedback</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Limited release to internal testers and key partners. Initial user feedback gathered and analyzed.</p>
          <div class="grid grid-cols-2 gap-2 mb-3">
            <img src="https://picsum.photos/200/150?random=2" alt="Beta Testing 1" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 grayscale mix-blend-multiply dark:mix-blend-normal">
            <img src="https://picsum.photos/200/150?random=3" alt="Beta Testing 2" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 grayscale mix-blend-multiply dark:mix-blend-normal">
          </div>
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Build 2023.Q3.BETA</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">01, SEP 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Team Lead</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 5 (Future Milestone - visual distinction) -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item opacity-70 cursor-not-allowed">
      <div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-300 dark:bg-stone-700 p-4 sm:p-6 border-4 border-stone-600 dark:border-stone-400 border-dashed shadow-[4px_4px_0_0_rgba(0,0,0,0.5)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.1)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-700 dark:text-stone-300 uppercase pb-1 border-b-2 border-stone-400 dark:border-stone-500">Public Release Candidate</h3>
          <p class="mb-3 text-stone-600 dark:text-stone-400">Preparation for wider audience release. Final checks and documentation updates.</p>
          <div class="text-sm text-stone-500 dark:text-stone-500 flex items-center justify-between">
            <span>ETA: Full Launch</span>
            <span class="font-bold text-stone-700 dark:text-stone-300">Q4, 2023+</span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-600 dark:bg-stone-400 border-4 border-stone-300 dark:border-stone-700 z-10 hidden sm:block"></div>
    </div>

  </div>

</div>
Brutalist_Sepia_Timeline_Documentation

미리 보기

HTML 코드

관련 구성 요소

타임라인 구성 요소

소셜 미디어 타임라인 구성 요소

레트로/빈티지 타임라인 컴포넌트
