容器组件

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
    <h1 class="text-4xl font-bold text-gray-100 dark:text-gray-200 mb-4">My Portfolio</h1>
    <p class="text-gray-300 dark:text-gray-400 mb-6">Showcasing my work from the nostalgic eras of the 80s and 90s.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 1</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 1 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 2</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 2 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 3</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 3 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 4</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 4 with a brief overview of the key elements and technologies used.</p>
        </div>
    </div>

    <div class="mt-10 text-center">
        <h3 class="text-3xl font-bold text-gray-200 dark:text-gray-300 mb-4">About Me</h3>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-32 h-32 mx-auto mb-4">
        <p class="text-gray-300 dark:text-gray-400 max-w-md mx-auto">I'm a passionate developer with a love for retro designs and a knack for turning ideas into reality. Let's connect!</p>
    </div>
</div>