Physiotech 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

Physiotech Pricing

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

0 17
Demo Download
Physiotech Pricing preview
physiotech.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>Physiotech Pricing | Tailwind CSS UI Block</title>
  <meta name="description" content="A pricing block extracted from the Physiotech template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design." />
  <meta name="keywords" content="Physiotech, Tailwind CSS template, HTML website template, healthcare website template, fitness landing page, digital health, responsive medical 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="Physiotech | Tailwind CSS Healthcare &amp; Fitness Template">
  <meta property="og:description" content="A responsive Tailwind CSS healthcare website template for fitness tracking, nutrition tools, workout scheduling, and digital health services.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Physiotech template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Physiotech | Tailwind CSS Healthcare &amp; Fitness Template">
  <meta name="twitter:description" content="A responsive Tailwind CSS healthcare website template for fitness tracking, nutrition tools, workout scheduling, and digital health services.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Physiotech template preview">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; }
  </style>
</head>
<body class="bg-white overflow-x-hidden">
<%
      team_members = [
        ["https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_569461d1de_b8525e8b12e7633b.png", "female doctor in white coat with dark vest standing confidently, tropical green plants background", "Amara Cole", "Clinical Director"],
        ["https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_760653c638_7d1101aaf02e7334.png", "male doctor in dark green scrubs with stethoscope smiling, indoor plants and bright window background", "James Okonkwo", "Sports Medicine"],
        ["https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_fb5f7d2783_e407475c4ee126e9.png", "young male doctor in white coat with stethoscope standing by large window, indoor plants background", "Leo Hart", "Digital Health"],
        ["https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_30925c4d33_1a272b2c67c83272.png", "female doctor in white coat sitting at desk working on a computer, tropical green plants surrounding", "Priya Shah", "Preventive Care"],
        ["https://images.unsplash.com/photo-1559839734-2b71ea197ec2?auto=format&fit=crop&w=800&q=80", "female physician in a white coat smiling in a bright clinic", "Elena Voss", "Nutrition Science"],
        ["https://images.unsplash.com/photo-1622253692010-333f2da6031d?auto=format&fit=crop&w=800&q=80", "male physician in a white coat standing in a modern hospital corridor", "Noah Blake", "Physiotherapy"]
      ]
    %>
<% team_members.first(3).each_with_index do |(src, alt, name, role), index| %>
<% end %>
<!-- block:start pricing -->
  <section id="pricing" class="bg-white w-full px-4 sm:px-8 py-16 md:py-24 border-t border-gray-100">
    <div class="max-w-6xl mx-auto">
      <div class="text-center mb-12 md:mb-16">
        <span class="text-xs text-gray-400 tracking-widest uppercase font-medium mb-4 block">Pricing</span>
        <h2 class="text-3xl md:text-4xl font-semibold text-gray-900">A Plan for Every Goal</h2>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Basic -->
        <div class="p-8 md:p-10 rounded-[2.5rem] border border-gray-200 flex flex-col hover:border-gray-900 transition duration-300">
          <h3 class="text-xl font-bold text-gray-900 mb-2">Basic</h3>
          <div class="mb-8 flex items-baseline gap-1">
            <span class="text-4xl md:text-5xl font-bold text-gray-900">$0</span>
            <span class="text-gray-400 font-medium">/mo</span>
          </div>
          <ul class="space-y-4 mb-12 flex-1">
            <li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-green-500"></i> Fitness Tracking</li>
            <li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-green-500"></i> Daily Logs</li>
            <li class="flex items-center gap-3 text-sm text-gray-300"><i class="fa-solid fa-xmark"></i> Advanced Analytics</li>
          </ul>
          <button class="w-full py-4 px-6 rounded-2xl border border-gray-900 text-gray-900 font-bold hover:bg-gray-900 hover:text-white transition duration-300">Get Started</button>
        </div>
        <!-- Pro -->
        <div class="p-8 md:p-10 rounded-[2.5rem] bg-gray-900 text-white flex flex-col relative overflow-hidden shadow-xl shadow-gray-200">
          <div class="absolute top-6 right-6 bg-white/10 backdrop-blur-md px-3 py-1 rounded-full text-[10px] uppercase font-bold tracking-widest border border-white/10">Most Popular</div>
          <h3 class="text-xl font-bold mb-2">Pro</h3>
          <div class="mb-8 flex items-baseline gap-1">
            <span class="text-4xl md:text-5xl font-bold">$19</span>
            <span class="text-white/40 font-medium">/mo</span>
          </div>
          <ul class="space-y-4 mb-12 flex-1">
            <li class="flex items-center gap-3 text-sm text-white/80"><i class="fa-solid fa-check text-green-400"></i> Nutrition Analysis</li>
            <li class="flex items-center gap-3 text-sm text-white/80"><i class="fa-solid fa-check text-green-400"></i> AI Meal Planning</li>
            <li class="flex items-center gap-3 text-sm text-white/80"><i class="fa-solid fa-check text-green-400"></i> Smart Reports</li>
          </ul>
          <button class="w-full py-4 px-6 rounded-2xl bg-white text-gray-900 font-bold hover:bg-gray-100 transition duration-300">Go Pro Now</button>
        </div>
        <!-- Elite -->
        <div class="p-8 md:p-10 rounded-[2.5rem] border border-gray-200 flex flex-col hover:border-gray-900 transition duration-300 md:col-span-2 lg:col-span-1">
          <h3 class="text-xl font-bold text-gray-900 mb-2">Elite</h3>
          <div class="mb-8 flex items-baseline gap-1">
            <span class="text-4xl md:text-5xl font-bold text-gray-900">$49</span>
            <span class="text-gray-400 font-medium">/mo</span>
          </div>
          <ul class="space-y-4 mb-12 flex-1">
            <li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-green-500"></i> Weekly Expert Calls</li>
            <li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-green-500"></i> Priority Support</li>
            <li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-green-500"></i> Custom API Access</li>
          </ul>
          <button class="w-full py-4 px-6 rounded-2xl border border-gray-900 text-gray-900 font-bold hover:bg-gray-900 hover:text-white transition duration-300">Select Elite</button>
        </div>
      </div>
    </div>
  </section>
  <!-- block:end pricing -->
<script>
    (function () {
      var data = document.getElementById("team-members-data");
      var members = data ? JSON.parse(data.textContent) : [];
      var prev = document.getElementById("team-prev");
      var next = document.getElementById("team-next");
      var slots = document.querySelectorAll("[data-team-slot]");
      var index = 0;
      if (!prev || !next || !slots.length || !members.length) return;

      function render() {
        slots.forEach(function (slot, offset) {
          var member = members[(index + offset) % members.length];
          var image = slot.querySelector("img");
          var name = slot.querySelector("[data-team-name]");
          var role = slot.querySelector("[data-team-role]");
          image.style.opacity = "0";
          window.setTimeout(function () {
            image.src = member[0];
            image.alt = member[1];
            name.textContent = member[2];
            role.textContent = member[3];
            image.style.opacity = "1";
          }, 160);
        });
      }

      function step(direction) {
        index = (index + direction + members.length) % members.length;
        render();
      }

      prev.addEventListener("click", function () { step(-1); });
      next.addEventListener("click", function () { step(1); });
    })();
  </script>
</body>
</html>

From this template

Physiotech screenshot Free

Business

Physiotech

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