Component Wizard v1

<div class="bg-gray-100 p-4 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4">Drop Target List</h2>
    <ul class="list-disc list-inside">
        <li class="bg-white p-2 mb-2 rounded shadow">Target 1</li>
        <li class="bg-white p-2 mb-2 rounded shadow">Target 2</li>
        <li class="bg-white p-2 mb-2 rounded shadow">Target 3</li>
        <li class="bg-white p-2 mb-2 rounded shadow">Target 4</li>
        <li class="bg-white p-2 mb-2 rounded shadow">Target 5</li>
    </ul>
</div>

<div class="flex flex-col min-h-screen">
    <header class="bg-blue-600 text-white p-4 flex justify-between items-center">
        <div class="text-lg font-bold">My Web App</div>
        <button id="hamburger" class="md:hidden focus:outline-none">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16m-7 6h7"/></svg>
        </button>
        <nav id="menu" class="hidden md:flex">
            <ul class="flex space-x-4">
                <li><a href="#" class="hover:underline">Home</a></li>
                <li><a href="#" class="hover:underline">About</a></li>
                <li><a href="#" class="hover:underline">Services</a></li>
                <li><a href="#" class="hover:underline">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <div class="flex-grow flex">
        <aside id="sidebar" class="bg-gray-200 w-64 space-y-2 p-4 md:static transition-transform duration-300 ease-in-out transform -translate-x-full md:translate-x-0">
            <ul>
                <li><a href="#" class="block p-2 hover:bg-blue-500 hover:text-white">Dashboard</a></li>
                <li><a href="#" class="block p-2 hover:bg-blue-500 hover:text-white">Profile</a></li>
                <li><a href="#" class="block p-2 hover:bg-blue-500 hover:text-white">Settings</a></li>
                <li><a href="#" class="block p-2 hover:bg-blue-500 hover:text-white">Help</a></li>
            </ul>
        </aside>
        
        <main class="flex-grow p-4">
            <h1 class="text-2xl font-bold">Welcome to My Web App</h1>
            <p class="mt-2">This is a simple example of a single page web app layout with a collapsible menu.</p>
        </main>
    </div>
    
    <footer class="bg-gray-800 text-white p-4 text-center">
        <p>&copy; <span id="current-year"></span> My Web App. All Rights Reserved.</p>
    </footer>
</div>

<style>
    #hamburger:focus + #menu {
        display: block;
    }
    #hamburger:focus + #menu ~ #sidebar {
        transform: translateX(0);
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const hamburger = document.getElementById('hamburger');
        const menu = document.getElementById('menu');
        const sidebar = document.getElementById('sidebar');
        const currentYear = new Date().getFullYear();
        document.getElementById('current-year').textContent = currentYear;

        hamburger.addEventListener('click', function() {
            menu.classList.toggle('hidden');
            sidebar.classList.toggle('-translate-x-full');
        });
    });
</script>

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">Agenda</h1>
    <div class="grid grid-cols-7 gap-4">
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Monday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">9:00 AM - Meeting</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">11:00 AM - Conference Call</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">1:00 PM - Lunch Break</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">3:00 PM - Project Update</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Tuesday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">10:00 AM - Team Meeting</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">12:00 PM - Client Review</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">2:00 PM - Training Session</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Wednesday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">9:30 AM - Workshop</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">1:30 PM - Strategy Planning</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Thursday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">11:00 AM - Design Review</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">3:00 PM - Development Sync</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Friday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">10:30 AM - Code Review</div>
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">2:00 PM - End of Week Wrap-Up</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Saturday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">No Events</div>
            </div>
        </div>
        <div class="col-span-1">
            <h2 class="text-lg font-semibold text-center">Sunday</h2>
            <div class="flex flex-col">
                <div class="bg-white shadow-lg rounded-lg p-4 mb-2">No Events</div>
            </div>
        </div>
    </div>
</div>