Full width image + Tailwind (marketing pages)

full-width-image.hbs

{{!-- https://github.com/embermap/emberconf2020-tailwind-css-best-practices --}}
<article class="flex flex-col items-center px-4 mt-4">
  <h1 class="w-full max-w-md mx-auto text-xl font-bold">
    Lowest Common Ancestor
  </h1>

  <p class="max-w-md mt-4 text-xs font-medium text-gray-600">
    One of the biggest challenges when writing a JavaScript application is keeping multiple parts of the interface in sync. A user interaction in one part of the interface often affects data in another. If not managed well, this data can end up in multiple places, but with inconsistent values.
  </p>

  <div class="-mx-4">
    <img
      class="object-cover object-bottom w-full h-48 my-6"
      src="https://source.unsplash.com/ots0EOYuGtU"
    />
  </div>

  <p class="max-w-md mt-4 text-xs font-medium text-gray-600">
    In the past few years, the JavaScript community has learned a lot about how to deal with this problem. The solution involves the principle of the Lowest Common Ancestor. To explain this principle, let's look at some interface elements you might build while working on a real-world application.
  </p>

  <p class="max-w-md mt-4 text-xs font-medium text-gray-600">
    Let's say we're building an app with a collapsible panel. If the panel isOpen, we'll show the body. Clicking the title triggers the toggleIsOpen action.
  </p>

  <p class="max-w-md mt-4 text-xs font-medium text-gray-600">
    Currently, our application looks like this. isOpen is the only piece of state in our application that changes. Further, the collapsible panel is the only part of the interface that needs to know about it. Because of this, it makes sense for the panel itself to "own" this piece of application state. So, we'll leave isOpen right where it is - as a simple property on the component.
  </p>
</article>

Thanks!