We Know how to effectively use the user experience

      
<body class="dark:bg-[#181825]">
  <header class="h-screen w-full bg-contain bg-top bg-no-repeat md:bg-[url('https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977107/webwinds/images/hero-05-lg-bg-light_lxgwhs.svg')] md:dark:bg-[url('https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977106/webwinds/images/hero-05-lg-bg-dark_swsvmb.svg')]">
    <nav class="container mx-auto max-w-full px-4 py-4 md:flex md:items-center md:justify-between md:px-10 md:py-4">
      <div class="flex items-center justify-between md:w-2/12">
        <a href="#" class="flex items-center text-xl text-slate-900 dark:text-white md:text-2xl md:font-semibold">
          <img class="mr-3 h-6 md:mt-0 md:h-10" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977478/webwinds/logos/dummy-logo-3_w775pe.svg" alt="logo" />
          <p>Slick</p>
        </a>
        <!-- Mobile menu button -->
        <div class="flex md:hidden">
          <button type="button" class="text-slate-900 focus:text-slate-600 focus:outline-none dark:text-slate-400" aria-label="toggle menu">
            <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
              <path fill-rule="evenodd"
                d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
              </path>
            </svg>
          </button>
        </div>
      </div>

      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
      <div class="hidden w-full md:ml-5 md:flex md:items-center md:justify-between">
        <div></div>
        <div class="flex flex-col md:flex-row">
          <a href="#" class="my-4 mr-10 font-medium text-slate-900 dark:text-white md:my-0">Home</a>
          <a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Products</a>
          <a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Customers</a>
          <a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Articles</a>
        </div>

        <div class="flex flex-col md:flex-row items-center justify-center">
          <button type="button" class="mt-4 inline-flex w-full items-center justify-center rounded-lg border-0 text-base text-slate-500 hover:text-slate-900 focus:outline-none dark:text-slate-400 dark:hover:text-white md:mt-0 md:mr-5 md:w-auto">
            Sign in
          </button>
          <button type="button" class="my-4 inline-flex w-full items-center justify-center rounded-lg border-0 bg-blue-500 py-3 px-5 text-base text-white hover:bg-blue-600 focus:outline-none md:my-0 md:w-auto">
            Start Free
          </button>
        </div>
      </div>
    </nav>
    <main class="continer relative mx-auto flex h-full max-w-full flex-col items-center justify-center">
      <img class="dark:hidden md:absolute top-12 -z-10" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977124/webwinds/images/Hero-image-5-light_x1tqin.svg" alt="" />
      <img class="hidden dark:block md:absolute top-12 -z-10" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977118/webwinds/images/Hero-image-5-dark_xh86uo.svg" alt="" />
      <h1 class="md:w-8/12 text-center text-4xl md:text-6xl text-slate-900 dark:text-white font-semibold leading-snug tracking-tighter">
        We Know how to effectively use the user experience
      </h1>
      <div class="mt-20 px-5 md:px-0">
        <button class="w-full rounded-lg bg-blue-500 px-10 py-4 text-white transition duration-100 hover:bg-blue-600 md:w-auto">
          Get started
        </button>
        <button class="mt-2 md:mt-0 w-full rounded-lg px-10 py-4 text-slate-800 bg-white hover:shadow-lg transition duration-100 dark:text-white dark:bg-[#181827] dark:hover:bg-[#272740] md:ml-5 md:w-auto">
          Request Demo
        </button>
      </div>
    </main>
  </header>
</body>