제조를 위한 Glassmorphism 미디어 구성 요소

<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-6 p-6 rounded-3xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 border border-gray-200 dark:border-gray-700 shadow-xl overflow-hidden relative">
    
    <!-- Background Blurs for Glassmorphism Effect -->
    <div class="absolute inset-0 z-0 opacity-40">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-blue-600"></div>
      <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-gray-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-gray-600"></div>
    </div>

    <!-- Content Wrapper -->
    <div class="relative z-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-6">

      <!-- Image Section -->
      <div class="flex-shrink-0 w-full md:w-1/2 overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-700 shadow-md">
        <img src="https://picsum.photos/600/400?grayscale&random=1" alt="Industrial Machine" class="w-full h-auto object-cover transform transition-transform duration-300 hover:scale-105 rounded-2xl">
      </div>

      <!-- Text Content Section -->
      <div class="flex-1 text-gray-800 dark:text-gray-100 space-y-4">
        <h2 class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-white">
          Precision Engineering for Tomorrow's Industry
        </h2>
        <p class="text-lg opacity-90">
          Discover our advanced solutions for manufacturing, designed to optimize efficiency and drive innovation.
          Our cutting-edge technology ensures unparalleled accuracy and reliability.
        </p>
        <ul class="space-y-2 text-md opacity-90">
          <li class="flex items-center">
            <svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            Automated Production Lines
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            Robust Quality Control
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            Sustainable Practices
          </li>
        </ul>
        <button class="mt-4 px-6 py-3 rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800 transition transform hover:-translate-y-0.5 shadow-lg">
          Learn More
        </button>
      </div>
    </div>

  </div>
</div>

<!-- Tailwind CSS Keyframes for blob animation (usually in tailwind.config.js) -->
<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }
  .animate-blob {
    animation: blob 7s infinite;
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>