<div>
  <label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
    Password
  </label>
  <input
    type="password"
    name="input1"
    id="input1"
    value="testing"
    class="bg-red-50 border border-red-400 rounded py-1 px-3 block focus:ring-red-500 focus:border-red-500 text-gray-700"
    placeholder="Enter your password"
  />
  <div class="flex items-center mt-1 text-red-700">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-5 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z"
        clip-rule="evenodd"
      />
    </svg>
    <p class="ml-1 text-xs">Use atleast 1 number</p>
  </div>
</div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
    Password
  </label>
  <input
    type="password"
    name="input1"
    id="input1"
    value="testing"
    class="bg-yellow-50 border border-yellow-400 rounded py-1 px-3 block focus:ring-yellow-500 focus:border-yellow-500 text-gray-700"
    placeholder="Enter your password"
  />
  <div class="flex items-center mt-1 text-yellow-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
</svg>
    <p class="ml-1 text-xs">Weak Password</p>
  </div>
</div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
    Password
  </label>
  <input
    type="password"
    name="input1"
    id="input1"
    value="testing"
    class="bg-green-50 border border-green-400 rounded py-1 px-3 block focus:ring-green-500 focus:border-green-500 text-gray-700"
    placeholder="Enter your password"
  />
  <div class="flex items-center mt-1 text-green-700">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-5 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
        clip-rule="evenodd"
      />
    </svg>
    <p class="ml-1 text-xs">Secure Password</p>
  </div>
</div>
                    
                

                    
                         <div>
  <label for="input1" class="text-sm text-gray-700 block mb-1 font-medium">
    Name
  </label>
  <input type="text" name="input1" id="input1" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700" placeholder="Enter your name">
</div>
                    
                

                    
                         <button
    class="p-4 border border-gray-200 rounded w-64 bg-white hover:bg-gray-50 hover:border-b-4 hover:border-b-blue-500 flex items-center active:bg-gray-100"
  >
    <div class="flex justify-center items-center text-gray-500 mr-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
        />
      </svg>
    </div>
    <h1 class="font-bold text-gray-700 text-sm">Content page</h1>
  </button>
                    
                

                    
                         <button
    class="p-8 border border-gray-200 rounded bg-white w-64 hover:bg-gray-50 hover:border-b-4 hover:border-b-blue-500 active:bg-gray-100"
  >
    <div class="flex justify-center items-center text-gray-500">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-24 w-24"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
        />
      </svg>
    </div>
    <div class="text-center mt-4">
      <h1 class="font-bold text-gray-700 text">Content page</h1>
      <p class="text-500 text-sm mt-4">
        Build a page using page fragments and edit content inline
      </p>
    </div>
  </button>
                    
                

                    
                         <div class="shadow-lg rounded p-8 bg-white">
  <p class="font-light text-gray-700 leading-relaxed">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore repellendus
    iure rerum ratione aliquam nulla cupiditate amet deleniti ut a laboriosam
    debitis, vel dicta quisquam consectetur! Consectetur repellendus maiores
    quis.
  </p>
  <div class="flex items-center justify-end mt-4">
    <button
      class="py-2 px-4 bg-white border border-gray-200 text-gray-600 rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 mr-4"
    >
      Cancel
    </button>
    <button
      class="py-2 px-4 bg-white border border-gray-200 text-gray-600 rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50"
    >
      Ok
    </button>
  </div>
</div>
                    
                

                    
                         <div class="w-80 bg-white shadow rounded">
        <div
          class="h-48 w-full bg-gray-200 flex flex-col justify-between p-4 bg-cover bg-center"
          style="background-image: url('https://images.pexels.com/photos/7989741/pexels-photo-7989741.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"
        >
          <div class="flex justify-between">
            <input type="checkbox"/>
            <button class="text-white hover:text-blue-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 4v16m8-8H4"
                />
              </svg>
            </button>
          </div>
          <div>
        <span
          class="uppercase text-xs bg-green-50 p-0.5 border-green-500 border rounded text-green-700 font-medium select-none"
        >
          available
        </span>
          </div>
        </div>
        <div class="p-4 flex flex-col items-center">
          <p class="text-gray-400 font-light text-xs text-center">
            Hammond robotics
          </p>
          <h1 class="text-gray-800 text-center mt-1">Item name</h1>
          <p class="text-center text-gray-800 mt-1">€1299</p>
          <div class="inline-flex items-center mt-2">
            <button
              class="bg-white rounded-l border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M20 12H4"
                />
              </svg>
            </button>
            <div
              class="bg-gray-100 border-t border-b border-gray-100 text-gray-600 hover:bg-gray-100 inline-flex items-center px-4 py-1 select-none"
            >
              2
            </div>
            <button
              class="bg-white rounded-r border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 4v16m8-8H4"
                />
              </svg>
            </button>
          </div>

          <button
            class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 mt-4 w-full flex items-center justify-center"
          >
            Add to order
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 ml-2"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
              />
            </svg>
          </button>

          <div class="flex justify-between w-full mt-4">
            <div class="flex items-center text-gray-500">
              <input id="input1" type="checkbox" class="mr-2"/>
              <label for="input1" class="select-none cursor-pointer">Compare</label>
            </div>
            <div>
              <button
                class="py-1 px-4 bg-white text-gray-600 rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center">
                Add to List
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
                    
                

                    
                         <div class="w-80 bg-white shadow rounded">
  <div
    class="h-48 w-full bg-gray-200 flex flex-col justify-between p-4 bg-cover bg-center"
    style="background-image: url('https://images.pexels.com/photos/7989741/pexels-photo-7989741.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"
  >
    <div class="flex justify-between">
      <input type="checkbox" />
      <button class="text-white hover:text-blue-500">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 4v16m8-8H4"
          />
        </svg>
      </button>
    </div>
    <div>
      <span
        class="uppercase text-xs bg-green-50 p-0.5 border-green-500 border rounded text-green-700 font-medium select-none"
      >
        available
      </span>
    </div>
  </div>
  <div class="p-4 flex flex-col items-center">
    <p class="text-gray-400 font-light text-xs text-center">Hammond robotics</p>
    <h1 class="text-gray-800 text-center mt-1">Item name</h1>
    <p class="text-center text-gray-800 mt-1">€1299</p>
    <div class="inline-flex items-center mt-2">
      <button
        class="bg-white rounded-l border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M20 12H4"
          />
        </svg>
      </button>
      <div
        class="bg-gray-100 border-t border-b border-gray-100 text-gray-600 hover:bg-gray-100 inline-flex items-center px-4 py-1 select-none"
      >
        2
      </div>
      <button
        class="bg-white rounded-r border text-gray-600 hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 inline-flex items-center px-2 py-1 border-r border-gray-200"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 4v16m8-8H4"
          />
        </svg>
      </button>
    </div>

    <button
      class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 mt-4 w-full flex items-center justify-center"
    >
      Add to order
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 ml-2"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
        />
      </svg>
    </button>
  </div>
</div>
                    
                

                    
                         <label
  for="input1"
  class="p-4 flex justify-between items-center shadow rounded cursor-pointer border border-transparent hover:border-blue-500 active:bg-gray-50 bg-white"
>
  <div class="flex items-center">
    <input id="input1" type="checkbox" class="mr-4" />
    <div class="mr-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-5 w-5 text-gray-500"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
        />
      </svg>
    </div>
    <p class="select-none">Folder</p>
  </div>
  <button class="text-gray-500 hover:text-gray-800">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
      />
    </svg>
  </button>
</label>