tabler/pages/_includes/cards/form-elements.html

<form action="https://httpbin.org/post" method="post" class="card">
   <div class="card-header">
      <h4 class="card-title">Form elements</h4>
   </div>
   <div class="card-body">
      <div class="row">
         <div class="col-xl-4">
            <div class="row">
               <div class="col-md-6 col-xl-12">{% include forms/form-elements-1.html %}</div>
               <div class="col-md-6 col-xl-12">{% include forms/form-elements-2.html %}</div>
            </div>
         </div>
         <div class="col-xl-4">
            <div class="row">
               <div class="col-md-6 col-xl-12">{% include forms/form-elements-3.html %}</div>
               <div class="col-md-6 col-xl-12">{% include forms/form-elements-4.html %}</div>
            </div>
         </div>
         <div class="col-xl-4">
            <div class="row">
               <div class="col-md-6 col-xl-12">{% include forms/form-elements-5.html %}</div>
               <div class="col-md-6 col-xl-12">{% include forms/form-elements-6.html %}</div>
            </div>
         </div>
      </div>
   </div>
   <div class="card-footer text-right">
      <div class="d-flex">
         <a href="javascript:void(0)" class="btn btn-link">Cancel</a>
         <button type="submit" class="btn btn-primary ml-auto">Send data</button>
      </div>

   </div>
</form>

{% comment %}
<script>
   $(document).ready(function () {
      $('#input-tags').selectize({
         delimiter: ',',
         persist: false,
         create: function (input) {
            return {
               value: input,
               text: input
            };
         }
      });

      $('#select-beast').selectize({});

      $('#select-users').selectize({
         render: {
            option: function (data, escape) {
               return '<div>' +
                  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
                  '<span class="title">' + escape(data.text) + '</span>' +
                  '</div>';
            },
            item: function (data, escape) {
               return '<div>' +
                  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
                  escape(data.text) +
                  '</div>';
            }
         }
      });

      $('#select-countries').selectize({
         render: {
            option: function (data, escape) {
               return '<div>' +
                  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
                  '<span class="title">' + escape(data.text) + '</span>' +
                  '</div>';
            },
            item: function (data, escape) {
               return '<div>' +
                  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
                  escape(data.text) +
                  '</div>';
            }
         }
      });
   });
</script>
{% endcomment %}