NutriBite 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

NutriBite Pricing

A pricing block extracted from the NutriBite template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.

0 21
Demo Download
NutriBite Pricing preview
nutribite.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>NutriBite Pricing | Tailwind CSS UI Block</title>
    <meta
      name="description"
      content="A pricing block extracted from the NutriBite template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design."
    />
    <meta
      name="keywords"
      content="healthy meal delivery template, meal subscription landing page, organic food website template, nutrition brand design, wellness food service"
    />
    <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="NutriBite | Tailwind CSS Healthy Meal Delivery Template">
    <meta property="og:description" content="A responsive meal delivery landing page template for healthy food subscriptions, organic meal prep services, nutrition brands, and wellness-focused food businesses.">
    <meta property="og:image" content="">
    <meta property="og:image:alt" content="NutriBite template preview">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="NutriBite | Tailwind CSS Healthy Meal Delivery Template">
    <meta name="twitter:description" content="A responsive meal delivery landing page template for healthy food subscriptions, organic meal prep services, nutrition brands, and wellness-focused food businesses.">
    <meta name="twitter:image" content="">
    <meta name="twitter:image:alt" content="NutriBite template preview">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              sage: "#6b7a52",
              "sage-dark": "#4a5638",
              cream: "#f4eddc",
              "cream-dark": "#e8dfc8",
              "nb-dark": "#1a1a18",
            },
          },
        },
      };
    </script>
    <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=Fraunces:wght@400;700;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      body {
        font-family: "Plus Jakarta Sans", sans-serif;
        scroll-behavior: smooth;
        background-color: #f4eddc;
        color: #1a1a18;
      }
      .font-display {
        font-family: "Fraunces", serif;
      }
      .meal-tab-active {
        color: #6b7a52;
        border-bottom: 2px solid #6b7a52;
        font-weight: 700;
      }
      .meal-tab:not(.meal-tab-active) {
        border-bottom: 2px solid transparent;
      }
    </style>
  </head>
<body class="antialiased">
<%
            meals = [
              {
                tag: "Best Seller", tag_bg: "bg-sage", tag_text: "text-white",
                name: "Grilled Salmon Salad", kcal: "420 Kcal", protein: "32g Protein", price: "$5.20",
                img: "https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=400&q=80",
                alt: "Grilled salmon salad with mixed greens and dressing"
              },
              {
                tag: "Deal Seller", tag_bg: "bg-amber-400", tag_text: "text-white",
                name: "Lean Chicken Avocado Plate", kcal: "380 Kcal", protein: "35g Protein", price: "$5.80",
                img: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=400&q=80",
                alt: "Lean chicken breast with sliced avocado and salad"
              },
              {
                tag: "5 New Dishes", tag_bg: "bg-blue-100", tag_text: "text-blue-700",
                name: "Chicken Quinoa Salad", kcal: "400 Kcal", protein: "28g Protein", price: "$5.50",
                img: "https://images.unsplash.com/photo-1512058564366-18510be2db19?w=400&q=80",
                alt: "Chicken and quinoa salad bowl with colorful vegetables"
              },
              {
                tag: "Chef's Choice", tag_bg: "bg-purple-100", tag_text: "text-purple-700",
                name: "Quinoa Chicken Wrap", kcal: "440 Kcal", protein: "30g Protein", price: "$5.40",
                img: "https://images.unsplash.com/photo-1547592180-85f173990554?w=400&q=80",
                alt: "Fresh quinoa chicken wrap with herbs"
              },
            ]
          %>
<% meals.each do |meal| %>
<% end %>
<%
                  nutrients = [
                    { label: "Carb", pct: 32, color: "bg-blue-400" },
                    { label: "Protein", pct: 25, color: "bg-green-400" },
                    { label: "Fat", pct: 28, color: "bg-orange-400" },
                    { label: "Fiber", pct: 40, color: "bg-sage" },
                  ]
                %>
<% nutrients.each do |n| %>
<% end %>
<%
                features = [
                  { icon: "fa-carrot", label: "Fresh\nIngredients" },
                  { icon: "fa-scale-balanced", label: "Balanced\nNutrition" },
                  { icon: "fa-bowl-food", label: "Easy\nServings" },
                  { icon: "fa-headset", label: "Chat\nSupport" },
                ]
              %>
