Untitled

mail@pastecode.io avatar
unknown
html
a year ago
20 kB
4
Indexable
Never
  <div class="flex mb-20">
    <!-- sidebar nav start -->
    <div class="bg-white w-[250px] border border-gray-200 relative p-4 sticky top-0">
      <div class="flex items-center justify-between mb-4">
        <div>
          <h2 class="text-2xl text-left font-extrabold">
            Demo<span class="text-red-500">Logo</span>
          </h2>
        </div>
        <button class="text-black/70">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-6 aspect-sqare"
            fill="currentColor"
            viewBox="0 0 256 256"
          >
            <path
              d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
            ></path>
          </svg>
        </button>
      </div>

      <div>
        <a
          href="#"
          class="text-base flex items-center gap-2 px-2 py-2 border-b border-black/10"
        >
          <i class="text-red-500 font-medium text-lg ph ph-squares-four"></i>
          Dashboard
        </a>
        <a
          href="#"
          class="text-base flex items-center gap-2 px-2 py-2 border-b border-black/10"
        >
          <i class="text-red-500 font-medium text-lg ph ph-chat-circle"></i>
          Chat
        </a>
        <a
          href="#"
          class="text-base flex items-center gap-2 px-2 py-2 border-b border-black/10"
        >
          <i class="text-red-500 font-medium text-lg ph ph-user"></i>
          Profile
        </a>
        <a
          href="#"
          class="text-base flex items-center gap-2 px-2 py-2 border-b border-black/10"
        >
          <i class="text-red-500 font-medium text-lg ph ph-first-aid-kit"></i>
          Doctor
        </a>
        <a
          href="#"
          class="text-base flex items-center gap-2 px-2 py-2 border-b border-black/10"
        >
          <i class="text-red-500 font-medium text-lg ph ph-prescription"></i>
          Prescription
        </a>
        <a
          href="#"
          class="text-base flex items-center gap-2 px-2 py-2 border-b border-black/10"
        >
          <i class="text-red-500 font-medium text-lg ph ph-notepad"></i>
          Book Appointment
        </a>
        <a
          href="#"
          class="text-base flex items-center gap-2 px-2 py-2 border-b border-black/10"
        >
          <i class="text-red-500 font-medium text-lg ph ph-gear"></i>
          Settings
        </a>
        <a
          href="#"
          class="text-base flex items-center gap-2 px-2 py-2 border-b border-black/10"
        >
          <i class="text-red-500 font-medium text-lg ph ph-sign-out"></i>
          LogOut
        </a>
      </div>
    </div>
    <!-- sidebar nav end -->

    <div>
      <!-- navigation start -->
      <div class="py-2 px-4 mb-6 border-b border-gray-200">
        <div class="container mx-auto flex items-center justify-between">
          <div class="flex items-center gap-6">
            <div>
              <butto class="text-black/70">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-6 aspect-sqare"
                  fill="currentColor"
                  viewBox="0 0 256 256"
                >
                  <path
                    d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
                  ></path>
                </svg>
              </butto>
            </div>

            <div class="relative">
              <input
                type="search"
                placeholder="Search..."
                class="py-1 px-4 w-[250px] rounded outline-none border border-black/20"
              />
              <button type="submit" class="absolute pointer-events-none right-4 top-1">
                <i class="text-black/20 font-semibold ph ph-magnifying-glass"></i>
              </button>
            </div>
          </div>

          <!-- logo start -->
          <div class="pb-1">
            <h2 class="text-3xl font-extrabold">
              Demo<span class="text-red-500">Logo</span>
            </h2>
          </div>
          <!-- logo end -->

          <div class="flex gap-x-4 items-center">
            <h3 class="text-sm font-medium capitalize">Mahsin Ullah Azmi</h3>
            <img
              src="@/img/profile.jpg"
              alt="profile"
              class="w-10 aspect-square object-cover rounded-full border-4"
            />
          </div>
        </div>
      </div>
      <!-- navigation end -->

      <div class="flex-1 px-6">
        <div class="container mx-auto">
          <!-- addvedice img complex start -->
          <div class="grid grid-cols-2 gap-6 mb-6">
            <div>
              <img src="@/img/add-1.webp" alt="" class="w-full object-cover h-[120px]" />
            </div>
            <div>
              <img src="@/img/add-2.webp" alt="" class="w-full object-cover h-[120px]" />
            </div>
          </div>
          <!-- addvedice img complex end -->

          <div class="flex gap-6 mb-6">
            <!-- card-design start -->
            <div class="flex-1">
              <div class="grid grid-cols-3 gap-6">
                <div
                  class="text-center py-4 px-6 h-full border border-gray-300 rounded-md"
                >
                  <img
                    src="https://doccure.dreamguystech.com/laravel/template/public/assets/img/services/features-01.svg"
                    alt=""
                    class="mx-auto w-8 mb-2 aspect-square"
                  />
                  <h3 class="font-semibold mb-2">Operation</h3>
                  <p class="text-black/80 leading-5 text-sm">
                    It is a long established fact that a reader
                  </p>
                </div>

                <div
                  class="text-center py-4 px-6 h-full border border-gray-300 rounded-md"
                >
                  <img
                    src="https://doccure.dreamguystech.com/laravel/template/public/assets/img/services/features-02.svg"
                    alt=""
                    class="mx-auto w-8 mb-2 aspect-square"
                  />
                  <h3 class="font-semibold">Medical</h3>
                  <p class="text-black/80 leading-5 text-sm">
                    It is a long established fact that a reader
                  </p>
                </div>

                <div
                  class="text-center py-4 px-6 h-full border border-gray-300 rounded-md"
                >
                  <img
                    src="https://doccure.dreamguystech.com/laravel/template/public/assets/img/services/features-04.svg"
                    alt=""
                    class="mx-auto w-8 mb-2 aspect-square"
                  />
                  <h3 class="font-semibold">Test Room</h3>
                  <p class="text-black/80 leading-5 text-sm">
                    It is a long established fact that a reader
                  </p>
                </div>
                <div
                  class="text-center py-4 px-6 h-full border border-gray-300 rounded-md"
                >
                  <img
                    src="https://doccure.dreamguystech.com/laravel/template/public/assets/img/services/features-03.svg"
                    alt=""
                    class="mx-auto w-8 mb-2 aspect-square"
                  />
                  <h3 class="font-semibold">Patient Ward</h3>
                  <p class="text-black/80 leading-5 text-sm">
                    It is a long established fact that a reader
                  </p>
                </div>
                <div
                  class="text-center py-4 px-6 h-full border border-gray-300 rounded-md"
                >
                  <img
                    src="https://doccure.dreamguystech.com/laravel/template/public/assets/img/services/features-05.svg"
                    alt=""
                    class="mx-auto w-8 mb-2 aspect-square"
                  />
                  <h3 class="font-semibold">ICU</h3>
                  <p class="text-black/80 leading-5 text-sm">
                    It is a long established fact that a reader
                  </p>
                </div>
                <div
                  class="text-center py-4 px-6 h-full border border-gray-300 rounded-md"
                >
                  <img
                    src="https://doccure.dreamguystech.com/laravel/template/public/assets/img/services/features-06.svg"
                    alt=""
                    class="mx-auto w-8 mb-2 aspect-square"
                  />
                  <h3 class="font-semibold">Laboratory</h3>
                  <p class="text-black/80 leading-5 text-sm">
                    It is a long established fact that a reader
                  </p>
                </div>
              </div>
            </div>
            <!-- card design end -->

            <!-- addvedice img complex start -->
            <div class="bg-red-200 flex-2">
              <img src="@/img/add-3.webp" alt="" class="w-[140px] object-cover h-full" />
            </div>
            <!-- addvedice img complex end -->
          </div>
          <!-- addvedice img complex start -->
          <div class="grid grid-cols-2 gap-6">
            <div class="bg-green-200">
              <img src="@/img/add-4.webp" alt="" class="w-full object-cover h-[120px]" />
            </div>
            <div class="bg-green-200">
              <img src="@/img/add-1.webp" alt="" class="w-full object-cover h-[120px]" />
            </div>
          </div>
          <!-- addvedice img complex end -->
        </div>
      </div>
    </div>
  </div>

  <div>
    <div class="container mx-auto">
      <form class="mb-10">
        <div class="grid grid-cols-2 gap-4">
          <div class="mb-6">
            <label class="block mb-2 text-sm font-medium text-gray-900">Your email</label>
            <input
              type="email"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
              placeholder="name@flowbite.com"
            />
          </div>
          <div class="mb-6">
            <label class="block mb-2 text-sm font-medium text-gray-900"
              >Your password</label
            >
            <input
              type="password"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
              placeholder="password"
            />
          </div>
        </div>

        <div class="mb-6">
          <label class="block mb-2 text-sm font-medium text-gray-900">Your Name</label>
          <input
            type="text"
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
            placeholder="Your Name"
          />
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div class="mb-6">
            <label class="block mb-2 text-sm font-medium text-gray-900"
              >Choose File</label
            >
            <input
              type="file"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2"
              placeholder="Choose File"
            />
          </div>
          <div class="mb-6">
            <label class="block mb-2 text-sm font-medium text-gray-900"
              >Your password</label
            >
            <input
              type="text"
              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
            />
          </div>
        </div>

        <div class="mb-6">
          <label class="block mb-2 text-sm font-medium text-gray-900">Your message</label>
          <textarea
            rows="4"
            class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
            placeholder="Leave a comment..."
          ></textarea>
        </div>

        <div class="mb-8">
          <label class="block mb-2 text-sm font-medium text-gray-900"
            >Select your country</label
          >
          <select
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
          >
            <option>United States</option>
            <option>Canada</option>
            <option>France</option>
            <option>Germany</option>
          </select>
        </div>

        <div class="mb-10">
          <div class="flex items-center mb-4">
            <input
              checked
              id="checkbox-1"
              type="checkbox"
              value=""
              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
            />
            <label for="checkbox-1" class="ml-2 text-sm font-medium text-gray-900"
              >I agree to the
              <a href="#" class="text-blue-600 hover:underline"
                >terms and conditions</a
              >.
            </label>
          </div>

          <div class="flex items-center mb-4">
            <input
              id="checkbox-2"
              type="checkbox"
              value=""
              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
            />
            <label for="checkbox-2" class="ml-2 text-sm font-medium text-gray-900"
              >I want to get promotional offers</label
            >
          </div>

          <div class="flex items-center">
            <input
              type="checkbox"
              value=""
              class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300"
              disabled
            />
            <label class="ml-2 text-sm font-medium text-gray-400"
              >Eligible for international shipping (disabled)</label
            >
          </div>
        </div>

        <div class="mb-10">
          <div class="flex items-center mb-4">
            <input
              checked
              id="checkbox-1"
              type="radio"
              value=""
              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
            />
            <label for="checkbox-1" class="ml-2 text-sm font-medium text-gray-900"
              >I agree to the
              <a href="#" class="text-blue-600 hover:underline"
                >terms and conditions</a
              >.
            </label>
          </div>

          <div class="flex items-center mb-4">
            <input
              id="checkbox-2"
              type="radio"
              value=""
              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
            />
            <label for="checkbox-2" class="ml-2 text-sm font-medium text-gray-900"
              >I want to get promotional offers</label
            >
          </div>

          <div class="flex items-center">
            <input
              type="radio"
              value=""
              class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 "
              disabled
            />
            <label class="ml-2 text-sm font-medium text-gray-400"
              >Eligible for international shipping (disabled)</label
            >
          </div>
        </div>

        <div class="mb-10 flex gap-4 flex-wrap items-center">
          <div class="flex items-center">
            <input
              checked
              id="checkbox-1"
              type="radio"
              value=""
              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
            />
            <label for="checkbox-1" class="ml-2 text-sm font-medium text-gray-900"
              >I agree to the
              <a href="#" class="text-blue-600 hover:underline"
                >terms and conditions</a
              >.
            </label>
          </div>

          <div class="flex items-center">
            <input
              id="checkbox-2"
              type="radio"
              value=""
              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
            />
            <label for="checkbox-2" class="ml-2 text-sm font-medium text-gray-900"
              >I want to get promotional offers</label
            >
          </div>

          <div class="flex items-center">
            <input
              type="radio"
              value=""
              class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300"
              disabled
            />
            <label class="ml-2 text-sm font-medium text-gray-400"
              >Eligible for international shipping (disabled)</label
            >
          </div>
        </div>
        <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 focus:outline-none">Default</button>
      </form>

      <div class="relative overflow-x-auto border">
        <table class="w-full text-sm text-left text-gray-500">
          <thead
            class="text-xs text-gray-700 uppercase bg-gray-50"
          >
            <tr class="border-b">
              <th scope="col" class="px-6 py-3">Product name</th>
              <th scope="col" class="px-6 py-3">Color</th>
              <th scope="col" class="px-6 py-3">Category</th>
              <th scope="col" class="px-6 py-3">Price</th>
              <th scope="col" class="px-6 py-3 text-right">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr class="bg-white border-b">
              <th
                scope="row"
                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
              >
                Apple MacBook Pro 17"
              </th>
              <td class="px-6 py-4">Silver</td>
              <td class="px-6 py-4">Laptop</td>
              <td class="px-6 py-4">$2999</td>
              <td class="px-6 py-4 text-right">
                <a
                  href="#"
                  class="font-medium text-blue-600 hover:underline"
                  >Edit</a
                >
              </td>
            </tr>
            <tr class="bg-white border-b">
              <th
                scope="row"
                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
              >
                Apple MacBook Pro 17"
              </th>
              <td class="px-6 py-4">Silver</td>
              <td class="px-6 py-4">Laptop</td>
              <td class="px-6 py-4">$2999</td>
              <td class="px-6 py-4 text-right">
                <a
                  href="#"
                  class="font-medium text-blue-600 hover:underline"
                  >Edit</a
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>