Oblique Products Products 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 Products

Oblique Products

A products block extracted from the Oblique template, available in Tailwind CSS and Bootstrap.

0 2
Demo Download
Oblique Products preview
oblique.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>Oblique Products | Tailwind CSS UI Block</title>
  <meta name="description" content="A products block extracted from the Oblique template, available in Tailwind CSS and Bootstrap.">
  <meta name="keywords" content="Oblique, Tailwind CSS template, HTML website template, fashion ecommerce, clothing store template, minimal online boutique, capsule wardrobe shop, responsive store design">
  <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="Oblique | Tailwind CSS Fashion Ecommerce Template">
  <meta property="og:description" content="A minimal Tailwind CSS fashion ecommerce template for independent clothing labels, capsule wardrobes, and slow-fashion boutiques that sell online.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Oblique template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Oblique | Tailwind CSS Fashion Ecommerce Template">
  <meta name="twitter:description" content="A minimal Tailwind CSS fashion ecommerce template for independent clothing labels, capsule wardrobes, and slow-fashion boutiques that sell online.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Oblique template preview">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@700&amp;family=Inter:wght@400;500;600&amp;family=Inter+Tight:wght@400;500;600&amp;display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            paper: '#faf9f6',
            ink: '#141414',
            stone: '#6d6b66',
            line: '#e5e2db',
            sand: '#efece6'
          },
          fontFamily: {
            sans: ['Inter', 'Helvetica Neue', 'Arial', 'sans-serif'],
            display: ['"Inter Tight"', 'Helvetica Neue', 'Arial', 'sans-serif'],
            mono: ['"Courier Prime"', 'Courier New', 'monospace']
          }
        }
      }
    };
  </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; }
    }
    @media (prefers-reduced-motion: reduce) {
      ::view-transition-old(root),
      ::view-transition-new(root) {
        animation: none;
      }
    }
    .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; }
  </style>
</head>
<body class="overflow-x-hidden bg-paper font-sans text-ink antialiased">
<!-- block:start products -->
    <section id="shop" class="mx-auto max-w-[1600px] px-5 py-16 sm:px-8 lg:px-10 lg:py-24">
      <%
        products = [
          ["Column Wool Blazer", 240, "outerwear", "Stone check", "photo-1608234808654-2a8875faa7fd", "Woman in a grey checked wool blazer over a white shirt", "column-wool-blazer.html"],
          ["Draped Camel Coat", 320, "outerwear", "Camel", "photo-1619603364904-c0498317e145", "Model in a long camel coat over a brown turtleneck", "draped-camel-coat.html"],
          ["Olive Strap Playsuit", 185, "dresses", "Olive", "photo-1618932260643-eee4a2f652a6", "Olive belted strappy playsuit on a hanger", "olive-strap-playsuit.html"],
          ["Open-Knit Cape", 135, "knitwear", "Ecru", "photo-1434389677669-e08b4cac3105", "Cream open-knit fringed cape on a wooden hanger", "column-wool-blazer.html"],
          ["Rust Cropped Bomber", 210, "outerwear", "Rust", "photo-1591047139829-d91aecb6caea", "Rust satin bomber jacket held up on a hanger", "draped-camel-coat.html"],
          ["Loop-Back Sweatshirt", 95, "tops", "Chalk", "photo-1620799140408-edc6dcb6d633", "White loop-back sweatshirt laid flat on a table", "column-wool-blazer.html"],
          ["Belted Midi Dress", 210, "dresses", "Black", "photo-1550639525-c97d455acf70", "Woman in a black knit top and belted quilted midi skirt", "olive-strap-playsuit.html"],
          ["Washed Cotton Tee", 48, "tops", "Sky", "photo-1564584217132-2271feaeb3c5", "Pale blue washed cotton tee on a hanger", "column-wool-blazer.html"]
        ]
      %>
      <div class="flex flex-col gap-8 md:flex-row md:items-end md:justify-between">
        <div data-reveal>
          <p class="text-[13px] uppercase tracking-[0.18em] text-stone">Shop the edit</p>
          <h2 class="mt-3 font-display text-4xl font-medium uppercase leading-[1.05] tracking-[-0.015em] md:text-5xl">Pieces for now</h2>
        </div>
        <div role="group" aria-label="Filter products" data-filter-group class="-mx-5 flex gap-2 overflow-x-auto px-5 pb-1 text-sm sm:mx-0 sm:flex-wrap sm:px-0">
          <% [["all", "All"], ["outerwear", "Outerwear"], ["knitwear", "Knitwear"], ["tops", "Tops"], ["dresses", "Dresses"]].each do |value, label| %>
            <button type="button" data-filter="<%= value %>" aria-pressed="<%= value == "all" %>" class="<%= value == "all" ? "bg-ink text-white" : "" %> shrink-0 border border-ink px-5 py-2.5 transition-colors hover:bg-ink hover:text-white"><%= label %></button>
          <% end %>
        </div>
      </div>
      <div data-filter-items class="mt-10 grid grid-cols-2 gap-x-4 gap-y-10 md:gap-x-6 lg:grid-cols-4 lg:gap-x-10">
        <% products.each_with_index do |(name, price, category, color, photo, alt, href), index| %>
          <article data-category="<%= category %>" class="group" data-reveal style="--reveal-delay: <%= (index % 4) * 100 %>ms">
            <a href="<%= href %>" class="block aspect-[4/5] overflow-hidden bg-sand">
              <img src="https://images.unsplash.com/<%= photo %>?auto=format&fit=crop&w=800&q=80" alt="<%= alt %>" loading="lazy" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]">
            </a>
            <div class="mt-4 flex items-start justify-between gap-3">
              <div>
                <h3 class="text-[15px] font-medium"><a href="<%= href %>" class="hover:underline"><%= name %></a></h3>
                <p class="mt-1 text-sm text-stone"><%= color %></p>
              </div>
              <p class="text-[15px]">$<%= price %></p>
            </div>
            <button type="button" data-add-to-cart data-product="<%= name %>" class="mt-4 flex h-11 w-full items-center justify-center border border-ink text-sm transition-colors hover:bg-ink hover:text-white">Add to bag</button>
          </article>
        <% end %>
      </div>
      <div class="mt-14 flex justify-center">
        <a href="catalog.html" class="inline-flex h-14 w-full max-w-[420px] items-center justify-center bg-ink text-base text-white transition-colors hover:bg-black/80">View the full catalog</a>
      </div>
    </section>
    <!-- block:end products -->
