맨 위로 이동 버튼 구성 요소

<div class="relative min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">

  <!-- Simulate page content to demonstrate button functionality -->
  <div class="container mx-auto px-4 py-12">
    <h1 class="text-4xl md:text-5xl font-bold mb-8 text-gray-900 dark:text-gray-100 leading-tight">Welcome to Our Learning Platform</h1>
    
    <p class="mb-6 text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
      Explore a world of knowledge and expand your horizons. Our courses are designed to be engaging, informative, and accessible to everyone. Dive deep into subjects that ignite your curiosity and empower your future.
    </p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/300/200?random=1" alt="Course Thumbnail" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Fundamentals of Web Development</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Learn the basics of HTML, CSS, and JavaScript to build your first website.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/300/200?random=2" alt="Course Thumbnail" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Introduction to Data Science</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Discover the power of data analysis and machine learning with practical examples.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/300/200?random=3" alt="Course Thumbnail" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Creative Writing Workshop</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Unleash your inner storyteller and master the art of compelling narratives.</p>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 prose lg:prose-lg max-w-none mb-12">
      <h2 class="text-3xl font-bold mb-4 border-b pb-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">Deep Dive into Learning</h2>
      <p>Our platform offers a diverse range of courses, from technology to arts, designed to foster continuous learning. We believe that education should be accessible and enjoyable. Each lesson is crafted by experts in their field, ensuring you receive high-quality, up-to-date information.</p>
      <p>Gain practical skills through hands-on exercises and real-world projects. Connect with a vibrant community of learners and educators. Share insights, ask questions, and collaborate on exciting new ideas. Education is a journey, and we're here to guide you every step of the way.</p>
      <p>Whether you're a beginner looking to pick up a new skill or an experienced professional aiming to refine your expertise, our comprehensive curriculum has something for everyone. Embrace the future of learning with us.</p>
      
      <ul class="list-disc list-inside space-y-2 mt-6">
        <li>Interactive lessons and quizzes</li>
        <li>Downloadable resources and guides</li>
        <li>Expert-led video tutorials</li>
        <li>Student discussion forums</li>
        <li>Certificate of completion</li>
      </ul>
      
      <p class="mt-6 italic text-gray-600 dark:text-gray-400">“The more that you read, the more things you will know. The more that you learn, the more places you'll go.” – Dr. Seuss</p>
    </div>

    <!-- Placeholder content to make the page scrollable -->
    <div class="h-[800px] w-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-xl font-semibold mb-12">
      Scroll down further to see the button appear!
    </div>
    <div class="h-[800px] w-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-xl font-semibold mb-12">
      Keep scrolling...
    </div>
    <div class="h-[800px] w-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-xl font-semibold">
      End of a very long page section.
    </div>

  </div>

  <!-- Back to Top Button -->
  <!-- Using a simple JS snippet to handle scroll visibility and scroll behavior -->
  <button id="back-to-top-btn" 
          class="fixed bottom-6 right-6 lg:bottom-8 lg:right-8 
                 opacity-0 translate-y-4 pointer-events-none 
                 transition-all duration-300 ease-in-out 
                 p-3 md:p-4 
                 bg-white dark:bg-gray-800 
                 border-2 border-gray-900 dark:border-gray-100 
                 rounded-full shadow-lg 
                 text-gray-900 dark:text-gray-100 
                 focus:outline-none focus:ring-4 focus:ring-accent-500/50 dark:focus:ring-accent-400/50 
                 hover:bg-gray-100 dark:hover:bg-gray-700 
                 hover:shadow-xl 
                 group"
          onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
    <svg class="w-6 h-6 md:w-7 md:h-7 group-hover:scale-110 transition-transform duration-200 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
    <span class="sr-only">Back to top</span>
  </button>

</div>

<script>
  const backToTopBtn = document.getElementById('back-to-top-btn');

  window.addEventListener('scroll', () => {
    if (window.scrollY > 300) { // Show button after scrolling 300px
      backToTopBtn.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
      backToTopBtn.classList.add('opacity-100', 'translate-y-0');
    } else {
      backToTopBtn.classList.remove('opacity-100', 'translate-y-0');
      backToTopBtn.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
    }
  });

  // Using the scrollIntoView for smooth scroll when button is clicked
  backToTopBtn.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
<\/script>

<style>
  /* Define accent color variable */
  :root {
    --accent-color: #ef4444; /* Tailwind red-500 */
  }
  .dark:root {
    --accent-color: #f87171; /* Tailwind red-400 for dark mode */
  }

  /* Apply accent color to focus ring */
  .focus\:ring-accent-500\/50 {
    box-shadow: 0 0 0 4px rgba(var(--tw-accent-500-rgb), 0.5);
  }
  .dark\:focus\:ring-accent-400\/50 {
    box-shadow: 0 0 0 4px rgba(var(--tw-accent-400-rgb), 0.5);
  }

  /* Tailwind does not have a direct way to define custom colors on the fly for arbitrary properties, 
     so we're using a slight workaround with CSS variables for the focus ring, 
     assuming 'accent-500' and 'accent-400' are conceptually mapped to primary accent colors. 
     For a true Tailwind-only solution without global CSS, one would typically use 
     pre-defined Tailwind colors like `focus:ring-red-500/50`. 
     For this demo, we'll demonstrate a custom accent using the red-500/400 mapping. 
  */
  /* Example: Setting custom RGB values for accent to be used by ring */
  .focus\:ring-accent-500\/50 {
    --tw-accent-500-rgb: 239, 68, 68; /* red-500 */
  }
  .dark .focus\:ring-accent-400\/50 {
    --tw-accent-400-rgb: 248, 113, 113; /* red-400 */
  }

  /* Simulate a paper-like texture if desired (optional and beyond simple Tailwind classes) */
  /* 
  .bg-white, .dark:bg-gray-800 {
    background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M0 0h3v3H0V0zm3 3h3v3H3V3z"/%3E%3C/g%3E%3C/svg%3E');
    background-size: 6px 6px;
  }
  */
</style>