jingrow/components/career/Jobs3.jsx

import React from "react";

export default function Jobs3() {
  return (
    <section className="wrapper !bg-[#edf2fc]">
      <div className="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
        <div className="flex flex-wrap mx-[-15px] items-center !mb-6">
          <div className="md:w-8/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!pr-40">
            <h2 className="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-0">
              More Job Openings
            </h2>
          </div>
          {/*/column */}
          <div className="md:w-4/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-auto lg:!ml-auto md:!ml-auto xl:!text-right lg:!text-right md:!text-right !mt-5 xl:!mt-0 lg:!mt-0 md:!mt-0">
            <a
              href="#"
              className="btn btn-primary !text-white !bg-[#22b573] border-[#22b573] hover:text-white hover:bg-[#22b573] hover:!border-[#22b573] active:text-white active:bg-[#22b573] active:border-[#22b573] disabled:text-white disabled:bg-[#22b573] disabled:border-[#22b573] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
            >
              Explore Positions
            </a>
          </div>
          {/*/column */}
        </div>
        {/*/.row */}
        <div className="flex flex-wrap mx-[-15px] !mt-[-30px]">
          <div className="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
            <a
              href="#"
              className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full"
            >
              <div className="card-body p-5 flex flex-row">
                <div>
                  <span className="flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(226,98,107)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">
                    SD
                  </span>
                </div>
                <div>
                  <span className="badge bg-[#e0e9fa] !text-[#22b573] rounded py-1 !mb-2">
                    Full Time
                  </span>
                  <h4 className="!mb-1">Senior Graphic Designer</h4>
                  <p className="!mb-0 !text-[#60697b]">San Francisco, US</p>
                </div>
              </div>
            </a>
          </div>
          {/*/column */}
          <div className="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
            <a
              href="#"
              className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full"
            >
              <div className="card-body p-5 flex flex-row">
                <div>
                  <span className="flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(69,196,160)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">
                    UX
                  </span>
                </div>
                <div>
                  <span className="badge bg-[#e4f1f6] !text-[#54a8c7] rounded py-1 !mb-2">
                    Remote
                  </span>
                  <h4 className="!mb-1">UI/UX Designer</h4>
                  <p className="!mb-0 !text-[#60697b]">Anywhere</p>
                </div>
              </div>
            </a>
          </div>
          {/*/column */}
          <div className="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
            <a
              href="#"
              className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full"
            >
              <div className="card-body p-5 flex flex-row">
                <div>
                  <span className="flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(250,183,88)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">
                    AN
                  </span>
                </div>
                <div>
                  <span className="badge bg-[#e0e9fa] !text-[#22b573] rounded py-1 !mb-2">
                    Full Time
                  </span>
                  <h4 className="!mb-1">Multimedia Artist &amp; Animator</h4>
                  <p className="!mb-0 !text-[#60697b]">Birmingham, UK</p>
                </div>
              </div>
            </a>
          </div>
          {/*/column */}
          <div className="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
            <a
              href="#"
              className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full"
            >
              <div className="card-body p-5 flex flex-row">
                <div>
                  <span className="flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(116,126,209)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">
                    FD
                  </span>
                </div>
                <div>
                  <span className="badge bg-[#f0eaf6] !text-[#22b573] rounded py-1 !mb-2">
                    Part Time
                  </span>
                  <h4 className="!mb-1">Front End Developer</h4>
                  <p className="!mb-0 !text-[#60697b]">Sydney, AU</p>
                </div>
              </div>
            </a>
          </div>
          {/*/column */}
          <div className="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
            <a
              href="#"
              className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full"
            >
              <div className="card-body p-5 flex flex-row">
                <div>
                  <span className="flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(247,139,119)] opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">
                    MD
                  </span>
                </div>
                <div>
                  <span className="badge bg-[#e0e9fa] !text-[#22b573] rounded py-1 !mb-2">
                    Full Time
                  </span>
                  <h4 className="!mb-1">Mobile Developer</h4>
                  <p className="!mb-0 !text-[#60697b]">San Francisco, US</p>
                </div>
              </div>
            </a>
          </div>
          {/*/column */}
          <div className="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
            <a
              href="#"
              className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] lift !h-full"
            >
              <div className="card-body p-5 flex flex-row">
                <div>
                  <span className="flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] !bg-[rgba(209,107,134)] !opacity-100 !text-white !w-[3rem] !h-[3rem] text-[1rem] !mr-4">
                    ND
                  </span>
                </div>
                <div>
                  <span className="badge bg-[#e0e9fa] !text-[#22b573] rounded py-1 !mb-2">
                    Full Time
                  </span>
                  <h4 className="!mb-1">.NET Developer</h4>
                  <p className="!mb-0 !text-[#60697b]">Manchester, UK</p>
                </div>
              </div>
            </a>
          </div>
          {/*/column */}
        </div>
        {/*/.row */}
      </div>
      {/* /.container */}
    </section>
  );
}