<% features.each do |f| %>
<% end %>
<%
                steps = [
                  { num: "01", label: "Select Your Plan", active: false },
                  { num: "02", label: "Pick Your Meals", active: false },
                  { num: "03", label: "Cooked Fresh Daily", active: true },
                  { num: "04", label: "Delivered to Your Door", active: false },
                ]
              %>
<% steps.each do |step| %>
<% if step[:active] %>
<% end %>
<% end %>
<% [1, 2, 3].each_with_index do |n, i| %>
<% end %>
<!-- block:start pricing -->
      <section id="meal-plans" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-6">
          <div class="flex items-end justify-between mb-10">
            <div>
              <p class="text-sage text-xs font-bold uppercase tracking-widest mb-2">Find Your Fit</p>
              <h2 class="font-display text-3xl md:text-4xl font-bold leading-tight">
                Healthy Meals<br/>That Fit Your Life
              </h2>
            </div>
            <div class="flex gap-2">
              <button
                class="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center text-gray-500 hover:border-sage hover:text-sage transition-all"
                aria-label="View previous meal plans"
              >
                <i class="fa-solid fa-arrow-left text-sm"></i>
              </button>
              <button
                class="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center text-gray-500 hover:border-sage hover:text-sage transition-all"
                aria-label="View more meal plans"
              >
                <i class="fa-solid fa-arrow-right text-sm"></i>
              </button>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Plan card 1: Vegan -->
            <article class="relative rounded-3xl overflow-hidden group cursor-pointer">
              <img
                src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=600&q=80"
                alt="Vegan meal plan — plant-based dishes with seasonal vegetables and grains"
                class="w-full h-72 object-cover group-hover:scale-105 transition-transform duration-500"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-nb-dark/70 to-transparent"></div>
              <div class="absolute bottom-0 left-0 right-0 p-5">
                <span class="inline-block bg-sage text-white text-[10px] font-bold px-3 py-1 rounded-full mb-2">Vegan Plan</span>
                <p class="text-white text-xs leading-relaxed">
                  Plant-based meals made with seasonal organic ingredients. No animal products.
                </p>
              </div>
              <span class="absolute top-4 left-4 text-white text-xs font-semibold bg-black/30 backdrop-blur-sm px-3 py-1 rounded-full">
                View More
              </span>
            </article>

            <!-- Plan card 2: Balanced -->
            <article class="relative rounded-3xl overflow-hidden group cursor-pointer">
              <img
                src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=600&q=80"
                alt="Balanced meal plan — high-protein, well-rounded dishes for active lifestyles"
                class="w-full h-72 object-cover group-hover:scale-105 transition-transform duration-500"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-nb-dark/70 to-transparent"></div>
              <div class="absolute bottom-5 left-5 right-5">
                <p class="text-white text-xs leading-relaxed">
                  High-protein, balanced carbs. Ideal for active lifestyles and muscle recovery.
                </p>
              </div>
            </article>

            <!-- CTA card -->
            <article class="bg-cream rounded-3xl p-8 flex flex-col justify-between border border-cream-dark">
              <h3 class="font-display font-bold text-2xl leading-snug">
                Choose a meal plan that fits your lifestyle and goals.
              </h3>
              <a
                href="#menu"
                class="inline-flex items-center gap-2 bg-sage text-white px-6 py-3 rounded-full font-bold text-sm hover:bg-sage-dark transition-colors w-fit mt-8"
              >
                Order Now
              </a>
            </article>
          </div>
        </div>
      </section>
      <!-- block:end pricing -->
