TailGrids | CodeWorlds

TailGrids - Biblioteka Komponentów Tailwind CSS

Czym jest TailGrids?

TailGrids to kompleksowa biblioteka ponad 500 gotowych komponentów i templates dla Tailwind CSS, stworzona z myślą o developerach i designerach, którzy chcą szybko budować profesjonalne strony internetowe. Projekt oferuje starannie zaprojektowane bloki UI w wersjach HTML, React i Vue, które można łatwo skopiować i dostosować do własnych potrzeb.

TailGrids wyróżnia się na tle konkurencji wysoką jakością designu, responsywnością wszystkich komponentów i kompletnością oferowanych sekcji - od hero sections, przez pricing tables, po kompleksowe landing pages. Biblioteka jest regularnie aktualizowana o nowe komponenty, a społeczność aktywnie rozwija projekt.

Dla zespołów pracujących z Figma, TailGrids oferuje również pliki designerskie, co pozwala na pełną synchronizację między designem a kodem. To sprawia, że TailGrids jest idealnym rozwiązaniem zarówno dla solo developerów, jak i dla agencji tworzących strony dla klientów.

Dlaczego TailGrids?

Kluczowe zalety

500+ komponentów - Ogromna biblioteka gotowych bloków UI
Multi-framework - Wersje HTML, React i Vue
Responsywność - Wszystkie komponenty działają na każdym urządzeniu
Copy-paste - Skopiuj kod i użyj natychmiast
Figma files - Pełne pliki designerskie do edycji
Regular updates - Nowe komponenty co miesiąc
Profesjonalny design - Nowoczesny, czysty wygląd
Dokumentacja - Szczegółowe instrukcje użycia
Darmowa wersja - 200+ komponentów za darmo
Community - Aktywna społeczność i wsparcie

TailGrids vs konkurencja

Cecha	TailGrids	Tailwind UI	Flowbite	DaisyUI
Komponenty	500+	500+	600+	50+
Cena Free	200+	Brak	100+	Wszystkie
React	✅	✅	✅	✅
Vue	✅	✅	✅	❌
Figma	✅	✅	❌	❌
Templates	50+	10+	20+	❌
Dokumentacja	Dobra	Świetna	Bardzo dobra	Dobra
Cena Pro	$49	$299	$149	Free

Kategorie komponentów

Hero Sections

Hero sections to pierwsze sekcje, które widzą użytkownicy. TailGrids oferuje dziesiątki wariantów.

Code

HTML

<!-- Hero z obrazem i CTA -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full px-4 lg:w-1/2">
        <div class="text-center lg:text-left mb-12 lg:mb-0">
          <span class="mb-4 inline-block rounded-full bg-primary/10 px-4 py-2 text-sm font-semibold text-primary">
            New Version Released
          </span>
          <h1 class="mb-4 text-4xl font-bold leading-tight text-dark sm:text-5xl lg:text-[50px] xl:text-[58px]">
            Build Your Next
            <span class="text-primary">SaaS Product</span>
            Faster
          </h1>
          <p class="mb-8 max-w-[500px] text-lg text-body-color lg:max-w-[450px]">
            Launch faster with pre-built components and templates.
            Save weeks of development time.
          </p>
          <div class="flex flex-wrap items-center justify-center lg:justify-start gap-4">
            <a href="#" class="inline-flex items-center justify-center rounded-lg bg-primary px-8 py-4 text-base font-semibold text-white shadow-md hover:bg-primary/90 transition duration-300">
              Get Started Free
              <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
              </svg>
            </a>
            <a href="#" class="inline-flex items-center justify-center rounded-lg border border-stroke px-8 py-4 text-base font-semibold text-dark hover:bg-gray-50 transition duration-300">
              <svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
              Watch Demo
            </a>
          </div>
          <div class="mt-10 flex items-center justify-center lg:justify-start gap-6">
            <div class="flex -space-x-3">
              <img src="user1.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
              <img src="user2.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
              <img src="user3.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
            </div>
            <div>
              <p class="text-sm text-body-color">
                <span class="font-semibold text-dark">5,000+</span> happy customers
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full px-4 lg:w-1/2">
        <div class="relative">
          <img
            src="hero-image.svg"
            alt="hero"
            class="w-full max-w-[600px] mx-auto drop-shadow-2xl"
          />
          <div class="absolute -bottom-8 -left-8 hidden lg:block">
            <div class="rounded-xl bg-white p-4 shadow-lg">
              <div class="flex items-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-green-500/10">
                  <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
                <div>
                  <p class="text-sm font-semibold text-dark">Setup Complete</p>
                  <p class="text-xs text-body-color">Ready to go!</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing Tables

