Componente Componentes de visualización de contenido

<div class="dark:bg-gray-900 dark:text-gray-200 py-12">
  <div class="container mx-auto px-4">
    <div class="md:flex md:items-center md:justify-between">
      <div class="md:w-1/2">
        <h2 class="text-3xl font-bold mb-4">Our Mission</h2>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Learn More</button>
      </div>
      <div class="md:w-1/2 mt-8 md:mt-0">
        <img src="https://images.unsplash.com/photo-1588702547930-db7c329119ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mission Image" class="rounded-lg shadow-lg">
      </div>
    </div>

    <div class="md:flex md:items-center md:justify-between mt-12">
      <div class="md:w-1/2 mb-8 md:mb-0">
        <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Values Image" class="rounded-lg shadow-lg">
      </div>
      <div class="md:w-1/2 md:pl-8">
        <h2 class="text-3xl font-bold mb-4">Our Values</h2>
        <ul class="list-disc list-inside">
          <li class="mb-2">Integrity and Honesty</li>
          <li class="mb-2">Customer Focus</li>
          <li class="mb-2">Innovation and Excellence</li>
          <li class="mb-2">Teamwork and Collaboration</li>
        </ul>
      </div>
    </div>

    <div class="mt-12 text-center">
      <h2 class="text-3xl font-bold mb-6">What Our Clients Say</h2>
      <div class="md:flex md:-mx-4">
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">John Smith</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CEO, Company A</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Jane Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Marketing Director, Company B</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Peter Jones</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CTO, Company C</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>