Neon_Glow_Timeline_Agriculture
Un componente della timeline complesso e reattivo con effetti neon/bagliore e toni gioiello, su misura per i siti Web di agricoltura/allevamento. Presenta ricchi elementi visivi e supporto per la modalità oscura.
Codice 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>Componenti correlati
Componente Timeline
Un componente della timeline reattivo con combinazione di colori triadica, design incentrato sulla microinterazione per siti Web aziendali/aziendali, che supporta le modalità chiare e scure.
Componente Timeline
Un componente della timeline reattivo con elementi di progettazione 3D, combinazione di colori dei toni della terra e supporto per la modalità scura. Adatto per portafogli.
Timeline dei social media in scala di grigi
Un componente della timeline dei social media reattivo e pronto per la modalità oscura costruito con Tailwind CSS. È dotato di una rigorosa combinazione di colori in scala di grigi e di complesse cartoline con avatar dell'utente, contenuti dei post (testo e immagini), statistiche di coinvolgimento e pulsanti di azione. Progettato per le interfacce di social networking con più elementi interattivi su ogni post. Il design supporta sfondi scuri per ridurre l'affaticamento degli occhi. Non viene utilizzato alcun JavaScript.