Tabele cenowe to kluczowy element każdej strony SaaS.

Code

HTML

<!-- Pricing Section -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Pricing
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[42px]">
        Simple, Transparent Pricing
      </h2>
      <p class="mx-auto max-w-[500px] text-lg text-body-color">
        Choose the plan that fits your needs. No hidden fees.
      </p>
    </div>

    <div class="flex flex-wrap justify-center -mx-4">
      <!-- Free Plan -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition duration-300">
          <span class="mb-4 block text-lg font-semibold text-primary">
            Starter
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-dark">
            $0
            <span class="text-base font-medium text-body-color">/ month</span>
          </h2>
          <p class="mb-8 border-b border-stroke pb-8 text-base text-body-color">
            Perfect for trying out our platform.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              1 User
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              50 Components
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Community Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg border border-stroke bg-transparent p-4 text-center text-base font-semibold text-dark transition hover:bg-gray-50">
            Get Started Free
          </a>
        </div>
      </div>

      <!-- Pro Plan (Recommended) -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-primary px-8 py-10 shadow-pricing">
          <div class="absolute -top-4 right-8">
            <span class="inline-block rounded-full bg-white px-4 py-1 text-sm font-semibold text-primary shadow-md">
              Most Popular
            </span>
          </div>
          <span class="mb-4 block text-lg font-semibold text-white/80">
            Professional
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-white">
            $49
            <span class="text-base font-medium text-white/70">/ year</span>
          </h2>
          <p class="mb-8 border-b border-white/20 pb-8 text-base text-white/80">
            Perfect for personal site or client project.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              1 User
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              All 500+ Components
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Lifetime Access
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Priority Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg bg-white p-4 text-center text-base font-semibold text-primary transition hover:bg-white/90">
            Choose Professional
          </a>
        </div>
      </div>

      <!-- Business Plan -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition duration-300">
          <span class="mb-4 block text-lg font-semibold text-primary">
            All Access
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-dark">
            $99
            <span class="text-base font-medium text-body-color">/ year</span>
          </h2>
          <p class="mb-8 border-b border-stroke pb-8 text-base text-body-color">
            Everything you need for your business.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              5 Users
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              All Components + Templates
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Figma Files Included
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Dedicated Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg border border-primary bg-transparent p-4 text-center text-base font-semibold text-primary transition hover:bg-primary hover:text-white">
            Choose All Access
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Features Grid

Sekcje features pokazują kluczowe funkcje produktu.

Code

HTML

<!-- Features Grid -->
<section class="bg-gray-50 py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Features
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[42px]">
        Everything You Need
      </h2>
      <p class="mx-auto max-w-[500px] text-lg text-body-color">
        Powerful features to help you build amazing products.
      </p>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Feature 1 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Lightning Fast
        </h3>
        <p class="text-body-color leading-relaxed">
          Optimized for performance. Your website will load in milliseconds,
          providing the best user experience.
        </p>
      </div>

      <!-- Feature 2 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Fully Responsive
        </h3>
        <p class="text-body-color leading-relaxed">
          Every component is designed mobile-first and works perfectly
          on all screen sizes and devices.
        </p>
      </div>

      <!-- Feature 3 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Clean Code
        </h3>
        <p class="text-body-color leading-relaxed">
          Well-structured, semantic HTML with Tailwind CSS.
          Easy to understand and customize.
        </p>
      </div>

      <!-- Feature 4 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          500+ Components
        </h3>
        <p class="text-body-color leading-relaxed">
          Massive library of UI components covering every use case
          for modern web applications.
        </p>
      </div>

      <!-- Feature 5 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Easy Customization
        </h3>
        <p class="text-body-color leading-relaxed">
          Customize colors, fonts, and styles easily with Tailwind CSS
          configuration and utilities.
        </p>
      </div>

      <!-- Feature 6 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Regular Updates
        </h3>
        <p class="text-body-color leading-relaxed">
          New components and features added regularly.
          Stay up-to-date with the latest design trends.
        </p>
      </div>
    </div>
  </div>
</section>

Navigation / Header

Code

HTML

