Event_Conference_Schedule
A responsive event/conference schedule component with paper/print-inspired design and a forest green color palette, including dark mode support. It features a tabbed navigation for different days and expandable session details.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
<!-- Schedule Header -->
<div class="mb-8 text-center">
<h1 class="text-4xl sm:text-5xl font-extrabold text-green-900 dark:text-green-300 mb-2 tracking-tight drop-shadow-sm">Conference Schedule</h1>
<p class="text-lg sm:text-xl text-green-700 dark:text-green-400 font-medium">Stay informed about all the exciting sessions.</p>
</div>
<!-- Schedule Container - Mimics a printed page -->
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-850 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative border border-green-200 dark:border-gray-700">
<!-- Page texture/border element -->
<div class="absolute inset-0 border-4 border-dashed border-green-100 dark:border-gray-750 rounded-lg pointer-events-none"></div>
<div class="p-4 sm:p-6 lg:p-8 relative z-10">
<!-- Day Tabs Navigation -->
<div role="tablist" aria-label="Conference Days" class="flex flex-wrap justify-center mb-6 border-b border-green-200 dark:border-gray-700">
<button role="tab" id="tab-day1" aria-controls="panel-day1" aria-selected="true" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-800 dark:text-green-300 border-b-4 border-green-600 dark:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-900 dark:hover:text-green-200 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
<span class="relative">
<span class="block">Day 1</span>
<span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
</span>
</button>
<button role="tab" id="tab-day2" aria-controls="panel-day2" aria-selected="false" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-700 dark:text-green-400 border-b-4 border-transparent hover:border-green-300 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-800 dark:hover:text-green-300 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
<span class="relative">
<span class="block">Day 2</span>
<span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
</span>
</button>
<button role="tab" id="tab-day3" aria-controls="panel-day3" aria-selected="false" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-700 dark:text-green-400 border-b-4 border-transparent hover:border-green-300 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-800 dark:hover:text-green-300 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
<span class="relative">
<span class="block">Day 3</span>
<span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
</span>
</button>
</div>
<!-- Schedule Content for Day 1 -->
<div id="panel-day1" role="tabpanel" aria-labelledby="tab-day1" class="space-y-6">
<!-- Session Item 1 -->
<div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
<div class="flex-grow mb-3 sm:mb-0">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Opening Keynote: The Future of Sustainable Tech</h3>
<p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T09:00">09:00 AM</time> - <time datetime="2024-10-27T10:00">10:00 AM</time> | Grand Ballroom</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
<span class="text-sm text-green-800 dark:text-green-300 font-semibold">Dr. Alice Johnson</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
<p class="mb-2">Join Dr. Alice Johnson, a leading innovator in sustainable technologies, as she outlines the challenges and opportunities for a greener future. This session will explore cutting-edge advancements and their potential impact on our planet.</p>
<p>Topics include renewable energy solutions, eco-friendly materials, and circular economy principles. A Q&A session will follow the presentation.</p>
</div>
<div class="mt-4 text-center">
<button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<span class="expand-text-hide">Show Details</span>
<span class="expand-text-show hidden">Hide Details</span>
<svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<!-- Session Item 2 -->
<div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relative">
<div class="flex-grow mb-3 sm:mb-0">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Workshop: Hands-on AI for Environmental Monitoring</h3>
<p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T10:30">10:30 AM</time> - <time datetime="2024-10-27T12:00">12:00 PM</time> | Innovation Lab</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
<span class="text-sm text-green-800 dark:text-green-300 font-semibold">Dr. Ben Carter</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
<p class="mb-2">This interactive workshop will guide participants through building and deploying AI models for real-world environmental data analysis. Bring your laptops for a practical session on data collection, feature engineering, and model training.</p>
<p>Prerequisites: Basic understanding of Python and data science concepts. Limited seating available. Pre-registration recommended.</p>
</div>
<div class="mt-4 text-center">
<button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<span class="expand-text-hide">Show Details</span>
<span class="expand-text-show hidden">Hide Details</span>
<svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<!-- Lunch Break -->
<div class="bg-green-100 dark:bg-gray-700 rounded-lg p-4 sm:p-6 text-center shadow-md border border-green-300 dark:border-gray-600">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1">Lunch Break</h3>
<p class="text-base text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T12:00">12:00 PM</time> - <time datetime="2024-10-27T13:00">01:00 PM</time> | Conference Dining Hall</p>
</div>
</div>
<!-- Schedule Content for Day 2 (hidden by default) -->
<div id="panel-day2" role="tabpanel" aria-labelledby="tab-day2" class="space-y-6 hidden">
<div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
<div class="flex-grow mb-3 sm:mb-0">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Panel: Green Investments and Impact Funding</h3>
<p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-28T09:30">09:30 AM</time> - <time datetime="2024-10-28T10:30">10:30 AM</time> | Executive Boardroom</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
<img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm -ml-4">
<span class="text-sm text-green-800 dark:text-green-300 font-semibold">Multiple Speakers</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
<p class="mb-2">A moderated discussion with leading investors and fund managers on the growing landscape of green investments, ESG criteria, and how to effectively fund sustainable projects for maximum impact and returns.</p>
<p>Panelists will share insights on emerging markets, risk assessment, and the future of responsible investing.</p>
</div>
<div class="mt-4 text-center">
<button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<span class="expand-text-hide">Show Details</span>
<span class="expand-text-show hidden">Hide Details</span>
<svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<!-- Schedule Content for Day 3 (hidden by default) -->
<div id="panel-day3" role="tabpanel" aria-labelledby="tab-day3" class="space-y-6 hidden">
<div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
<div class="flex-grow mb-3 sm:mb-0">
<h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Closing Ceremony & Future Initiatives</h3>
<p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-29T15:00">03:00 PM</time> - <time datetime="2024-10-29T16:00">04:00 PM</time> | Grand Ballroom</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
<span class="text-sm text-green-800 dark:text-green-300 font-semibold">Organizer Team</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
<p class="mb-2">Join us for the closing ceremony to reflect on the insights gained, key takeaways, and discuss the collective impact. We will also announce future initiatives and opportunities for collaboration based on this year's themes.</p>
<p>Networking reception to follow. Don't miss this opportunity to connect with fellow attendees and speakers.</p>
</div>
<div class="mt-4 text-center">
<button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
<span class="expand-text-hide">Show Details</span>
<span class="expand-text-show hidden">Hide Details</span>
<svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Simple Script for Tab and Accordion Functionality -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const tabButtons = document.querySelectorAll('.tab-button');
const tabPanels = document.querySelectorAll('[role="tabpanel"]');
const expandButtons = document.querySelectorAll('.expand-button');
// Tab functionality
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const targetPanelId = button.getAttribute('aria-controls');
// Deactivate all tabs and hide all panels
tabButtons.forEach(btn => {
btn.setAttribute('aria-selected', 'false');
btn.classList.remove('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
btn.classList.add('border-transparent');
});
tabPanels.forEach(panel => panel.classList.add('hidden'));
// Activate clicked tab and show its panel
button.setAttribute('aria-selected', 'true');
button.classList.add('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
button.classList.remove('border-transparent');
document.getElementById(targetPanelId).classList.remove('hidden');
});
// Set initial active tab state (Day 1)
if (button.getAttribute('aria-selected') === 'true') {
button.classList.add('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
button.classList.remove('border-transparent');
}
});
// Accordion functionality
expandButtons.forEach(button => {
button.addEventListener('click', () => {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
// Toggle text within the button
const hideText = button.querySelector('.expand-text-hide');
const showText = button.querySelector('.expand-text-show');
if (isExpanded) {
hideText.classList.remove('hidden');
showText.classList.add('hidden');
} else {
hideText.classList.add('hidden');
showText.classList.remove('hidden');
}
});
});
});
</script>
</div>Related Components
Neon_Glow_Marketplace_Component
A complex marketplace component with bright, glowing elements and a triadic color scheme, designed for multi-vendor platforms. Features include product cards, categories, search, and user profiles, all responsive and with dark mode support.
Art Deco Purple Documentation Component
A moderate complexity documentation/wiki component with an Art Deco design theme, featuring geometric patterns and luxurious styling using a purple/violet color spectrum. Fully responsive with dark mode support.
Functional Components Component
A functional component with 3D design, responsive effects, and dark mode support, implemented using Tailwind CSS.