happyguy

ImageOverlay.tsx

function ImageOverLay() {
  return (
    // class image
    <div className="w-full h-[500px] bg-center bg-cover bg-[url('../../public/happyGuy.jpg')] ">
      {/* class image-overlay */}
      <div className="w-full h-[500px] bg-gradient-to-r bg-[rgba(0,48,93,.6)] flex justify-center items-end gap-4">
        {/* job finder with three dots */}
        <div className="">
          <div className="bg-white p-1">
            <span>jobfinder</span>
            <h1>job und karriere entedecken</h1>
          </div>
          {/* input part */}
          <div className="bg-orange-500">
            <input type="text" placeholder="suche nach jobtitle, region oder stadt"  />
            <button>Job finder</button>
          </div>
        </div>
      </div>
    </div>
  );
}
export default ImageOverLay;