<!-- Sticky Header with Dropdown -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between py-4">
      <!-- Logo -->
      <a href="/" class="flex items-center">
        <img src="logo.svg" alt="Logo" class="h-8" />
      </a>

      <!-- Desktop Navigation -->
      <nav class="hidden lg:flex items-center gap-8">
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Home
        </a>
        <div class="relative group">
          <button class="flex items-center gap-1 text-base font-medium text-dark hover:text-primary transition">
            Products
            <svg class="w-4 h-4 transition group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <!-- Dropdown -->
          <div class="absolute left-0 top-full pt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <div class="w-60 rounded-lg bg-white p-4 shadow-lg border border-stroke">
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Components
              </a>
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Templates
              </a>
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Figma Files
              </a>
            </div>
          </div>
        </div>
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Pricing
        </a>
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Blog
        </a>
      </nav>

      <!-- CTA Buttons -->
      <div class="hidden lg:flex items-center gap-4">
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Sign In
        </a>
        <a href="#" class="rounded-lg bg-primary px-6 py-2.5 text-base font-medium text-white hover:bg-primary/90 transition">
          Get Started
        </a>
      </div>

      <!-- Mobile Menu Button -->
      <button class="lg:hidden p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</header>

Testimonials

Code

HTML

<!-- Testimonials Section -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Testimonials
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl">
        What Our Customers Say
      </h2>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Testimonial Card -->
      <div class="rounded-xl bg-gray-50 p-8">
        <div class="mb-6 flex items-center">
          <img src="user.jpg" alt="User" class="w-14 h-14 rounded-full mr-4" />
          <div>
            <h4 class="text-lg font-semibold text-dark">John Doe</h4>
            <p class="text-sm text-body-color">CEO at Company</p>
          </div>
        </div>
        <p class="text-body-color leading-relaxed mb-6">
          "TailGrids has saved us countless hours of development time.
          The components are beautiful and well-documented."
        </p>
        <div class="flex items-center gap-1 text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
            <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
          </svg>
          <!-- Repeat stars -->
        </div>
      </div>
      <!-- More testimonial cards... -->
    </div>
  </div>
</section>

Wersje frameworkowe

React Components

TScomponents/Hero.tsx

TypeScript

// components/Hero.tsx
import React from 'react'

interface HeroProps {
  title: string
  subtitle: string
  ctaText: string
  ctaLink: string
}

export function Hero({ title, subtitle, ctaText, ctaLink }: HeroProps) {
  return (
    <section className="bg-white py-20 lg:py-[120px]">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="mb-4 text-4xl font-bold text-dark sm:text-5xl lg:text-6xl">
            {title}
          </h1>
          <p className="mb-8 text-lg text-body-color">
            {subtitle}
          </p>
          <a
            href={ctaLink}
            className="inline-flex items-center rounded-lg bg-primary px-8 py-4 text-base font-semibold text-white hover:bg-primary/90 transition"
          >
            {ctaText}
          </a>
        </div>
      </div>
    </section>
  )
}

Vue Components

components/PricingCard.vue

VUE

<!-- components/PricingCard.vue -->
<template>
  <div
    class="rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition"
    :class="{ 'bg-primary': featured }"
  >
    <span class="mb-4 block text-lg font-semibold" :class="featured ? 'text-white/80' : 'text-primary'">
      {{ plan }}
    </span>
    <h2 class="mb-5 text-[42px] font-bold" :class="featured ? 'text-white' : 'text-dark'">
      ${{ price }}
      <span class="text-base font-medium" :class="featured ? 'text-white/70' : 'text-body-color'">
        / {{ period }}
      </span>
    </h2>
    <ul class="mb-9 flex flex-col gap-4">
      <li
        v-for="feature in features"
        :key="feature"
        class="flex items-center text-base"
        :class="featured ? 'text-white' : 'text-body-color'"
      >
        <CheckIcon :class="featured ? 'text-white' : 'text-primary'" />
        {{ feature }}
      </li>
    </ul>
    <button
      class="block w-full rounded-lg p-4 text-center font-semibold transition"
      :class="featured ? 'bg-white text-primary hover:bg-white/90' : 'border border-primary text-primary hover:bg-primary hover:text-white'"
    >
      {{ ctaText }}
    </button>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  plan: string
  price: number
  period: string
  features: string[]
  ctaText: string
  featured?: boolean
}>()
</script>

Integracja z projektami

Next.js Setup

Code

Bash