<script>
    document.querySelectorAll("[data-menu-toggle]").forEach((button) => {
      const menu = document.getElementById(button.getAttribute("aria-controls"));
      if (!menu) return;
      button.addEventListener("click", () => {
        const open = button.getAttribute("aria-expanded") === "true";
        button.setAttribute("aria-expanded", String(!open));
        button.setAttribute("aria-label", open ? "Open menu" : "Close menu");
        menu.classList.toggle("hidden", open);
      });
    });

    (() => {
      const counters = document.querySelectorAll("[data-cart-count]");
      const read = () => {
        try { return localStorage.getItem("oblique-bag-count"); } catch (error) { return null; }
      };
      const write = (value) => {
        try { localStorage.setItem("oblique-bag-count", String(value)); } catch (error) {}
      };
      const stored = Number(read());
      let count = read() === null || Number.isNaN(stored) ? Number(counters[0]?.textContent || 0) : stored;
      const render = () => counters.forEach((counter) => { counter.textContent = count; });
      render();
      document.querySelectorAll("[data-add-to-cart]").forEach((button) => {
        const label = button.textContent;
        button.addEventListener("click", () => {
          const qtyInput = button.dataset.qtySource ? document.querySelector(button.dataset.qtySource) : null;
          count += qtyInput ? Math.max(1, Number(qtyInput.value) || 1) : 1;
          write(count);
          render();
          button.textContent = "Added to bag";
          setTimeout(() => { button.textContent = label; }, 1400);
        });
      });
    })();

    document.querySelectorAll("[data-filter-group]").forEach((group) => {
      const items = group.closest("section").querySelectorAll("[data-filter-items] [data-category]");
      const activeClasses = ["bg-ink", "text-white"];
      group.addEventListener("click", (event) => {
        const button = event.target.closest("[data-filter]");
        if (!button) return;
        const filter = button.dataset.filter;
        group.querySelectorAll("[data-filter]").forEach((chip) => {
          const active = chip === button;
          chip.setAttribute("aria-pressed", String(active));
          activeClasses.forEach((cls) => chip.classList.toggle(cls, active));
        });
        items.forEach((item) => {
          item.hidden = !(filter === "all" || item.dataset.category.split(" ").includes(filter));
        });
      });
    });

    document.querySelectorAll("[data-carousel]").forEach((carousel) => {
      const track = carousel.querySelector("[data-carousel-track]");
      const slides = [...track.children];
      const dots = carousel.querySelector("[data-carousel-dots]");
      let index = 0;
      const perView = () => Math.max(1, Math.round(track.clientWidth / slides[0].clientWidth));
      const maxIndex = () => Math.max(0, slides.length - perView());
      const render = () => {
        track.style.transform = `translateX(-${index * slides[0].clientWidth}px)`;
        dots?.querySelectorAll("button").forEach((dot, i) => dot.setAttribute("aria-current", String(i === index)));
      };
      const go = (next) => { const max = maxIndex(); index = next > max ? 0 : next < 0 ? max : next; render(); };
      const buildDots = () => {
        if (!dots) return;
        dots.innerHTML = "";
        for (let i = 0; i <= maxIndex(); i++) {
          const dot = document.createElement("button");
          dot.type = "button";
          dot.className = "h-2 w-6 bg-current opacity-20 transition-opacity aria-[current=true]:opacity-100";
          dot.setAttribute("aria-label", `Go to review ${i + 1}`);
          dot.addEventListener("click", () => go(i));
          dots.append(dot);
        }
      };
      carousel.querySelector("[data-carousel-prev]")?.addEventListener("click", () => go(index - 1));
      carousel.querySelector("[data-carousel-next]")?.addEventListener("click", () => go(index + 1));
      addEventListener("resize", () => { buildDots(); go(Math.min(index, maxIndex())); });
      buildDots();
      render();
    });

    document.querySelectorAll("[data-form-message]").forEach((form) => {
      form.addEventListener("submit", (event) => {
        event.preventDefault();
        const status = form.querySelector("[data-form-status]");
        if (status) status.textContent = form.dataset.formMessage;
        form.reset();
      });
    });

    (() => {
      const items = document.querySelectorAll("[data-reveal]");
      const skip = navigator.webdriver || /HeadlessChrome/.test(navigator.userAgent) || !("IntersectionObserver" in window) || matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (!items.length || skip) return;
      document.documentElement.classList.add("reveal-ready");
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add("is-visible");
          observer.unobserve(entry.target);
        });
      }, { rootMargin: "0px 0px -10% 0px" });
      items.forEach((item) => observer.observe(item));
    })();
  </script>
</body>
</html>

From this template

Oblique screenshot

E-commerce

Oblique

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