Neon_Glow_Timeline_Agriculture
네온/글로우 효과와 보석 톤이 있는 복잡하고 반응이 빠른 타임라인 구성 요소로, 농업/농업 웹사이트에 맞게 조정되었습니다. 풍부한 시각적 요소와 다크 모드 지원이 특징입니다.
HTML 코드
<div class="font-sans antialiased text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-50 py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-16 relative
text-emerald-500 dark:text-emerald-400
after:content-[''] after:absolute after:bottom-[-8px] after:left-1/2 after:-translate-x-1/2 after:w-24 after:h-1.5
after:rounded-full after:bg-emerald-500 after:shadow-glow-emerald
transition-colors duration-300">
Harvesting Milestones
</h2>
<div class="relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:ml-[unset] md:before:translate-x-0
before:h-full before:w-px before:bg-emerald-300 before:dark:bg-emerald-700 before:shadow-timeline-emerald
md:before:mx-auto md:before:left-auto md:before:right-auto md:before:w-0.5
dark:text-gray-100">
<!-- Timeline Item 1 -->
<div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse mb-12">
<div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
<div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
<p class="font-semibold text-sapphire-600 dark:text-sapphire-300">Q1 2023</p>
<p class="text-gray-500 dark:text-gray-400">Jan - Mar</p>
</div>
<div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg
shadow-emerald-200/50 dark:shadow-emerald-900/50
hover:shadow-emerald-400/70 hover:dark:shadow-emerald-700/70
transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-600
relative
before:absolute before:w-4 before:h-4 before:bg-emerald-500 before:shadow-glow-emerald before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden
after:absolute after:hidden md:after:block after:w-0 after:h-0
after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent
md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
group-hover:scale-[1.01] group-hover:z-10">
<h3 class="text-xl font-bold text-emerald-600 dark:text-emerald-400 mb-2
relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-emerald-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
Soil Preparation & Planting</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
Successfully completed soil analysis, enrichment, and initial planting of drought-resistant corn varieties across 500 acres. Leveraged smart irrigation systems to optimize water usage.
</p>
<div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.664 12H2A1 1 0 001 13v3a1 1 0 001 1h7.664a1 1 0 00-.664.236l-3.332 3.332a.5.5 0 00.354.854h6.664a.5.5 0 00.354-.854L10 12.236A1 1 0 009.664 12zM12 8V2A1 1 0 0011 1H4a1 1 0 00-1 1v6a1 1 0 001 1h7a1 1 0 001-1z" clip-rule="evenodd"></path></svg> 500 acres</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 002 14v3a1 1 0 001 1h14a1 1 0 001-1v-3a1 1 0 00-.293-.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 1 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg> Smart Irrigation</span>
</div>
<img class="w-full h-32 object-cover rounded mt-4 border border-emerald-300 dark:border-emerald-700 shadow-md" src="https://picsum.photos/400/250?random=1" alt="Soil Preparation">
</div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
</div>
<!-- Timeline Item 2 -->
<div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse mb-12">
<div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
<div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
<p class="font-semibold text-ruby-600 dark:text-ruby-300">Q2 2023</p>
<p class="text-gray-500 dark:text-gray-400">Apr - Jun</p>
</div>
<div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg
shadow-ruby-200/50 dark:shadow-ruby-900/50
hover:shadow-ruby-400/70 hover:dark:shadow-ruby-700/70
transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
border-2 border-transparent hover:border-ruby-500 dark:hover:border-ruby-600
relative
before:absolute before:w-4 before:h-4 before:bg-ruby-500 before:shadow-glow-ruby before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden
after:absolute after:hidden md:after:block after:w-0 after:h-0
after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent
md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
group-hover:scale-[1.01] group-hover:z-10">
<h3 class="text-xl font-bold text-ruby-600 dark:text-ruby-400 mb-2
relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-ruby-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
Growth Monitoring & Pest Control</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
Implemented drone surveillance for crop health monitoring. Successfully mitigated a localized pest outbreak through organic treatments, ensuring minimal crop damage.
</p>
<div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-ruby-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg> Drone Surveillance</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-ruby-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M.93 2.25c-.244-.249-.074-.5.251-.5h18.298c.325 0 .495.251.251.5L12 9.27L9.932 7.21C9.658 6.937 9.191 6.937 8.917 7.21L.93 2.25zM2.872 3.128l7.07 7.07c.273.273.74.273 1.013 0l7.07-7.07L18.4 4c.244.249.074.5-.251.5h-18.298c-.325 0-.495-.251-.251-.5L2.872 3.128z" clip-rule="evenodd" /></svg> Organic Control</span>
</div>
<img class="w-full h-32 object-cover rounded mt-4 border border-ruby-300 dark:border-ruby-700 shadow-md" src="https://picsum.photos/400/250?random=2" alt="Crop Growth Monitoring">
</div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
</div>
<!-- Timeline Item 3 -->
<div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse mb-12">
<div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
<div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
<p class="font-semibold text-emerald-600 dark:text-emerald-300">Q3 2023</p>
<p class="text-gray-500 dark:text-gray-400">Jul - Sep</p>
</div>
<div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg
shadow-emerald-200/50 dark:shadow-emerald-900/50
hover:shadow-emerald-400/70 hover:dark:shadow-emerald-700/70
transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-600
relative
before:absolute before:w-4 before:h-4 before:bg-emerald-500 before:shadow-glow-emerald before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden
after:absolute after:hidden md:after:block after:w-0 after:h-0
after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent
md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
group-hover:scale-[1.01] group-hover:z-10">
<h3 class="text-xl font-bold text-emerald-600 dark:text-emerald-400 mb-2
relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-emerald-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
Harvest & Yield Optimization</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
Achieved record yields for corn crops, exceeding projections by 15%. Utilized predictive analytics to optimize harvest timing and reduce post-harvest losses.
</p>
<div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M8.433 7.82c.071-.05.13-.11.18-.17l.797-.97.234-.285a.75.75 0 011.085-.145l2.456 2.06c.21.176.326.435.326.702v7.24a.75.75 0 01-.75.75h-3.352c-.52 0-2.3-1.07-2.3-1.07l-.76-.796a.75.75 0 01-.137-.996L8.433 7.82z" clip-rule="evenodd"></path></svg> 15% Over Projection</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.162A9.776 9.776 0 0112 11c1.545 0 3.067.14 4.535.462 2.378.508 3.322 1.83 3.425 2.126.1.296.068.513-.08.684a.75.75 0 01-.58.268H.705a.75.75 0 01-.58-.268c-.148-.171-.18-.388-.08-.684.103-.296 1.047-1.618 3.425-2.126z"></path></svg> AI Analytics</span>
</div>
<img class="w-full h-32 object-cover rounded mt-4 border border-emerald-300 dark:border-emerald-700 shadow-md" src="https://picsum.photos/400/250?random=3" alt="Modern Farming Tools">
</div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
</div>
<!-- Timeline Item 4 -->
<div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
<div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
<div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
<p class="font-semibold text-sapphire-600 dark:text-sapphire-300">Q4 2023</p>
<p class="text-gray-500 dark:text-gray-400">Oct - Dec</p>
</div>
<div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg
shadow-sapphire-200/50 dark:shadow-sapphire-900/50
hover:shadow-sapphire-400/70 hover:dark:shadow-sapphire-700/70
transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
border-2 border-transparent hover:border-sapphire-500 dark:hover:border-sapphire-600
relative
before:absolute before:w-4 before:h-4 before:bg-sapphire-500 before:shadow-glow-sapphire before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden
after:absolute after:hidden md:after:block after:w-0 after:h-0
after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent
md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
group-hover:scale-[1.01] group-hover:z-10">
<h3 class="text-xl font-bold text-sapphire-600 dark:text-sapphire-400 mb-2
relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-sapphire-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
Post-Harvest & Soil Regeneration</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
Successful implementation of cover cropping and natural composting to regenerate soil health for next season. Engaged with local university for research on sustainable practices.
</p>
<div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-sapphire-500" fill="currentColor" viewBox="0 0 20 20"><path d="M12 2H8a.5.5 0 00-.5.5v2.879l-1.379-1.379a.5.5 0 00-.707.707l2 2a.5.5 0 00.707 0l2-2a.5.5 0 00-.707-.707L8.5 5.379V2.5A.5.5 0 008 2h4zM16 8h-3V7a1 1 0 00-1-1h-4a1 1 0 00-1 1v1H4a2 2 0 00-2 2v6a2 2 0 002 2h12a2 2 0 002-2v-6a2 2 0 00-2-2zm-3 8H6v-3a1 1 0 011-1h6a1 1 0 011 1v3z" clip-rule="evenodd"></path></svg> Soil Regeneration</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1 text-sapphire-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.162A9.776 9.776 0 0112 11c1.545 0 3.067.14 4.535.462 2.378.508 3.322 1.83 3.425 2.126.1.296.068.513-.08.684a.75.75 0 01-.58.268H.705a.75.75 0 01-.58-.268c-.148-.171-.18-.388-.08-.684.103-.296 1.047-1.618 3.425-2.126z"></path></svg> Research Partner</span>
</div>
<img class="w-full h-32 object-cover rounded mt-4 border border-sapphire-300 dark:border-sapphire-700 shadow-md" src="https://picsum.photos/400/250?random=4" alt="Soil Regeneration">
</div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
</div>
</div>
</div>
</div>
<style>
/* Custom glow effect utility classes */
.shadow-glow-emerald {
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6), 0 0 16px rgba(16, 185, 129, 0.4),
0 0 24px rgba(16, 185, 129, 0.2);
}
.dark .shadow-glow-emerald {
box-shadow: 0 0 8px rgba(52, 211, 153, 0.6), 0 0 16px rgba(52, 211, 153, 0.4),
0 0 24px rgba(52, 211, 153, 0.2);
}
.shadow-glow-sapphire {
box-shadow: 0 0 8px rgba(37, 99, 235, 0.6), 0 0 16px rgba(37, 99, 235, 0.4),
0 0 24px rgba(37, 99, 235, 0.2);
}
.dark .shadow-glow-sapphire {
box-shadow: 0 0 8px rgba(96, 165, 250, 0.6), 0 0 16px rgba(96, 165, 250, 0.4),
0 0 24px rgba(96, 165, 250, 0.2);
}
.shadow-glow-ruby {
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), 0 0 16px rgba(239, 68, 68, 0.4),
0 0 24px rgba(239, 68, 68, 0.2);
}
.dark .shadow-glow-ruby {
box-shadow: 0 0 8px rgba(252, 165, 165, 0.6), 0 0 16px rgba(252, 165, 165, 0.4),
0 0 24px rgba(252, 165, 165, 0.2);
}
.shadow-timeline-emerald {
box-shadow: 0 0 4px rgba(16, 185, 129, 0.5), 0 0 8px rgba(16, 185, 129, 0.3);
}
.dark .shadow-timeline-emerald {
box-shadow: 0 0 4px rgba(52, 211, 153, 0.5), 0 0 8px rgba(52, 211, 153, 0.3);
}
/* Custom utility classes for Jewel Tones */
.text-emerald-500 { color: #10B981; } /* Base Emerald */
.dark .text-emerald-400 { color: #34D399; } /* Dark Mode Emerald */
.text-emerald-600 { color: #059669; } /* Darker Emerald */
.dark .text-emerald-300 { color: #6EE7B7; } /* Lighter Emerald for dark text */
.border-emerald-300 { border-color: #6EE7B7; } /* Light Emerald for borders */
.dark .border-emerald-700 { border-color: #047857; } /* Dark Emerald for borders */
.text-sapphire-500 { color: #3B82F6; } /* Base Sapphire (Blue) */
.dark .text-sapphire-400 { color: #60A5FA; } /* Dark Mode Sapphire */
.text-sapphire-600 { color: #2563EB; } /* Darker Sapphire */
.dark .text-sapphire-300 { color: #93C5FD; } /* Lighter Sapphire for dark text */
.border-sapphire-300 { border-color: #93C5FD; } /* Light Sapphire for borders */
.dark .border-sapphire-700 { border-color: #1D4ED8; } /* Dark Sapphire for borders */
.text-ruby-500 { color: #EF4444; } /* Base Ruby (Red) */
.dark .text-ruby-400 { color: #F87171; } /* Dark Mode Ruby */
.text-ruby-600 { color: #DC2626; } /* Darker Ruby */
.dark .text-ruby-300 { color: #FCA5A5; } /* Lighter Ruby for dark text */
.border-ruby-300 { border-color: #FCA5A5; } /* Light Ruby for borders */
.dark .border-ruby-700 { border-color: #B91C1C; } /* Dark Ruby for borders */
/* Custom media query for md breakpoint to control timeline element positioning */
@media (min-width: 768px) {
.md\:before\:ml-\[unset\] {
margin-left: unset;
}
.md\:before\:translate-x-0 {
transform: translateX(0);
}
.md\:before\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.md\:before\:left-auto {
left: auto;
}
.md\:before\:right-auto {
right: auto;
}
.md\:before\:w-0\.5 {
width: 2px;
}
.md\:even\:flex-row-reverse {
flex-direction: row-reverse;
}
.md\:pr-8 {
padding-right: 2rem;
}
.md\:even\:pl-8 {
padding-left: 2rem;
}
.md\:before\:hidden {
display: none;
}
.md\:after\:block {
display: block;
}
.md\:after\:-right-\[22px\] {
right: -22px;
}
.md\:even\:after\:-left-\[22px\] {
left: -22px;
right: unset;
}
.md\:after\:border-l-\[12px\] {
border-left-width: 12px;
}
.md\:even\:after\:border-l-0 {
border-left-width: 0px;
}
.md\:even\:after\:border-r-\[12px\] {
border-right-width: 12px;
}
}
</style>관련 구성 요소
스큐어모픽 타임라인 컴포넌트
반응형 효과와 어두운 테마를 지원하는 스큐어모픽 타임라인 컴포넌트로, Tailwind CSS를 사용하여 제작되었습니다. JavaScript는 필요하지 않으며 HTML과 CSS 만 필요합니다.
그레이스케일 소셜 미디어 타임라인
Tailwind CSS로 구축된 반응형 다크 모드 지원 소셜 미디어 타임라인 구성 요소입니다. 엄격한 회색조 색 구성표와 사용자 아바타, 게시물 콘텐츠(텍스트 및 이미지), 참여 통계 및 작업 버튼이 있는 복잡한 엽서가 특징입니다. 각 게시물에 여러 대화형 요소가 있는 소셜 네트워킹 인터페이스를 위해 설계되었습니다. 이 디자인은 눈의 피로를 줄이기 위해 어두운 배경을 지원합니다. JavaScript는 사용되지 않습니다.