# 1. Stwórz projekt Next.js z Tailwind
npx create-next-app@latest my-app --typescript --tailwind
cd my-app

# 2. Skopiuj komponenty TailGrids do src/components/
# 3. Dostosuj tailwind.config.ts

TStailwind.config.ts

TypeScript

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        dark: '#1E293B',
        'body-color': '#64748B',
        stroke: '#E2E8F0',
      },
      boxShadow: {
        pricing: '0 5px 20px 0 rgba(0, 0, 0, 0.05)',
      },
    },
  },
  plugins: [],
}

export default config

Customizacja kolorów

TStailwind.config.ts

TypeScript

// tailwind.config.ts - Custom color scheme
const config: Config = {
  theme: {
    extend: {
      colors: {
        // Zmień primary na swój brand color
        primary: {
          DEFAULT: '#6366F1', // Indigo
          50: '#EEF2FF',
          100: '#E0E7FF',
          500: '#6366F1',
          600: '#4F46E5',
          700: '#4338CA',
        },
        // Custom dark shades
        dark: {
          DEFAULT: '#0F172A',
          50: '#1E293B',
          100: '#334155',
        },
      },
    },
  },
}

Pełna lista kategorii komponentów

TailGrids oferuje komponenty w następujących kategoriach:

Layout & Structure

Headers/Navbars (25+ wariantów)
Footers (20+ wariantów)
Sidebars (15+ wariantów)
Grids & Containers (10+ wariantów)

Content Sections

Hero Sections (30+ wariantów)
Features (25+ wariantów)
About/Team (20+ wariantów)
Testimonials (15+ wariantów)
Stats/Counters (10+ wariantów)

Marketing

Pricing Tables (20+ wariantów)
Call to Action (15+ wariantów)
Newsletters (10+ wariantów)
Banners (15+ wariantów)

E-commerce

Product Cards (20+ wariantów)
Product Grids (10+ wariantów)
Cart Components (10+ wariantów)
Checkout Forms (5+ wariantów)

Forms & Inputs

Contact Forms (15+ wariantów)
Login/Register (20+ wariantów)
Input Fields (30+ wariantów)
Buttons (40+ wariantów)

UI Elements

Cards (50+ wariantów)
Modals (15+ wariantów)
Tabs (10+ wariantów)
Accordions (10+ wariantów)
Alerts (15+ wariantów)
Badges (20+ wariantów)

Blog

Blog Cards (15+ wariantów)
Blog Lists (10+ wariantów)
Article Layouts (5+ wariantów)

Cennik

Plan	Cena	Zawiera
Free	$0	200+ komponentów, HTML only
Pro	$49 (lifetime)	500+ komponentów, React/Vue/HTML
All Access	$99 (lifetime)	Wszystko + 50 templates + Figma files
Team	$199 (lifetime)	All Access dla 5 użytkowników

Wszystkie plany płatne zawierają:

Lifetime access
Darmowe aktualizacje
Priority support

FAQ - Najczęściej zadawane pytania

Czy mogę używać TailGrids w projektach komercyjnych?

Tak, wszystkie plany (włącznie z Free) pozwalają na użycie w projektach komercyjnych. Plan Free wymaga zachowania linku do TailGrids w footerze.

Czy komponenty są responsywne?

Tak, wszystkie komponenty są zaprojektowane mobile-first i działają na wszystkich rozmiarach ekranu.

Czy potrzebuję doświadczenia z Tailwind CSS?

Podstawowa znajomość Tailwind CSS jest pomocna, ale nie wymagana. Komponenty są gotowe do użycia - wystarczy skopiować kod.

Czy dostanę aktualizacje?

Tak, wszystkie plany płatne zawierają dożywotnie aktualizacje. Nowe komponenty są dodawane co miesiąc.

Czy mogę używać z innymi frameworkami?

TailGrids oferuje wersje dla React, Vue i czystego HTML. Dla innych frameworków możesz używać wersji HTML i dostosować.

Jak działa licencja dla zespołów?

Plan Team pozwala na użycie przez 5 członków zespołu w dowolnej liczbie projektów.

Podsumowanie

TailGrids to kompletna biblioteka komponentów Tailwind CSS:

500+ komponentów w 30+ kategoriach
React, Vue i HTML - wybierz swój framework
50+ templates - kompletne landing pages
Figma files - dla designerów
Copy-paste - szybka integracja
Responsywność - mobile-first design
Lifetime license - jednorazowa opłata

