Componente di notizie sulla fisarmonica industriale
Un componente a fisarmonica in stile industriale per siti Web di notizie e giornalismo, con elementi esposti, trame metalliche e una tavolozza di colori autunnali. È reattivo, progettato per più elementi interattivi e include il supporto per la modalità oscura.
Codice HTML
<div class="font-sans bg-amber-50 dark:bg-stone-950 p-4 sm:p-8 md:p-12 transition-colors duration-300">
<div class="max-w-4xl mx-auto bg-stone-100 dark:bg-stone-900 shadow-xl rounded-lg overflow-hidden border border-stone-300 dark:border-stone-700">
<h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-orange-300 p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 border-b border-stone-300 dark:border-stone-700 uppercase tracking-wide flex items-center justify-between">
<span class="flex items-center">
<svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 013-3zm6 0a1 1 0 11-2 0V3a1 1 0 112 0v1z" clip-rule="evenodd"></path>
</svg>
Latest Dispatches
</span>
<span class="text-sm text-stone-600 dark:text-stone-400 hidden md:block">_NEWS_FEED_</span>
</h2>
<!-- Accordion Item 1 -->
<details class="group">
<summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
<div class="flex items-center">
<svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
The Future of Renewable Energy: A Deep Dive
</h3>
</div>
<span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[ANALYSIS]</span>
<div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
</summary>
<div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 border-b border-stone-200 dark:border-stone-800 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
<div class="grid md:grid-cols-2 gap-6">
<div>
<img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=1" alt="Renewable energy infrastructure">
<p class="mb-4">Experts predict a global shift towards sustainable power sources, driven by technological advancements and increasing environmental concerns. We explore the latest breakthroughs in solar, wind, and geothermal technologies.</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Published: October 26, 2023 - 10:30 AM EST</p>
<div class="flex items-center mt-3">
<img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Author Avatar">
<span class="text-sm font-medium text-stone-800 dark:text-stone-200">By Jane Doe, Energy Correspondent</span>
</div>
</div>
<div class="mt-4 md:mt-0">
<h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Related Readings:</h4>
<ul class="list-disc list-inside space-y-2 text-sm">
<li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">The Economic Impact of Green Investments</a></li>
<li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Challenges in Grid Modernization</a></li>
<li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Case Study: Germany's Energiewende</a></li>
</ul>
<a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
Read Full Article
<svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
</details>
<!-- Accordion Item 2 -->
<details class="group">
<summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
<div class="flex items-center">
<svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
Global Markets Stabilize After Volatile Week
</h3>
</div>
<span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[MARKET_REPORT]</span>
<div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
</summary>
<div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 border-b border-stone-200 dark:border-stone-800 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
<div class="grid md:grid-cols-2 gap-6">
<div>
<img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=2" alt="Stock market graphs">
<p class="mb-4">Major indices showed signs of recovery today as investor confidence slowly returns. Analysts attribute the rebound to stronger-than-expected corporate earnings reports.</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Published: October 26, 2023 - 09:00 AM EST</p>
<div class="flex items-center mt-3">
<img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
<span class="text-sm font-medium text-stone-800 dark:text-stone-200">By John Smith, Financial Editor</span>
</div>
</div>
<div class="mt-4 md:mt-0">
<h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Key Economic Indicators:</h4>
<ul class="list-disc list-inside space-y-2 text-sm">
<li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Inflation Rates Update</a></li>
<li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Unemployment Figures</a></li>
<li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Consumer Spending Trends</a></li>
</ul>
<a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
Detailed Report
<svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
</details>
<!-- Accordion Item 3 -->
<details class="group">
<summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
<div class="flex items-center">
<svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
Exploration of Mars: New Discoveries Unveiled
</h3>
</div>
<span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[SCIENCE_NEWS]</span>
<div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
</summary>
<div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
<div class="grid md:grid-cols-2 gap-6">
<div>
<img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=3" alt="Mars Rover image">
<p class="mb-4">NASA's latest rover mission has sent back unprecedented data, hinting at the presence of ancient liquid water formations on the Red Planet. This could revolutionize our understanding of Martian history.</p>
<p class="text-sm text-stone-600 dark:text-stone-400">Published: October 25, 2023 - 04:00 PM EST</p>
<div class="flex items-center mt-3">
<img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Author Avatar">
<span class="text-sm font-medium text-stone-800 dark:text-stone-200">By Alex Wu, Science Editor</span>
</div>
</div>
<div class="mt-4 md:mt-0">
<h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Space Exploration Milestones:</h4>
<ul class="list-disc list-inside space-y-2 text-sm">
<li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Lunar Missions Reaching New Heights</a></li>
<li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Private Sector's Role in Space</a></li>
<li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Search for Exoplanets Update</a></li>
</ul>
<a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
Explore Further
<svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
</details>
<div class="p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 text-center text-xs sm:text-sm text-stone-600 dark:text-stone-400 border-t border-stone-300 dark:border-stone-700">
<p>Data provided 'as is' for illustrative purposes. All rights reserved © 2023 Industrial News Corp.</p>
</div>
</div>
</div>Componenti correlati
Componente Fisarmonica
Un componente a fisarmonica in stile 3D progettato per siti Web aziendali/aziendali con supporto per temi scuri.
Componente Fisarmonica
Componente a fisarmonica Glassmorphism con colori vivaci per i social media, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, interfaccia ricca con più elementi interattivi, design reattivo e supporto per temi scuri. Non è necessario alcun codice JavaScript, solo HTML con le classi Tailwind.
Componente per fisarmonica vintage retrò
Un componente a fisarmonica in stile retrò / vintage con toni della terra per la visualizzazione dei dati della dashboard. Progettato per una complessità media con supporto per temi reattivi e scuri.