<section class="text-wireframe py-12">
  <div class="container md:flex md:items-center md:space-x-24">
    <div class="md:w-1/2">
      <div class="w-full mb-6 sm:mb-0">
        <div class="relative">
          <svg viewBox="0 0 602 402" class="text-wireframe"><rect x="1" y="1" width="600" height="400" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/><line x1="1" y1="1" x2="601" y2="401" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/><line x1="601" y1="1" x2="1" y2="401" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/></svg>
          <div class="absolute top-0 bg-wireframe text-white px-2 py-1">Video</div>
        </div>
      </div>
    </div>
    <div class="md:w-1/2 md:pr-12">
      <h1>Welcome to your new wireframe kit</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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  incididunt ut laboret.</p>
      <div class="my-8">
        <a href="#" class="border-2 border-wireframe px-4 py-2">Button Title</a>
      </div>
    </div>
  </div>
</section>

<section class="text-wireframe py-12">
  <div class="container lg:flex lg:items-center lg:space-x-24">
    <div class="w-full lg:w-1/2 lg:pr-12">
      <h1 class="font-sans">Welcome to your new wireframe kit</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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  incididunt ut laboret.</p>
      <div class="my-8 grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-4">
        <div>
          <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M4.5 3.5l.354-.354a.5.5 0 00-.708 0L4.5 3.5zM1.5 1h12V0h-12v1zm12.5.5v12h1v-12h-1zM13.5 14h-12v1h12v-1zM1 13.5v-12H0v12h1zm.5.5a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1zm12.5-.5a.5.5 0 01-.5.5v1a1.5 1.5 0 001.5-1.5h-1zM13.5 1a.5.5 0 01.5.5h1A1.5 1.5 0 0013.5 0v1zm-12-1A1.5 1.5 0 000 1.5h1a.5.5 0 01.5-.5V0zm-1 11h14v-1H.5v1zm.354-3.146l4-4-.708-.708-4 4 .708.708zm3.292-4l7 7 .708-.708-7-7-.708.708zM10.5 5a.5.5 0 01-.5-.5H9A1.5 1.5 0 0010.5 6V5zm.5-.5a.5.5 0 01-.5.5v1A1.5 1.5 0 0012 4.5h-1zm-.5-.5a.5.5 0 01.5.5h1A1.5 1.5 0 0010.5 3v1zm0-1A1.5 1.5 0 009 4.5h1a.5.5 0 01.5-.5V3z" fill="currentColor"></path></svg>
          <h2 class="text-lg">Great UI Kit</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        <div>
          <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M4.5 3.5l.354-.354a.5.5 0 00-.708 0L4.5 3.5zM1.5 1h12V0h-12v1zm12.5.5v12h1v-12h-1zM13.5 14h-12v1h12v-1zM1 13.5v-12H0v12h1zm.5.5a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1zm12.5-.5a.5.5 0 01-.5.5v1a1.5 1.5 0 001.5-1.5h-1zM13.5 1a.5.5 0 01.5.5h1A1.5 1.5 0 0013.5 0v1zm-12-1A1.5 1.5 0 000 1.5h1a.5.5 0 01.5-.5V0zm-1 11h14v-1H.5v1zm.354-3.146l4-4-.708-.708-4 4 .708.708zm3.292-4l7 7 .708-.708-7-7-.708.708zM10.5 5a.5.5 0 01-.5-.5H9A1.5 1.5 0 0010.5 6V5zm.5-.5a.5.5 0 01-.5.5v1A1.5 1.5 0 0012 4.5h-1zm-.5-.5a.5.5 0 01.5.5h1A1.5 1.5 0 0010.5 3v1zm0-1A1.5 1.5 0 009 4.5h1a.5.5 0 01.5-.5V3z" fill="currentColor"></path></svg>
          <h2 class="text-lg">Great UI Kit</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        <div>
          <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M4.5 3.5l.354-.354a.5.5 0 00-.708 0L4.5 3.5zM1.5 1h12V0h-12v1zm12.5.5v12h1v-12h-1zM13.5 14h-12v1h12v-1zM1 13.5v-12H0v12h1zm.5.5a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1zm12.5-.5a.5.5 0 01-.5.5v1a1.5 1.5 0 001.5-1.5h-1zM13.5 1a.5.5 0 01.5.5h1A1.5 1.5 0 0013.5 0v1zm-12-1A1.5 1.5 0 000 1.5h1a.5.5 0 01.5-.5V0zm-1 11h14v-1H.5v1zm.354-3.146l4-4-.708-.708-4 4 .708.708zm3.292-4l7 7 .708-.708-7-7-.708.708zM10.5 5a.5.5 0 01-.5-.5H9A1.5 1.5 0 0010.5 6V5zm.5-.5a.5.5 0 01-.5.5v1A1.5 1.5 0 0012 4.5h-1zm-.5-.5a.5.5 0 01.5.5h1A1.5 1.5 0 0010.5 3v1zm0-1A1.5 1.5 0 009 4.5h1a.5.5 0 01.5-.5V3z" fill="currentColor"></path></svg>
          <h2 class="text-lg">Great UI Kit</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/2 mb-6 sm:mb-0">
      <div class="relative">
        <svg viewBox="0 0 602 402" class="text-wireframe"><rect x="1" y="1" width="600" height="400" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/><line x1="1" y1="1" x2="601" y2="401" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/><line x1="601" y1="1" x2="1" y2="401" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/></svg>
        <div class="absolute top-0 bg-wireframe text-white px-2 py-1">Video</div>
      </div>
    </div>
  </div>
</section>

<section class="text-wireframe bg-gray-100 py-12">
  <div class="container md:flex md:items-center md:space-x-24">
    <div class="md:w-1/2">
      <div class="w-full mb-6 sm:mb-0">
        <div class="relative">
          <svg viewBox="0 0 602 402" class="text-wireframe"><rect x="1" y="1" width="600" height="400" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/><line x1="1" y1="1" x2="601" y2="401" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/><line x1="601" y1="1" x2="1" y2="401" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/></svg>
          <div class="absolute top-0 bg-wireframe text-white px-2 py-1">Video</div>
        </div>
      </div>
    </div>
    <div class="md:w-1/2 md:pr-12">
      <h1>Welcome to your new wireframe kit</h1>
      <div class="my-8 flex space-x-4">
        <a href="#" class="border-2 border-wireframe px-4 py-2">Button Title 1</a>
        <a href="#" class="border-2 border-wireframe px-4 py-2">Button Title 2</a>
      </div>
    </div>
  </div>
</section>