TailGrids to idealne rozwiązanie dla developerów i agencji, którzy chcą szybko budować profesjonalne strony z Tailwind CSS.

TailGrids - Tailwind CSS component library

What is TailGrids?

TailGrids is a comprehensive library of over 500 ready-made components and templates for Tailwind CSS, built with developers and designers in mind who want to quickly build professional websites. The project offers carefully designed UI blocks in HTML, React, and Vue versions that you can easily copy and adapt to your own needs.

TailGrids stands out from the competition with its high design quality, responsiveness of all components, and completeness of the offered sections - from hero sections, through pricing tables, to comprehensive landing pages. The library is regularly updated with new components, and the community actively develops the project.

For teams working with Figma, TailGrids also offers design files, allowing for full synchronization between design and code. This makes TailGrids an ideal solution for both solo developers and agencies building websites for clients.

Why TailGrids?

Key advantages

500+ components - A massive library of ready-made UI blocks
Multi-framework - HTML, React, and Vue versions
Responsiveness - All components work on every device
Copy-paste - Copy the code and use it immediately
Figma files - Full design files for editing
Regular updates - New components every month
Professional design - Modern, clean look
Documentation - Detailed usage instructions
Free version - 200+ components for free
Community - Active community and support

TailGrids vs the competition

Feature	TailGrids	Tailwind UI	Flowbite	DaisyUI
Components	500+	500+	600+	50+
Free tier	200+	None	100+	All
React	✅	✅	✅	✅
Vue	✅	✅	✅	❌
Figma	✅	✅	❌	❌
Templates	50+	10+	20+	❌
Documentation	Good	Excellent	Very good	Good
Pro price	$49	$299	$149	Free

Component categories

Hero Sections

Hero sections are the first sections that users see. TailGrids offers dozens of variants.

Code

HTML

<!-- Hero with image and CTA -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full px-4 lg:w-1/2">
        <div class="text-center lg:text-left mb-12 lg:mb-0">
          <span class="mb-4 inline-block rounded-full bg-primary/10 px-4 py-2 text-sm font-semibold text-primary">
            New Version Released
          </span>
          <h1 class="mb-4 text-4xl font-bold leading-tight text-dark sm:text-5xl lg:text-[50px] xl:text-[58px]">
            Build Your Next
            <span class="text-primary">SaaS Product</span>
            Faster
          </h1>
          <p class="mb-8 max-w-[500px] text-lg text-body-color lg:max-w-[450px]">
            Launch faster with pre-built components and templates.
            Save weeks of development time.
          </p>
          <div class="flex flex-wrap items-center justify-center lg:justify-start gap-4">
            <a href="#" class="inline-flex items-center justify-center rounded-lg bg-primary px-8 py-4 text-base font-semibold text-white shadow-md hover:bg-primary/90 transition duration-300">
              Get Started Free
              <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
              </svg>
            </a>
            <a href="#" class="inline-flex items-center justify-center rounded-lg border border-stroke px-8 py-4 text-base font-semibold text-dark hover:bg-gray-50 transition duration-300">
              <svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
              Watch Demo
            </a>
          </div>
          <div class="mt-10 flex items-center justify-center lg:justify-start gap-6">
            <div class="flex -space-x-3">
              <img src="user1.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
              <img src="user2.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
              <img src="user3.jpg" alt="user" class="w-10 h-10 rounded-full border-2 border-white" />
            </div>
            <div>
              <p class="text-sm text-body-color">
                <span class="font-semibold text-dark">5,000+</span> happy customers
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full px-4 lg:w-1/2">
        <div class="relative">
          <img
            src="hero-image.svg"
            alt="hero"
            class="w-full max-w-[600px] mx-auto drop-shadow-2xl"
          />
          <div class="absolute -bottom-8 -left-8 hidden lg:block">
            <div class="rounded-xl bg-white p-4 shadow-lg">
              <div class="flex items-center gap-3">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-green-500/10">
                  <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
                <div>
                  <p class="text-sm font-semibold text-dark">Setup Complete</p>
                  <p class="text-xs text-body-color">Ready to go!</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing Tables

Pricing tables are a key element of any SaaS website.

Code

HTML

