xNvLjz

index.html

<div class="antialiased p-16 bg-gray-800">
  <div class="max-w-6xl mx-auto">

    <div class="bg-gray-100 relative flex">
      <div class="w-7/12 px-20 py-24">
        <svg class="w-48" viewBox="0 0 185 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.854 28.18h3.768l3.144-11.088 3.168 11.088h3.768l4.704-16.8h-3.48L72.71 23.836 69.182 11.38H66.35l-3.504 12.456L59.63 11.38h-3.48l4.704 16.8zM85.465 28.516c3.528 0 6.36-2.76 6.36-6.336 0-3.576-2.832-6.336-6.36-6.336-3.528 0-6.336 2.76-6.336 6.336 0 3.576 2.808 6.336 6.336 6.336zm0-3.024c-1.824 0-3.24-1.368-3.24-3.312 0-1.944 1.416-3.312 3.24-3.312 1.848 0 3.264 1.368 3.264 3.312 0 1.944-1.416 3.312-3.264 3.312zM97.1 18.244V16.18h-3.097v12H97.1v-5.736c0-2.52 2.04-3.24 3.648-3.048V15.94c-1.512 0-3.024.672-3.648 2.304zM113.622 28.18l-4.968-6.072 4.824-5.928h-3.696l-4.128 5.28V11.38h-3.096v16.8h3.096v-5.448l4.368 5.448h3.6z" fill="#2D3748"/><path d="M120.879 28.516c2.352 0 4.392-1.248 5.424-3.12l-2.688-1.536c-.48.984-1.512 1.584-2.76 1.584-1.848 0-3.216-1.368-3.216-3.264 0-1.92 1.368-3.288 3.216-3.288 1.224 0 2.256.624 2.736 1.608l2.664-1.56c-.984-1.848-3.024-3.096-5.376-3.096-3.648 0-6.336 2.76-6.336 6.336 0 3.576 2.688 6.336 6.336 6.336zM136.873 16.18v1.416c-.864-1.08-2.16-1.752-3.912-1.752-3.192 0-5.832 2.76-5.832 6.336 0 3.576 2.64 6.336 5.832 6.336 1.752 0 3.048-.672 3.912-1.752v1.416h3.096v-12h-3.096zm-3.336 9.384c-1.896 0-3.312-1.368-3.312-3.384s1.416-3.384 3.312-3.384c1.92 0 3.336 1.368 3.336 3.384s-1.416 3.384-3.336 3.384zM149.64 19.156V16.18h-2.712v-3.36l-3.096.936v2.424h-2.088v2.976h2.088v4.992c0 3.24 1.464 4.512 5.808 4.032v-2.808c-1.776.096-2.712.072-2.712-1.224v-4.992h2.712zM153.359 14.74c1.056 0 1.92-.864 1.92-1.896s-.864-1.92-1.92-1.92c-1.032 0-1.896.888-1.896 1.92s.864 1.896 1.896 1.896zm-1.536 13.44h3.096v-12h-3.096v12zM163.465 28.516c3.528 0 6.36-2.76 6.36-6.336 0-3.576-2.832-6.336-6.36-6.336-3.528 0-6.336 2.76-6.336 6.336 0 3.576 2.808 6.336 6.336 6.336zm0-3.024c-1.824 0-3.24-1.368-3.24-3.312 0-1.944 1.416-3.312 3.24-3.312 1.848 0 3.264 1.368 3.264 3.312 0 1.944-1.416 3.312-3.264 3.312zM178.675 15.844c-1.608 0-2.856.6-3.576 1.68V16.18h-3.096v12h3.096V21.7c0-2.088 1.128-2.976 2.64-2.976 1.392 0 2.376.84 2.376 2.472v6.984h3.096v-7.368c0-3.192-1.992-4.968-4.536-4.968z" fill="#667EEA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M43.701 12.784L36.003 8.34v20.645h9v2h-44v-2h4v-12.72l-3.728.933-.485-1.94 21.09-5.273h3.122a9.547 9.547 0 0 0-.68 2.559l-.482 3.975 5.163-2.981v15.447h5V8.341l-7.696 4.444a7.502 7.502 0 0 1 2.565-4.8h-4.12a7.489 7.489 0 0 1 6.646-2.972l-5.591-3.23a7.488 7.488 0 0 1 6.696.403c1.039.6 1.88 1.41 2.5 2.347a7.461 7.461 0 0 1 2.5-2.347 7.49 7.49 0 0 1 6.698-.402l-5.593 3.229a7.488 7.488 0 0 1 6.646 2.973h-4.12a7.5 7.5 0 0 1 2.567 4.798zM25.003 28.985v-10h-6v10h6zm-11-8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" fill="#667EEA"/></svg>
        <h1 class="mt-12 text-4xl font-bold text-gray-900 leading-tight">
          You can work from anywhere.
          <span class="text-indigo-500 block">Take advantage of it.</span>
        </h1>
        <p class="mt-6 text-xl text-gray-600">
          Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy some nice weather even when you’re not on vacation.
        </p>
        <a href="#" class="mt-12 inline-block bg-indigo-500 text-white font-semibold shadow-lg uppercase tracking-wider px-4 py-3 rounded-lg">Book your escape</a>
      </div>
      <div class="flex-1 relative bg-left bg-cover bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1455102979059-35ac2b150ba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80');">
        <svg class="absolute inset-y-0 left-0 w-16 h-full fill-current text-gray-100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
          <polygon points="0,0 100,0 0,100" />
        </svg>
      </div>
    </div>
  </div>
</div>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.2/tailwind.min.css" rel="stylesheet" />

xnvljz.markdown

xNvLjz

A Pen by Adam Wathan on CodePen.

License.