Tailwind CSS Grid Components

Free

Responsive Tailwind grid components in HTML

Tailwind CSS Grid Components Image 1
Details About Tailwind CSS Grid Components

Landing Page Feature Section

<section class="w-full py-12 md:py-24 lg:py-32">
  <div class="container grid items-center justify-center gap-4 px-4 text-center md:px-6 lg:gap-10">
    <div class="space-y-3">
      <h2 class="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Our Key Features</h2>
      <p class="mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
        Discover the powerful features that make our platform the best choice for your business.
      </p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 lg:gap-10">
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
            <circle cx="12" cy="12" r="4"></circle>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Blazing Fast</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our platform delivers lightning-fast performance, ensuring your users have a seamless experience.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <polyline points="18 8 22 12 18 16"></polyline>
            <polyline points="6 8 2 12 6 16"></polyline>
            <line x1="2" x2="22" y1="12" y2="12"></line>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Highly Customizable</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Tailor our platform to your unique needs and preferences with our extensive customization options.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Scalable Infrastructure</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our robust infrastructure scales seamlessly to handle your growing needs, ensuring uninterrupted
            service.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
            <path d="m9 12 2 2 4-4"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Secure and Reliable</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Your data and applications are protected by our robust security measures, giving you peace of mind.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
            <rect width="20" height="14" x="2" y="6" rx="2"></rect>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Enterprise-Grade</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our platform is built to handle the demands of large-scale businesses, ensuring enterprise-level
            performance.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">24/7 Support</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our dedicated support team is available around the clock to assist you with any questions or issues.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"></path>
            <path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"></path>
            <path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Seamless Integration</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Our platform seamlessly integrates with your existing tools and workflows, ensuring a smooth transition.
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4">
        <div class="bg-gray-100 rounded-full p-4 dark:bg-gray-800">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-8 h-8 text-primary"
          >
            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
            <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
            <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
            <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
          </svg>
        </div>
        <div class="grid gap-2">
          <h3 class="font-semibold">Accelerate Innovation</h3>
        </div>
      </div>
    </div>
  </div>
</section>

Grid with Icons

<section class="py-12">
  <div class="container mx-auto px-4">
    <div class="mb-8 text-center">
      <h2 class="text-3xl font-bold">Explore Nature's Wonders</h2>
      <p class="text-gray-500 dark:text-gray-400 mt-2">
        Discover the perfect outdoor experience for every season and mood.
      </p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-yellow-400 mr-2"
          >
            <circle cx="12" cy="12" r="4"></circle>
            <path d="M12 2v2"></path>
            <path d="M12 20v2"></path>
            <path d="m4.93 4.93 1.41 1.41"></path>
            <path d="m17.66 17.66 1.41 1.41"></path>
            <path d="M2 12h2"></path>
            <path d="M20 12h2"></path>
            <path d="m6.34 17.66-1.41 1.41"></path>
            <path d="m19.07 4.93-1.41 1.41"></path>
          </svg>
          <h3 class="text-lg font-semibold">Sunny Days</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Enjoy the warmth and radiance of the sun with our premium outdoor experiences.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-blue-400 mr-2"
          >
            <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path>
            <path d="M16 14v6"></path>
            <path d="M8 14v6"></path>
            <path d="M12 16v6"></path>
          </svg>
          <h3 class="text-lg font-semibold">Rainy Moments</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Embrace the soothing sounds of rain with our cozy indoor activities.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-blue-600 mr-2"
          >
            <line x1="2" x2="22" y1="12" y2="12"></line>
            <line x1="12" x2="12" y1="2" y2="22"></line>
            <path d="m20 16-4-4 4-4"></path>
            <path d="m4 8 4 4-4 4"></path>
            <path d="m16 4-4 4-4-4"></path>
            <path d="m8 20 4-4 4 4"></path>
          </svg>
          <h3 class="text-lg font-semibold">Winter Wonderland</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Embrace the magic of winter with our exciting snow-based adventures.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-green-500 mr-2"
          >
            <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path>
            <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path>
          </svg>
          <h3 class="text-lg font-semibold">Nature's Embrace</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Reconnect with nature through our immersive outdoor experiences.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-6 h-6 text-orange-500 mr-2"
          >
            <circle cx="12" cy="12" r="10"></circle>
            <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
          </svg>
          <h3 class="text-lg font-semibold">Explore the Unknown</h3>
        </div>
        <p class="text-gray-500 dark:text-gray-400">
          Embark on thrilling adventures and discover the world's hidden gems.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center mb-4"></div>
      </div>
    </div>
  </div>
</section>

Featured Tailwind Components

Discover the most popular Tailwind CSS ui components and elements. Browse top-notch Tailwind components to enhance your development process.

Preline UI HOT

Open-source set of prebuilt UI components based on the utility-first Tailwind CSS.