Zur Inhaltslink-Komponente springen

<div class="flex justify-center">
    <a href="#content" class="relative flex items-center justify-center w-52 h-12 rounded-lg shadow-lg bg-pastel-bg-light dark:bg-pastel-bg-dark text-pastel-text-light dark:text-pastel-text-dark hover:bg-gradient-to-r hover:from-pastel-hover-start hover:to-pastel-hover-end transition duration-200 ease-in-out">
        <span class="absolute inset-0 rounded-lg border border-pastel-border-light dark:border-pastel-border-dark transform scale-110 hover:scale-100 transition duration-200 ease-in-out"></span>
        <span class="font-semibold z-10">Skip to Content</span>
    </a>
</div>

<style>
    .bg-pastel-bg-light {
        background-color: #f9e3e3;
    }
    .bg-pastel-bg-dark {
        background-color: #3c3c3c;
    }
    .text-pastel-text-light {
        color: #2d2d2d;
    }
    .text-pastel-text-dark {
        color: #f6f6f6;
    }
    .hover\:bg-gradient-to-r:hover {
        background: linear-gradient(90deg, #f9b0b0, #f6dbbd);
    }
    .hover\:from-pastel-hover-start:hover {
        background-color: #f9b0b0;
    }
    .hover\:to-pastel-hover-end:hover {
        background-color: #f6dbbd;
    }
    .border-pastel-border-light {
        border-color: #f17979;
    }
    .border-pastel-border-dark {
        border-color: #606060;
    }
</style>

<div id="content" class="p-5 mt-10">
    <h1 class="text-2xl font-bold dark:text-white">Welcome to My Portfolio</h1>
    <img src="https://picsum.photos/800/400" alt="Portfolio Image" class="mt-5 rounded-lg shadow-lg">
    <p class="mt-3 dark:text-gray-300">Here you'll find a selection of my work and projects showcasing my skills and expertise.</p>
</div>