<script>
      document.querySelectorAll(".meal-tab").forEach(function (tab) {
        tab.addEventListener("click", function () {
          document.querySelectorAll(".meal-tab").forEach(function (t) {
            t.classList.remove("meal-tab-active");
            t.classList.add("text-gray-400");
          });
          this.classList.add("meal-tab-active");
          this.classList.remove("text-gray-400");
        });
      });

      const testimonials = [
        {
          quote: "I never thought healthy eating could be this easy. The portions are perfect, the flavors are great, and I've lost 4 kg in just six weeks without feeling hungry or deprived.",
          author: "Sarah Milero",
          location: "Sydney",
          before: "https://images.unsplash.com/photo-1524594081293-190a2fe0baae?w=400&q=80",
          after: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&q=80",
          beforeAlt: "Sarah before starting the NutriBite Weight Loss Plan",
          afterAlt: "Sarah after six weeks on the NutriBite Weight Loss Plan",
        },
        {
          quote: "Within two weeks I felt lighter and more energized. The Fight Bloat meals are satisfying, thoughtfully seasoned, and easy to fit into my busiest workdays.",
          author: "Maya Chen",
          location: "Melbourne",
          before: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=400&q=80",
          after: "https://images.unsplash.com/photo-1538805060514-97d9cc17730c?w=400&q=80",
          beforeAlt: "Maya before starting the NutriBite Fight Bloat Plan",
          afterAlt: "Maya feeling energized after the NutriBite Fight Bloat Plan",
        },
        {
          quote: "The Vegan Plan proved that plant-based food can be convenient and genuinely exciting. Every delivery feels fresh, colorful, and completely different from the last.",
          author: "Avery Williams",
          location: "Brisbane",
          before: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=400&q=80",
          after: "https://images.unsplash.com/photo-1518310383802-640c2de311b2?w=400&q=80",
          beforeAlt: "Avery before switching to the NutriBite Vegan Plan",
          afterAlt: "Avery thriving on the NutriBite Vegan Plan",
        },
        {
          quote: "NutriBite takes the guesswork out of eating well. The Balanced Meal Plan keeps my energy steady, and dinner is one less thing I need to plan every day.",
          author: "Daniel Brooks",
          location: "Perth",
          before: "https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?w=400&q=80",
          after: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?w=400&q=80",
          beforeAlt: "Daniel before starting the NutriBite Balanced Meal Plan",
          afterAlt: "Daniel after following the NutriBite Balanced Meal Plan",
        },
      ];

      let activeTestimonial = 0;
      const testimonialQuote = document.getElementById("testimonial-quote");
      const testimonialAuthor = document.getElementById("testimonial-author");
      const testimonialLocation = document.getElementById("testimonial-location");
      const testimonialBeforeImage = document.getElementById("testimonial-before-image");
      const testimonialAfterImage = document.getElementById("testimonial-after-image");
      const testimonialPlans = document.querySelectorAll(".testimonial-plan");
      const testimonialAvatars = document.querySelectorAll(".testimonial-avatar");

      function showTestimonial(index) {
        activeTestimonial = (index + testimonials.length) % testimonials.length;
        const testimonial = testimonials[activeTestimonial];

        testimonialQuote.textContent = `“${testimonial.quote}”`;
        testimonialAuthor.textContent = testimonial.author;
        testimonialLocation.textContent = testimonial.location;
        testimonialBeforeImage.src = testimonial.before;
        testimonialBeforeImage.alt = testimonial.beforeAlt;
        testimonialAfterImage.src = testimonial.after;
        testimonialAfterImage.alt = testimonial.afterAlt;

        testimonialPlans.forEach(function (plan, planIndex) {
          const isActive = planIndex === activeTestimonial;
          plan.setAttribute("aria-selected", String(isActive));
          plan.classList.toggle("bg-sage", isActive);
          plan.classList.toggle("text-white", isActive);
          plan.classList.toggle("bg-white", !isActive);
          plan.classList.toggle("text-gray-500", !isActive);
        });

        testimonialAvatars.forEach(function (avatar, avatarIndex) {
          const isActive = avatarIndex === activeTestimonial % testimonialAvatars.length;
          avatar.classList.toggle("opacity-60", !isActive);
          avatar.classList.toggle("ring-2", isActive);
          avatar.classList.toggle("ring-sage", isActive);
          avatar.classList.toggle("ring-offset-2", isActive);
          avatar.classList.toggle("ring-offset-cream", isActive);
        });
      }

      document.getElementById("testimonial-prev").addEventListener("click", function () {
        showTestimonial(activeTestimonial - 1);
      });

      document.getElementById("testimonial-next").addEventListener("click", function () {
        showTestimonial(activeTestimonial + 1);
      });

      testimonialPlans.forEach(function (plan) {
        plan.addEventListener("click", function () {
          showTestimonial(Number(this.dataset.testimonialIndex));
        });
      });
    </script>
</body>
</html>

From this template

NutriBite screenshot Free

Business

NutriBite

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