Skeuomorphic_Autumn_Skip_to_Content_Link

<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:rounded-lg focus:px-6 focus:py-3 focus:text-lg focus:shadow-lg focus:outline-none focus:ring-4 focus:ring-offset-4 focus:ring-offset-orange-900 focus:ring-orange-800
    bg-gradient-to-br from-amber-700 to-orange-900 text-amber-50 rounded-xl
    border-t-2 border-l-2 border-r-4 border-b-4 border-amber-950
    shadow-[inset_0_3px_5px_rgba(255,255,255,0.2),inset_0_-3px_5px_rgba(0,0,0,0.3),0_6px_10px_rgba(0,0,0,0.4)]
    hover:from-amber-600 hover:to-orange-800
    active:from-amber-800 active:to-orange-950 active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.2)]
    transition-all duration-200 ease-out
    dark:from-amber-950 dark:to-orange-900 dark:text-amber-200
    dark:border-t-2 dark:border-l-2 dark:border-r-4 dark:border-b-4 dark:border-zinc-800
    dark:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.1),0_6px_10px_rgba(0,0,0,0.7)]
    dark:hover:from-amber-900 dark:hover:to-orange-800
    dark:active:from-amber-950 dark:active:to-orange-950 dark:active:shadow-[inset_0_3px_5px_rgba(255,255,255,0.1),inset_0_-3px_5px_rgba(0,0,0,0.3)]
    ">Skip to Main Content</a>
<main id="main-content" class="p-8 bg-orange-50 dark:bg-zinc-900 min-h-screen text-zinc-900 dark:text-zinc-100 flex flex-col justify-center items-center font-sans">
    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-orange-900 dark:text-orange-200 drop-shadow-md text-center">
        Welcome to Our Learning Platform
    </h1>
    <p class="text-xl md:text-2xl text-orange-800 dark:text-orange-300 mb-8 max-w-3xl text-center">
        Explore a world of knowledge and expand your horizons. This is placeholder content for the main section of your educational platform.
    </p>
    <img src="https://picsum.photos/seed/learn/800/450" alt="Autumn leaves and books" class="rounded-2xl shadow-xl border-4 border-amber-800 dark:border-amber-700 max-w-full h-auto mb-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
        <div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
            <img src="https://picsum.photos/seed/course1/100/100" alt="Course thumbnail 1" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
            <h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Course Title One</h3>
            <p class="text-center text-orange-700 dark:text-orange-300">Dive deep into the fundamentals of web development.</p>
        </div>
        <div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
            <img src="https://picsum.photos/seed/course2/100/100" alt="Course thumbnail 2" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
            <h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Interactive Design</h3>
            <p class="text-center text-orange-700 dark:text-orange-300">Learn to create engaging user experiences.</p>
        </div>
        <div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
            <img src="https://picsum.photos/seed/course3/100/100" alt="Course thumbnail 3" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
            <h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Data Science Basics</h3>
            <p class="text-center text-orange-700 dark:text-orange-300">Uncover insights with powerful data analysis.</p>
        </div>
    </div>
</main>