<!-- Pricing Section -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Pricing
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[42px]">
        Simple, Transparent Pricing
      </h2>
      <p class="mx-auto max-w-[500px] text-lg text-body-color">
        Choose the plan that fits your needs. No hidden fees.
      </p>
    </div>

    <div class="flex flex-wrap justify-center -mx-4">
      <!-- Free Plan -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition duration-300">
          <span class="mb-4 block text-lg font-semibold text-primary">
            Starter
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-dark">
            $0
            <span class="text-base font-medium text-body-color">/ month</span>
          </h2>
          <p class="mb-8 border-b border-stroke pb-8 text-base text-body-color">
            Perfect for trying out our platform.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              1 User
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              50 Components
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Community Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg border border-stroke bg-transparent p-4 text-center text-base font-semibold text-dark transition hover:bg-gray-50">
            Get Started Free
          </a>
        </div>
      </div>

      <!-- Pro Plan (Recommended) -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-primary px-8 py-10 shadow-pricing">
          <div class="absolute -top-4 right-8">
            <span class="inline-block rounded-full bg-white px-4 py-1 text-sm font-semibold text-primary shadow-md">
              Most Popular
            </span>
          </div>
          <span class="mb-4 block text-lg font-semibold text-white/80">
            Professional
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-white">
            $49
            <span class="text-base font-medium text-white/70">/ year</span>
          </h2>
          <p class="mb-8 border-b border-white/20 pb-8 text-base text-white/80">
            Perfect for personal site or client project.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              1 User
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              All 500+ Components
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Lifetime Access
            </p>
            <p class="flex items-center text-base text-white">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Priority Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg bg-white p-4 text-center text-base font-semibold text-primary transition hover:bg-white/90">
            Choose Professional
          </a>
        </div>
      </div>

      <!-- Business Plan -->
      <div class="w-full px-4 md:w-1/2 lg:w-1/3">
        <div class="relative mb-10 rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition duration-300">
          <span class="mb-4 block text-lg font-semibold text-primary">
            All Access
          </span>
          <h2 class="mb-5 text-[42px] font-bold text-dark">
            $99
            <span class="text-base font-medium text-body-color">/ year</span>
          </h2>
          <p class="mb-8 border-b border-stroke pb-8 text-base text-body-color">
            Everything you need for your business.
          </p>
          <div class="mb-9 flex flex-col gap-4">
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              5 Users
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              All Components + Templates
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Figma Files Included
            </p>
            <p class="flex items-center text-base text-body-color">
              <span class="mr-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
              </span>
              Dedicated Support
            </p>
          </div>
          <a href="#" class="block w-full rounded-lg border border-primary bg-transparent p-4 text-center text-base font-semibold text-primary transition hover:bg-primary hover:text-white">
            Choose All Access
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Features Grid

Features sections showcase the key capabilities of a product.

Code

HTML

<!-- Features Grid -->
<section class="bg-gray-50 py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Features
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[42px]">
        Everything You Need
      </h2>
      <p class="mx-auto max-w-[500px] text-lg text-body-color">
        Powerful features to help you build amazing products.
      </p>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Feature 1 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Lightning Fast
        </h3>
        <p class="text-body-color leading-relaxed">
          Optimized for performance. Your website will load in milliseconds,
          providing the best user experience.
        </p>
      </div>

      <!-- Feature 2 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Fully Responsive
        </h3>
        <p class="text-body-color leading-relaxed">
          Every component is designed mobile-first and works perfectly
          on all screen sizes and devices.
        </p>
      </div>

      <!-- Feature 3 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Clean Code
        </h3>
        <p class="text-body-color leading-relaxed">
          Well-structured, semantic HTML with Tailwind CSS.
          Easy to understand and customize.
        </p>
      </div>

      <!-- Feature 4 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          500+ Components
        </h3>
        <p class="text-body-color leading-relaxed">
          Massive library of UI components covering every use case
          for modern web applications.
        </p>
      </div>

      <!-- Feature 5 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Easy Customization
        </h3>
        <p class="text-body-color leading-relaxed">
          Customize colors, fonts, and styles easily with Tailwind CSS
          configuration and utilities.
        </p>
      </div>

      <!-- Feature 6 -->
      <div class="group rounded-xl bg-white p-8 shadow-sm hover:shadow-lg transition duration-300">
        <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition duration-300">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
        </div>
        <h3 class="mb-3 text-xl font-semibold text-dark">
          Regular Updates
        </h3>
        <p class="text-body-color leading-relaxed">
          New components and features added regularly.
          Stay up-to-date with the latest design trends.
        </p>
      </div>
    </div>
  </div>
