Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<section class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">

<div>
      <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-gray-900 mb-4">
        Build faster with Tailwind
      </h1>
      <p class="text-gray-500 text-lg mb-6">
        A utility-first CSS framework for rapidly building custom designs.
      </p>
      <a href="#" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg
                         font-medium hover:bg-blue-700 transition-colors">
        Get Started
      </a>
    </div>

<div class="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
      <img src="hero.jpg" alt="Hero" class="w-full h-full object-cover" />
    </div>
  </div>
</section>

<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4 p-4">
  <div class="aspect-square rounded-full overflow-hidden ring-2 ring-white shadow">
    <img src="avatar.jpg" alt="User" class="w-full h-full object-cover" />
  </div>
</div>

<div class="aspect-video rounded-xl overflow-hidden shadow-lg">
  <iframe
    class="w-full h-full"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    allowfullscreen>
  </iframe>
</div>