<div class="flex -space-x-4">
  <div>
    <img class="h-12 w-12 rounded-full border-2 border-white" src="https://source.unsplash.com/random/100x100?face" alt="Avatar" />
  </div>
  <div>
    <img class="h-12 w-12 rounded-full border-2 border-white" src="https://source.unsplash.com/random/100x100?face" alt="Avatar" />
  </div>
  <div>
    <img class="h-12 w-12 rounded-full border-2 border-white" src="https://source.unsplash.com/random/100x100?face" alt="Avatar" />
  </div>
  <div class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-400 text-2xl font-semibold text-white">+3</div>
</div>

<hr>

<nav>
  <ol class="flex items-center space-x-2">
    <li>
      <a href="#" class="flex items-center text-gray-600 hover:text-gray-900">
        <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
        Home
      </a>
    </li>
    <li>
      <span class="text-gray-500">/</span>
    </li>
    <li>
      <a href="#" class="flex items-center text-gray-600 hover:text-gray-900">
        <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        Products
      </a>
    </li>
    <li>
      <span class="text-gray-500">/</span>
    </li>
    <li>
      <span class="text-gray-500">Product Details</span>
    </li>
  </ol>
</nav>

<hr>

<div class="bg-indigo-100 text-indigo-800 px-4 py-3 rounded-lg flex items-center justify-between">
  <div>
    <p class="text-sm">This is a banner with actions.</p>
  </div>
  <div class="flex items-center space-x-2">
    <button class="bg-indigo-500 text-white px-3 py-2 rounded-md text-sm">Action 1</button>
    <button class="bg-indigo-200 text-indigo-800 px-3 py-2 rounded-md text-sm">Action 2</button>
  </div>
</div>

<hr>
<div class="w-max overflow-hidden rounded-lg shadow-lg">
  <div class="mx-auto max-w-md bg-white">
    <div class="flex">
      <img class="ml-2 mt-2 h-36 w-64 rounded-lg object-cover object-center" src="https://source.unsplash.com/random" alt="Property Image" />
      <div class="p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-indigo-500">Builder</div>
        <h2 class="cursor-pointer text-lg font-semibold text-gray-800">Property Name</h2>
        <p class="mt-2 text-sm text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="mt-4 border-t border-gray-300"></div>
  <div class="flex justify-evenly py-4">
    <div class="flex items-center text-sm text-gray-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-1 h-5 w-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
      </svg>

      <span>7 beds</span>
    </div>
    <div class="flex cursor-pointer items-center text-sm text-gray-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-1 h-5 w-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
      </svg>

      <span>More Detail</span>
    </div>
    <div class="flex cursor-pointer items-center text-sm text-gray-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-1 h-5 w-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
      </svg>

      <span>Price</span>
    </div>
  </div>
</div>

<hr>

<section class="bg-white py-20">
  <div class="container mx-auto px-4">
    <h2 class="mb-8 text-center text-4xl font-bold text-gray-800">Key Features</h2>

    <div class="flex flex-col-reverse flex-wrap md:flex-row">
      <div class="mb-8 w-full px-4 md:mb-0 md:w-1/2">
        <div class="rounded-lg bg-gray-100 p-6">
          <h3 class="mb-4 text-2xl font-bold text-gray-800">Responsive Design</h3>
          <p class="mb-4 text-gray-600">Our UI library is built with responsive design in mind, ensuring your components look great on any device.</p>
          <a href="#" class="inline-block rounded-lg bg-indigo-500 px-4 py-2 text-white transition duration-300 hover:bg-indigo-600">Learn More</a>
        </div>
      </div>
      <div class="mb-8 w-full px-4 md:order-last md:mb-0 md:w-1/2">
        <img src="https://source.unsplash.com/random" alt="Responsive Design" class="h-56 w-full rounded-lg shadow-lg lg:h-48" />
      </div>
    </div>

    <div class="mt-5 flex flex-col flex-wrap md:flex-row">
      <div class="mb-8 w-full px-4 md:mb-0 md:w-1/2">
        <img src="https://source.unsplash.com/random" alt="Utility-First CSS" class="h-56 w-full rounded-lg shadow-lg lg:h-48" />
      </div>
      <div class="mb-8 w-full px-4 md:mb-0 md:w-1/2">
        <div class="rounded-lg bg-gray-100 p-6">
          <h3 class="mb-4 text-2xl font-bold text-gray-800">Utility-First CSS</h3>
          <p class="mb-4 text-gray-600">Build custom designs without leaving your HTML with our utility-first approach.</p>
          <a href="#" class="inline-block rounded-lg bg-indigo-500 px-4 py-2 text-white transition duration-300 hover:bg-indigo-600">Learn More</a>
        </div>
      </div>
    </div>
  </div>
</section>

<hr>

<div class="bg-gray-100 py-8">
  <div class="mx-auto max-w-4xl px-4">
    <div class="overflow-hidden rounded-lg bg-white">
      <div class="p-8">
        <p class="text-xl font-semibold">Testimonial Title</p>
        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="mt-4 flex items-center">
          <img src="https://source.unsplash.com/random/100x100?face" alt="Avatar" class="mr-4 h-10 w-10 rounded-full" />
          <div>
            <p class="font-semibold">John Doe</p>
            <p class="text-sm text-gray-500">CEO, Company Name</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

body{padding:1em;}
hr{margin-top:1em;
  margin-bottom:1em;
  display:block;
}