flowbite-beardedtek.com/layouts/partials/pricing/pricing.html

<section class="pt-6 pb-6">
  <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
    {{ range $index, $element := .items }}
    <!-- Pricing Card -->
    <div
      class="flex flex-col max-w-lg p-4 mx-auto text-center text-gray-900 bg-white border border-gray-200 rounded-lg shadow-xs dark:border-gray-700 xl:p-8 dark:text-white dark:bg-gray-800">
      <h3 class=" text-2xl font-semibold">{{ .name }}</h3>
      <p class="text-gray-500 text-light sm:text-lg dark:text-gray-400">{{ .desc }}</p>
      <div class="mt-2 mb-6 grid grid-cols-2">
        {{ if ( .price ) }}
        {{ range $index, $element := .price }}
        <div class="justify-evenly">
            <div class="mb-2 text-lg kanit-thin">{{ .name }}</div>
            <div class="mr-2 text-5xl kanit-medium">${{ .price }}</div>
            <div class="mr-2 text-sm kanit-thin">{{ .period }}</div>
        </div>
        
        {{ end }}
        {{ end }}
      </div>

      <!-- List -->
      <div class="">
      {{ if ( .features ) }}
      <ul role="list" class="mb-6 space-y-4 text-left">
      
      {{ range $index, $element := .features}}
        <li class="flex items-center space-x-3">
          <!-- Icon -->
          {{ if ( .icon ) }}
          <svg class="shrink-0 w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
              clip-rule="evenodd"></path>
          </svg>
          {{ end }}
          <div>
            {{ if ( .name ) }}
            {{ .name }}
            {{ else }}
            &nbsp;
            {{ end }}
            {{ if ( .super ) }}
              <span class=" kanit-light text-xs">
                {{ .super }}
              </span>
            {{ end }}
          </div>
          
        </li>
      {{ end }}
      </ul>
      {{ end }}
      </div>
      {{ if ( .button ) }}
      <a href="{{ if ( .button.link ) }}{{ .button.link }}{{else}}#{{end}}"
        class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-900">
        {{ if ( .button.text ) }}
          {{ .button.text }}
        {{ else}}
          Get Started
        {{ end}}
      {{ end }}
      </a>
        <div class="max-w-xs pt-4 text-left">
          {{ range $index, $element := .features }}
            {{ if ( .super ) }}
              <div class="kanit-thin text-xs text-wrap">
                {{ .super }}: {{ .note }}
              </div>
            {{ end }}
          {{ end }}
        </div>
    </div>
    
    {{ end }}
  </div>
</section>