</section>

Navigation / Header

Code

HTML

<!-- Sticky Header with Dropdown -->
<header class="sticky top-0 z-50 bg-white shadow-sm">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between py-4">
      <!-- Logo -->
      <a href="/" class="flex items-center">
        <img src="logo.svg" alt="Logo" class="h-8" />
      </a>

      <!-- Desktop Navigation -->
      <nav class="hidden lg:flex items-center gap-8">
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Home
        </a>
        <div class="relative group">
          <button class="flex items-center gap-1 text-base font-medium text-dark hover:text-primary transition">
            Products
            <svg class="w-4 h-4 transition group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          <!-- Dropdown -->
          <div class="absolute left-0 top-full pt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <div class="w-60 rounded-lg bg-white p-4 shadow-lg border border-stroke">
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Components
              </a>
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Templates
              </a>
              <a href="#" class="block rounded-md px-4 py-2 text-sm text-dark hover:bg-gray-50">
                Figma Files
              </a>
            </div>
          </div>
        </div>
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Pricing
        </a>
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Blog
        </a>
      </nav>

      <!-- CTA Buttons -->
      <div class="hidden lg:flex items-center gap-4">
        <a href="#" class="text-base font-medium text-dark hover:text-primary transition">
          Sign In
        </a>
        <a href="#" class="rounded-lg bg-primary px-6 py-2.5 text-base font-medium text-white hover:bg-primary/90 transition">
          Get Started
        </a>
      </div>

      <!-- Mobile Menu Button -->
      <button class="lg:hidden p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</header>

Testimonials

Code

HTML

<!-- Testimonials Section -->
<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto px-4">
    <div class="text-center mb-16">
      <span class="mb-4 block text-lg font-semibold text-primary">
        Testimonials
      </span>
      <h2 class="mb-4 text-3xl font-bold text-dark sm:text-4xl">
        What Our Customers Say
      </h2>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Testimonial Card -->
      <div class="rounded-xl bg-gray-50 p-8">
        <div class="mb-6 flex items-center">
          <img src="user.jpg" alt="User" class="w-14 h-14 rounded-full mr-4" />
          <div>
            <h4 class="text-lg font-semibold text-dark">John Doe</h4>
            <p class="text-sm text-body-color">CEO at Company</p>
          </div>
        </div>
        <p class="text-body-color leading-relaxed mb-6">
          "TailGrids has saved us countless hours of development time.
          The components are beautiful and well-documented."
        </p>
        <div class="flex items-center gap-1 text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
            <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
          </svg>
          <!-- Repeat stars -->
        </div>
      </div>
      <!-- More testimonial cards... -->
    </div>
  </div>
</section>

Framework versions

React Components

TScomponents/Hero.tsx

TypeScript

// components/Hero.tsx
import React from 'react'

interface HeroProps {
  title: string
  subtitle: string
  ctaText: string
  ctaLink: string
}

export function Hero({ title, subtitle, ctaText, ctaLink }: HeroProps) {
  return (
    <section className="bg-white py-20 lg:py-[120px]">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="mb-4 text-4xl font-bold text-dark sm:text-5xl lg:text-6xl">
            {title}
          </h1>
          <p className="mb-8 text-lg text-body-color">
            {subtitle}
          </p>
          <a
            href={ctaLink}
            className="inline-flex items-center rounded-lg bg-primary px-8 py-4 text-base font-semibold text-white hover:bg-primary/90 transition"
          >
            {ctaText}
          </a>
        </div>
      </div>
    </section>
  )
}

Vue Components

components/PricingCard.vue

VUE

<!-- components/PricingCard.vue -->
<template>
  <div
    class="rounded-xl bg-white px-8 py-10 shadow-pricing border border-stroke hover:border-primary transition"
    :class="{ 'bg-primary': featured }"
  >
    <span class="mb-4 block text-lg font-semibold" :class="featured ? 'text-white/80' : 'text-primary'">
      {{ plan }}
    </span>
    <h2 class="mb-5 text-[42px] font-bold" :class="featured ? 'text-white' : 'text-dark'">
      ${{ price }}
      <span class="text-base font-medium" :class="featured ? 'text-white/70' : 'text-body-color'">
        / {{ period }}
      </span>
    </h2>
    <ul class="mb-9 flex flex-col gap-4">
      <li
        v-for="feature in features"
        :key="feature"
        class="flex items-center text-base"
        :class="featured ? 'text-white' : 'text-body-color'"
      >
        <CheckIcon :class="featured ? 'text-white' : 'text-primary'" />
        {{ feature }}
      </li>
    </ul>
    <button
      class="block w-full rounded-lg p-4 text-center font-semibold transition"
      :class="featured ? 'bg-white text-primary hover:bg-white/90' : 'border border-primary text-primary hover:bg-primary hover:text-white'"
    >
      {{ ctaText }}
    </button>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  plan: string
  price: number
  period: string
  features: string[]
  ctaText: string
  featured?: boolean
}>()
</script>

