Componente fisarmonica Bauhaus - Blog/Contenuto

<div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-start justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Frequently Asked Questions</h2>
      <p class="mt-2 text-sm sm:text-base text-blue-700 dark:text-blue-300">Find answers to common questions about our content.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Accordion Item 1 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">What is the Bauhaus philosophy in design?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">The Bauhaus philosophy, originating from a German art school in the early 20th century, emphasized functionality, clean lines, and geometric forms. It aimed to unify art, craft, and technology, promoting minimalist designs suitable for mass production with an emphasis on 'form follows function'.</p>
          <img src="https://picsum.photos/300/200?random=1" alt="Geometric shapes illustration" class="w-full h-40 object-cover mt-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        </div>
      </details>

      <!-- Accordion Item 2 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">How does Bauhaus influence modern web design?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">Bauhaus principles like minimalism, grid-based layouts, sans-serif typography, and emphasizing usability profoundly impact modern web design. Its focus on structure and readability translates directly into clean, functional, and accessible user interfaces.</p>
          <div class="flex items-center space-x-4 mt-4 p-3 bg-gray-50 dark:bg-gray-900 rounded-md border border-gray-200 dark:border-gray-700">
            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author avatar">
            <div>
              <p class="font-medium text-gray-900 dark:text-gray-50">John Doe</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</p>
            </div>
          </div>
        </div>
      </details>

      <!-- Accordion Item 3 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">What are primary colors in Bauhaus context?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">In a strong reflection of Constructivism and De Stijl movements, the Bauhaus often utilized primary colors – red, yellow, and blue – alongside black and white. This limited palette emphasized geometric simplicity and stark visual impact, creating a powerful functional aesthetic.</p>
          <div class="flex space-x-2 mt-4">
            <div class="w-16 h-16 bg-red-500 rounded-lg"></div>
            <div class="w-16 h-16 bg-yellow-400 rounded-lg"></div>
            <div class="w-16 h-16 bg-blue-500 rounded-lg"></div>
          </div>
        </div>
      </details>

      <!-- Accordion Item 4 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">Can I contribute my own content or questions?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">Yes, we welcome contributions! Please visit our 'Submit Content' page or contact our editorial team directly with your proposals. We are always looking for insightful questions and well-researched answers to enrich our blog.</p>
          <a href="#" class="inline-flex items-center mt-3 px-4 py-2 bg-blue-600 text-white font-medium rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800 transition-colors duration-200 text-sm sm:text-base">
            Learn More
            <svg class="ml-2 -mr-1 w-4 h-4" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
          </a>
        </div>
      </details>
    </div>

    <div class="p-6 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400">
      <p>&copy; 2023 Bauhaus Inspired Content. All rights reserved.</p>
    </div>
  </div>
</div>

<!-- To make the 'details' tag animate, adding simple CSS is highly recommended. Tailwind CSS does not provide direct animation for 'details[open]'. This can be embedded in a <style> tag or a CSS file. -->
<!-- Example CSS for the fade-in effect: -->
<style>
  /* This is outside the JSON intentionally, as per the rules to ONLY include HTML and Tailwind CSS classes in the json.html_code output. This is a note for the user. */
  /* If embedding <style> tags were allowed in the output, it would look like this: */
  /*
  .group-open\:animate-fade-in[open] > div {
    animation: fade-in 0.5s ease-out forwards;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  */
</style>