Velisse Pricing Pricing 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 Pricing

Velisse Pricing

A pricing block extracted from the Velisse template, available in Tailwind CSS and Bootstrap.

0 1
Demo Download
Velisse Pricing preview
velisse.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>Velisse Pricing | Tailwind CSS UI Block</title>
  <meta name="description" content="A pricing block extracted from the Velisse template, available in Tailwind CSS and Bootstrap.">
  <meta name="keywords" content="Velisse, Tailwind CSS template, HTML website template, beauty salon template, hair salon, makeup studio, skincare clinic, nail studio, spa website">
  <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="Velisse | Tailwind CSS Health & Fitness Template">
  <meta property="og:description" content="An elegant Tailwind CSS beauty salon template with an editorial portrait hero, treatment cards, a tabbed price list and online booking.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Velisse template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Velisse | Tailwind CSS Health & Fitness Template">
  <meta name="twitter:description" content="An elegant Tailwind CSS beauty salon template with an editorial portrait hero, treatment cards, a tabbed price list and online booking.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Velisse 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=Bodoni+Moda:ital,wght@0,400;0,500;1,400&family=Urbanist:wght@400;500;600;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: { gold: '#d4a72c', ink: '#1d1d1f', smoke: '#7a7a7d', mist: '#eceef0', pearl: '#f6f6f4' },
          fontFamily: { serif: ['"Bodoni Moda"', 'serif'], sans: ['Urbanist', '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; }
    .hero-glow { background: radial-gradient(120% 90% at 45% 40%, #fbfbfa 0%, #e9eaeb 55%, #a9acaf 100%); }
    .price-row { background-image: radial-gradient(circle, #b9b9bb 1px, transparent 1.2px); background-size: 7px 2px; background-repeat: repeat-x; background-position: 0 72%; }
    .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-pearl font-sans text-ink antialiased">
<% active_page = "index" %>
<% { "index" => "Home", "team" => "Our Team", "services" => "Services", "prices" => "Prices", "contact" => "Contact" }.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% { "index" => "Home", "team" => "Our Team", "services" => "Services", "prices" => "Prices", "contact" => "Contact" }.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% [["12", "Years of craft"], ["9", "Specialists"], ["4.9", "Guest rating"]].each do |value, label| %>
<% end %>
<% [
          ["Hair styling", "Cuts, colour and updos shaped to your face and lifestyle.", "1562322140-8baeececf3df", "Stylist blow-drying a guest's hair", "services.html"],
          ["Signature facial", "A deep-cleansing ritual that leaves skin calm and luminous.", "1616394584738-fc6e612e71b9", "Guest relaxing during a facial with a cream mask", "signature-facial.html"],
          ["Bridal styling", "Hair and makeup trials and wedding-day styling at our studio or yours.", "1487412947147-5cebf100ffc2", "Makeup artist applying lipstick to a bride", "bridal-styling.html"],
          ["Nail care", "Long-lasting manicures and nail art in a calm, clean room.", "1604654894610-df63bc536371", "Hands with glossy black and tortoiseshell nails", "services.html"],
          ["Body rituals", "Scrubs, wraps and foot treatments to reset tired skin.", "1519415510236-718bdfcd89c8", "Feet resting in a bowl with fresh flowers", "services.html"],
          ["Makeup lessons", "One-to-one sessions to master your everyday look.", "1516975080664-ed2fc6a32937", "Makeup brushes arranged in a holder", "services.html"]
        ].each_with_index do |(title, copy, image, alt, href), index| %>
<% end %>
<!-- block:start pricing -->
  <% price_lists = {
    "Hair" => [["Women's cut & finish", "$85"], ["Men's cut", "$55"], ["Full colour", "$140"], ["Balayage", "$220"], ["Blow-dry", "$45"]],
    "Face" => [["Signature facial", "$120"], ["Express glow", "$70"], ["Brow shaping", "$30"], ["Lash lift", "$75"]],
    "Nails" => [["Gel manicure", "$50"], ["Classic pedicure", "$55"], ["Nail art (from)", "$15"], ["Removal", "$15"]],
    "Body" => [["Body scrub", "$90"], ["Detox wrap", "$110"], ["Foot ritual", "$60"]]
  } %>
  <section id="prices" class="bg-mist">
    <div class="mx-auto max-w-5xl px-5 py-24 md:px-10">
      <div class="text-center">
        <p class="text-sm font-semibold uppercase tracking-[0.3em] text-gold">Price list</p>
        <h2 data-reveal class="mt-4 font-serif text-4xl md:text-5xl">Clear prices, no surprises</h2>
      </div>
      <div data-tabs class="mt-12">
        <div role="tablist" aria-label="Price categories" class="flex flex-wrap justify-center gap-2">
          <% price_lists.keys.each_with_index do |name, index| %>
            <button type="button" role="tab" id="price-tab-<%= index %>" aria-controls="price-panel-<%= index %>" aria-selected="<%= index.zero? %>" tabindex="<%= index.zero? ? 0 : -1 %>" class="border border-ink/20 px-6 py-2.5 font-semibold transition aria-selected:border-ink aria-selected:bg-ink aria-selected:text-white"><%= name %></button>
          <% end %>
        </div>
        <% price_lists.each_with_index do |(name, items), index| %>
          <div role="tabpanel" id="price-panel-<%= index %>" aria-labelledby="price-tab-<%= index %>" class="mx-auto mt-10 max-w-2xl bg-white p-8 md:p-12 <%= 'hidden' unless index.zero? %>">
            <ul class="space-y-5">
              <% items.each do |item, price| %>
                <li class="price-row flex items-baseline justify-between gap-3 text-lg"><span class="bg-white pr-3"><%= item %></span><span class="bg-white pl-3 font-serif text-xl"><%= price %></span></li>
              <% end %>
            </ul>
          </div>
        <% end %>
      </div>
      <p class="mt-8 text-center text-smoke">Full menu and packages on the <a href="prices.html" class="font-semibold text-ink underline decoration-gold underline-offset-4">prices page</a>.</p>
    </div>
  </section>
  <!-- block:end pricing -->
<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));
        menu.classList.toggle('hidden', open);
      });
    });

    document.querySelectorAll('[data-tabs]').forEach((group) => {
      const tabs = [...group.querySelectorAll('[role="tab"]')];
      const select = (tab) => {
        tabs.forEach((other) => {
          const active = other === tab;
          other.setAttribute('aria-selected', String(active));
          other.tabIndex = active ? 0 : -1;
          document.getElementById(other.getAttribute('aria-controls')).classList.toggle('hidden', !active);
        });
      };
      tabs.forEach((tab, index) => {
        tab.addEventListener('click', () => select(tab));
        tab.addEventListener('keydown', (event) => {
          if (!['ArrowRight', 'ArrowLeft'].includes(event.key)) return;
          const next = tabs[(index + (event.key === 'ArrowRight' ? 1 : -1) + tabs.length) % tabs.length];
          select(next);
          next.focus();
        });
      });
    });

    document.querySelectorAll('[data-carousel]').forEach((carousel) => {
      const track = carousel.querySelector('[data-carousel-track]');
      if (!track) return;
      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-2 rounded-full bg-current opacity-30 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-accordion]').forEach((accordion) => {
      const triggers = accordion.querySelectorAll('[data-accordion-trigger]');
      triggers.forEach((trigger) => {
        trigger.addEventListener('click', () => {
          const willOpen = trigger.getAttribute('aria-expanded') !== 'true';
          triggers.forEach((other) => {
            const open = other === trigger && willOpen;
            other.setAttribute('aria-expanded', String(open));
            document.getElementById(other.getAttribute('aria-controls')).classList.toggle('hidden', !open);
            other.querySelector('[data-accordion-icon]')?.classList.toggle('rotate-45', open);
          });
        });
      });
    });

    document.querySelectorAll('[data-contact-form]').forEach((form) => {
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const status = form.querySelector('[data-form-status]');
        if (!form.checkValidity()) {
          status.textContent = form.dataset.error || 'Please complete the required fields.';
          return;
        }
        status.textContent = form.dataset.success || 'Thanks! We will be in touch soon.';
        form.reset();
      });
    });

    document.querySelectorAll('[data-current-year]').forEach((el) => { el.textContent = new Date().getFullYear(); });

    (() => {
      const items = document.querySelectorAll('[data-reveal]');
      const skip = navigator.webdriver || !('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

Velisse screenshot

Health & Fitness

Velisse

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