Kinetiq Features Features Block - Let's templates
Unlock every premium block and template with All-Access from $20 / 3 months, cancel anytime. Get All-Access
All blocks
Free Features

Kinetiq Features

A features block extracted from the Kinetiq template, available in Tailwind CSS and Bootstrap.

0 1
Demo Download
Kinetiq Features preview
kinetiq.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    window.FontAwesomeConfig = { autoReplaceSvg: 'nest' };
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kinetiq Features | Tailwind CSS UI Block</title>
  <meta name="description" content="A features block extracted from the Kinetiq template, available in Tailwind CSS and Bootstrap.">
  <meta name="keywords" content="Kinetiq, Tailwind CSS template, HTML website template, consulting template, startup accelerator website, innovation consultancy, venture studio, corporate innovation, team page, newsletter signup">
  <meta name="author" content="Let's templates">
  <link rel="canonical" href="">

  <meta property="og:type" content="product">
  <meta property="og:site_name" content="Let's templates">
  <meta property="og:locale" content="en_US">
  <meta property="og:url" content="">
  <meta property="og:title" content="Kinetiq | Tailwind CSS Consulting Template">
  <meta property="og:description" content="A bold Tailwind CSS template for startup accelerators and innovation consultancies, with chrome-tube hero art, count-up stats and a filterable team grid.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Kinetiq template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Kinetiq | Tailwind CSS Consulting Template">
  <meta name="twitter:description" content="A bold Tailwind CSS template for startup accelerators and innovation consultancies, with chrome-tube hero art, count-up stats and a filterable team grid.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Kinetiq template preview">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: { lime: { DEFAULT: '#e2f43a', soft: '#f3fbb8' }, coal: { DEFAULT: '#222528', soft: '#2c3035', line: '#3a3f45' } },
          fontFamily: { sans: ['Inter', 'sans-serif'], display: ['"Big Shoulders Display"', 'sans-serif'] }
        }
      }
    }
  </script>
  <style>
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 180ms ease-out both page-fade-out; }
    ::view-transition-new(root) { animation: 220ms ease-in both page-fade-in; }
    @keyframes page-fade-out { to { opacity: 0; } }
    @keyframes page-fade-in { from { opacity: 0; } }
    html { scroll-behavior: smooth; }
    [hidden] { display: none !important; }
    .tube { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .18)); }
    .neon { filter: saturate(1.4) hue-rotate(-12deg); }
    .glow { text-shadow: 0 0 28px rgba(226, 244, 58, .45); }
    .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
    .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
  </style>
</head>
<body class="bg-coal font-sans text-white antialiased">
<% active_page = "index" %>
<% nav = { "work" => "Our work", "about" => "About", "contact" => "Contact" } %>
<% audiences = { "startups" => "For startups", "corporates" => "For corporates" } %>
<% nav.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% audiences.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% { "index" => "Home" }.merge(nav).merge(audiences).each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% stats = [["1400", "", "Founders backed through our programmes"], ["0.9", "BN", "Euros raised by startups we've coached"], ["45", "+", "Corporate partners across Europe"]] %>
<% stats.each_with_index do |(value, unit, label), index| %>
<% end %>
<% values = [["Curiosity first", "We question the obvious, try the untested and enjoy the ride while we're at it."], ["Honest impact", "We take on work that changes something. If we can't help, we'll say so straight away."]] %>
<!-- block:start features -->
  <section class="mx-auto grid max-w-7xl gap-10 px-5 py-16 md:grid-cols-3 md:px-10 md:py-24">
    <div data-reveal>
      <h2 class="font-display text-3xl font-extrabold uppercase"><span class="text-lime">Values</span> <span class="italic">we live by</span></h2>
      <p class="mt-4 max-w-xs text-sm text-white/70">We exist to get things moving. Everything we do — for founders and for corporates alike — follows these two rules.</p>
    </div>
    <% values.each_with_index do |(title, text), index| %>
      <div class="flex gap-5" data-reveal style="--reveal-delay: <%= (index + 1) * 100 %>ms">
        <i class="fa-solid fa-asterisk text-5xl text-lime" aria-hidden="true"></i>
        <div>
          <h3 class="font-display text-2xl font-semibold"><%= title %></h3>
          <p class="mt-3 text-sm text-white/70"><%= text %></p>
        </div>
      </div>
    <% end %>
  </section>
  <!-- block:end features -->
<script>
    const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
    const watchMotion = !reducedMotion && !navigator.webdriver && 'IntersectionObserver' in window;

    document.querySelectorAll('[data-menu-toggle]').forEach((button) => {
      const menu = document.getElementById(button.getAttribute('aria-controls'));
      button.addEventListener('click', () => {
        const open = button.getAttribute('aria-expanded') === 'true';
        button.setAttribute('aria-expanded', String(!open));
        menu.classList.toggle('hidden', open);
      });
    });

    document.querySelectorAll('[data-draw]').forEach((root) => {
      if (!watchMotion) return;
      root.querySelectorAll('[data-draw-path]').forEach((path, index) => {
        const length = path.getTotalLength();
        path.style.strokeDasharray = length;
        path.style.strokeDashoffset = length;
        requestAnimationFrame(() => requestAnimationFrame(() => {
          path.style.transition = `stroke-dashoffset .7s ease-out ${index * 150}ms`;
          path.style.strokeDashoffset = 0;
        }));
      });
    });

    document.querySelectorAll('[data-team]').forEach((root) => {
      const chips = [...root.querySelectorAll('[data-filter]')];
      chips.forEach((chip) => chip.addEventListener('click', () => {
        chips.forEach((other) => other.setAttribute('aria-pressed', String(other === chip)));
        root.querySelectorAll('[data-category]').forEach((item) => { item.hidden = chip.dataset.filter !== 'all' && item.dataset.category !== chip.dataset.filter; });
      }));
    });

    document.querySelectorAll('[data-newsletter]').forEach((form) => {
      const status = form.parentElement.querySelector('[data-form-status]');
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const email = form.elements.email;
        if (!email.checkValidity()) { status.textContent = 'Please enter a valid email address.'; email.focus(); return; }
        status.textContent = "You're on the list — see you next month.";
        form.reset();
      });
    });

    document.querySelectorAll('[data-count]').forEach((el) => {
      const stat = el.closest('[data-stat]');
      const target = Number(el.dataset.count);
      const decimals = el.dataset.count.includes('.') ? 1 : 0;
      const format = (value) => (decimals ? value.toFixed(1) : Math.round(value).toLocaleString('en-US'));
      if (!watchMotion) { stat.classList.replace('text-white/40', 'text-lime'); return; }
      const observer = new IntersectionObserver(([entry]) => {
        if (!entry.isIntersecting) return;
        observer.disconnect();
        const start = performance.now();
        const tick = (now) => { const t = Math.min(1, (now - start) / 700); el.textContent = format(target * t); if (t < 1) requestAnimationFrame(tick); else stat.classList.replace('text-white/40', 'text-lime'); };
        requestAnimationFrame(tick);
      });
      observer.observe(el);
    });

    if (watchMotion) {
      document.documentElement.classList.add('reveal-ready');
      const observer = new IntersectionObserver((entries) => entries.forEach((entry) => {
        if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
      }), { threshold: 0.15 });
      document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
    }
  </script>
</body>
</html>

From this template

Kinetiq screenshot

Professional Services

Kinetiq

Unlimited access to all products

Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.

$20 / 3 months or $60 / year
Get Unlimited Access