Playful_Documentation_Columns_Component

<div class="font-sans antialiased bg-orange-50 dark:bg-gray-900 transition-colors duration-300 py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 sm:mb-16 lg:mb-20">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-orange-700 dark:text-orange-300 mb-4 tracking-tight leading-tight">
        Explore Our Sunny Guides!
      </h2>
      <p class="text-lg sm:text-xl text-orange-600 dark:text-orange-400 max-w-2xl mx-auto">
        Dive into our vibrant collection of helpful articles and fun insights to brighten your day.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12">
      <!-- Column 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-orange-200 dark:border-yellow-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs1/300/200" alt="Getting Started" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-orange-300 dark:border-orange-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-orange-700 dark:text-orange-300 mb-3 text-center">
          Quick Start Guide
        </h3>
        <p class="text-orange-600 dark:text-orange-400 text-base sm:text-lg mb-6 text-center">
          Jump right in with our easy-to-follow guide for new adventurers.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Explore Now
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Column 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-yellow-200 dark:border-orange-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs2/300/200" alt="Advanced Features" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-yellow-300 dark:border-yellow-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-yellow-700 dark:text-yellow-300 mb-3 text-center">
          Advanced Tricks
        </h3>
        <p class="text-yellow-600 dark:text-yellow-400 text-base sm:text-lg mb-6 text-center">
          Uncover the hidden gems and master the advanced functionalities.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Column 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-red-200 dark:border-red-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs3/300/200" alt="Support & FAQs" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-red-300 dark:border-red-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-300 mb-3 text-center">
          Support & Smiles
        </h3>
        <p class="text-red-600 dark:text-red-400 text-base sm:text-lg mb-6 text-center">
          Find answers to common questions and get a helping hand when you need it.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Get Help
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>