Tailwind CSS Grid Components
Responsive Tailwind grid components in HTML
Details About Tailwind CSS Grid Components
Contents
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>