Project integration

Next.js setup

Code

Bash

# 1. Create a Next.js project with Tailwind
npx create-next-app@latest my-app --typescript --tailwind
cd my-app

# 2. Copy TailGrids components to src/components/
# 3. Adjust tailwind.config.ts

TStailwind.config.ts

TypeScript

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        dark: '#1E293B',
        'body-color': '#64748B',
        stroke: '#E2E8F0',
      },
      boxShadow: {
        pricing: '0 5px 20px 0 rgba(0, 0, 0, 0.05)',
      },
    },
  },
  plugins: [],
}

export default config

Color customization

TStailwind.config.ts

TypeScript

// tailwind.config.ts - Custom color scheme
const config: Config = {
  theme: {
    extend: {
      colors: {
        // Change primary to your brand color
        primary: {
          DEFAULT: '#6366F1', // Indigo
          50: '#EEF2FF',
          100: '#E0E7FF',
          500: '#6366F1',
          600: '#4F46E5',
          700: '#4338CA',
        },
        // Custom dark shades
        dark: {
          DEFAULT: '#0F172A',
          50: '#1E293B',
          100: '#334155',
        },
      },
    },
  },
}

Full list of component categories

TailGrids offers components in the following categories:

Layout & Structure

Headers/Navbars (25+ variants)
Footers (20+ variants)
Sidebars (15+ variants)
Grids & Containers (10+ variants)

Content Sections

Hero Sections (30+ variants)
Features (25+ variants)
About/Team (20+ variants)
Testimonials (15+ variants)
Stats/Counters (10+ variants)

Marketing

Pricing Tables (20+ variants)
Call to Action (15+ variants)
Newsletters (10+ variants)
Banners (15+ variants)

E-commerce

Product Cards (20+ variants)
Product Grids (10+ variants)
Cart Components (10+ variants)
Checkout Forms (5+ variants)

Forms & Inputs

Contact Forms (15+ variants)
Login/Register (20+ variants)
Input Fields (30+ variants)
Buttons (40+ variants)

UI Elements

Cards (50+ variants)
Modals (15+ variants)
Tabs (10+ variants)
Accordions (10+ variants)
Alerts (15+ variants)
Badges (20+ variants)

Blog

Blog Cards (15+ variants)
Blog Lists (10+ variants)
Article Layouts (5+ variants)

Pricing

Plan	Price	Includes
Free	$0	200+ components, HTML only
Pro	$49 (lifetime)	500+ components, React/Vue/HTML
All Access	$99 (lifetime)	Everything + 50 templates + Figma files
Team	$199 (lifetime)	All Access for 5 users

All paid plans include:

Lifetime access
Free updates
Priority support

FAQ - frequently asked questions

Can I use TailGrids in commercial projects?

Yes, all plans (including Free) allow usage in commercial projects. The Free plan requires keeping a link to TailGrids in the footer.

Are the components responsive?

Yes, all components are designed mobile-first and work on all screen sizes.

Do I need experience with Tailwind CSS?

Basic knowledge of Tailwind CSS is helpful but not required. The components are ready to use - just copy the code.

Will I get updates?

Yes, all paid plans include lifetime updates. New components are added every month.

Can I use it with other frameworks?

TailGrids offers versions for React, Vue, and plain HTML. For other frameworks, you can use the HTML version and adapt it.

How does the team license work?

The Team plan allows usage by 5 team members on any number of projects.

Summary

TailGrids is a complete Tailwind CSS component library:

500+ components across 30+ categories
React, Vue, and HTML - choose your framework
50+ templates - complete landing pages
Figma files - for designers
Copy-paste - fast integration
Responsiveness - mobile-first design
Lifetime license - one-time payment

TailGrids is the ideal solution for developers and agencies who want to quickly build professional websites with Tailwind CSS.