Component Wizard v1

<div class="bg-white shadow-md rounded-lg p-6 flex items-center">
    <div class="flex-shrink-0">
        <svg class="h-10 w-10 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 1 0 8 8A8.001 8.001 0 0 0 10 2zm0 14a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6z"/>
        </svg>
    </div>
    <div class="ml-4">
        <h2 class="text-2xl font-semibold text-gray-800">Statistic Title</h2>
        <p class="text-3xl font-bold text-gray-900">123</p>
    </div>
</div>

<div class="bg-gray-100 py-12">
    <div class="container mx-auto text-center">
        <h2 class="text-3xl font-bold mb-6">Pricing Plans</h2>
        <p class="text-lg mb-12">Choose the plan that suits you best</p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <h3 class="text-2xl font-semibold mb-4">Basic Plan</h3>
                <p class="text-gray-600 mb-4">$19/month</p>
                <p class="mb-6">Ideal for individuals who are just getting started.</p>
                <a href="#" class="bg-blue-500 text-white py-2 px-4 rounded">Get Started</a>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <h3 class="text-2xl font-semibold mb-4">Standard Plan</h3>
                <p class="text-gray-600 mb-4">$49/month</p>
                <p class="mb-6">Perfect for small teams looking to grow.</p>
                <a href="#" class="bg-blue-500 text-white py-2 px-4 rounded">Get Started</a>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <h3 class="text-2xl font-semibold mb-4">Premium Plan</h3>
                <p class="text-gray-600 mb-4">$99/month</p>
                <p class="mb-6">Best for large teams requiring advanced features.</p>
                <a href="#" class="bg-blue-500 text-white py-2 px-4 rounded">Get Started</a>
            </div>
        </div>
    </div>
</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>