farmitry_hvac/app/views/nutrient/index.html.erb

<div class="w-full h-full content">
  <div class="flex-1 grid grid-cols-2 lg:grid-cols-4 gap-4">
    <!-- pH -->
    <div class="dashboard-group">
      <div class="flex justify-between items-baseline">
        <div class="text-4xl">pH</div>
        <div class="text-3xl font-['Chakra_Petch']">7.1</div>
      </div>
      <div class="flex justify-between items-baseline">
        <div class="text-2xl">
          6.0 ~ 6.0
        </div>
        <div><i class="fa-solid fa-gear text-base-text/30 text-2xl"></i></div>
      </div>
    </div>

    <!-- EC -->
    <div class="dashboard-group">
      <div class="flex justify-between items-baseline">
        <div class="text-4xl">EC</div>
        <div class="text-3xl font-['Chakra_Petch']">0.1</div>
      </div>
      <div class="flex justify-between items-baseline">
        <div class="text-2xl">
          0 ~ 1
        </div>
        <div><i class="fa-solid fa-gear text-base-text/30 text-2xl"></i></div>
      </div>
    </div>

    <!-- 양액 온도 -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">양액 온도</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <!--        <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>-->
          <div class="items-baseline text-right w-full"><span class="text-4xl font-['Chakra_Petch']">20.96</span>
            <span class="text-2xl">°C</span></div>
        </div>
      </div>
    </div>

    <!-- 수위 정보 -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">수위 정보</div>
        <!--      <div class="flex flex-row justify-between items-baseline w-full">-->
        <!--        <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>-->
        <!--        <div class="items-baseline text-right w-full"><span class="text-4xl font-['Chakra_Petch']">20.96</span>-->
        <!--          <span class="text-2xl">°C</span></div>-->
        <!--      </div>-->
      </div>
    </div>

    <!-- 원수 탱크 -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">원수 탱크</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 원수 펌프 -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">원수 펌프</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 교반기A -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">교반기A</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 교반기B -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">교반기B</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 급수/공급 펌프 -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">급수/공급 펌프</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 1번급수 솔벨브 -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">1번급수 솔벨브</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 2번급수 솔벨브 -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">2번급수 솔벨브</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 퇴수 솔벨브 -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">퇴수 솔벨브</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 솔레노이드 벨브A -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">솔레노이드 벨브A</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 솔레노이드 벨브B -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">솔레노이드 벨브B</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 솔레노이드 벨브C -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">솔레노이드 벨브C</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 긴급 정지 -->
    <div class="dashboard-group">
      <div class="flex flex-col justify-between h-full">
        <div class="text-xl">긴급 정지</div>
        <div class="flex flex-row justify-between items-baseline w-full">
          <i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
          <div class="items-baseline text-right w-full">
            <span class="text-4xl font-['Chakra_Petch'] font-light"><div class="btn-toggle-text">ON</div></span>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>