Equal Height Column Grid

Tailwind v1.1.0

Tailwind v1.1.0 has been released with some cool new features and a couple of bug fixes. This is the first feature release since the v1.0 release, so let's dig into some of the updates.

View article

Getting Started with Tailwind CSS Custom Forms

In this tutorial, I show you how to install the Tailwind CSS Custom Forms plugin and get started using it.

View article

11 Benefits of Tailwind CSS

I've been using Tailwind CSS professionally almost every day for nearly two years. Here I share some of the benefits I've gained by using Tailwind.

View article
<!-- Source: https://laravel-news.com/tailwind-css-tips-and-tricks -->
<!-- The negative margin -mx-4 in the row container must match the horizontal padding p-4 in the column containers. -->
<!-- Container -->
<div class="max-w-screen-xl mx-auto bg-gray-200 p-6 lg:p-32">
  <!-- Row -->
  <div class="-mx-4 flex flex-wrap">
    <!-- Grid column -->
    <div class="w-full flex flex-col p-4 xl:w-1/3">
      <!-- Column contents -->
      <div class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">
        <div class="flex-1">
          <h2 class="text-gray-900 text-lg font-bold leading-snug">
            Tailwind v1.1.0
          </h2>
          <p class="mt-2 text-base">
            Tailwind v1.1.0 has been released with some cool new features and a
            couple of bug fixes. This is the first feature release since the
            v1.0 release, so let's dig into some of the updates.
          </p>
        </div>
        <a href="#" class="mt-6 inline-flex items-center justify-center px-6 py-3 text-white font-semibold bg-gray-700 hover:bg-black rounded-md shadow-sm">
          View article
        </a>
      </div>
    </div>
    <!-- Grid column -->
    <div class="w-full flex flex-col p-4 xl:w-1/3">
      <!-- Column contents -->
      <div class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">
        <div class="flex-1">
          <h2 class="text-gray-900 text-lg font-bold leading-snug">
            Getting Started with Tailwind CSS Custom Forms
          </h2>
          <p class="mt-2 text-base">
            In this tutorial, I show you how to install the Tailwind CSS Custom
            Forms plugin and get started using it.
          </p>
        </div>
        <a href="#" class="mt-6 inline-flex items-center justify-center px-6 py-3 text-white font-semibold bg-gray-700 hover:bg-black rounded-md shadow-sm">
          View article
        </a>
      </div>
    </div>
    <!-- Grid column -->
    <div class="w-full flex flex-col p-4 xl:w-1/3">
      <!-- Column contents -->
      <div class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">
        <div class="flex-1">
          <h2 class="text-gray-900 text-lg font-bold leading-snug">
            11 Benefits of Tailwind CSS
          </h2>
          <p class="mt-2 text-base">
            I've been using Tailwind CSS professionally almost every day for
            nearly two years. Here I share some of the benefits I've gained by
            using Tailwind.
          </p>
        </div>
        <a href="#" class="mt-6 inline-flex items-center justify-center px-6 py-3 text-white font-semibold bg-gray-700 hover:bg-black rounded-md shadow-sm">
          View article
        </a>
      </div>
    </div>
  </div>
</div>