Careers Components in Gradia library

<section class="pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-20 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-gray-900" >Available positions</h2>
    <p class="mb-7 font-heading font-medium text-xl sm:text-2xl text-gray-900" >Development</p>
    <div class="flex flex-wrap -m-3 mb-12">
      <div class="w-full md:w-1/2 xl:w-1/3 p-3"><a class="block h-full p-6 border border-gray-200 hover:border-gray-300 rounded-md" href="#">
          <p class="mb-7 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >London, UK</p>
          <h3 class="mb-1.5 font-heading font-semibold text-lg text-gray-900" >Software Tester</h3>
          <p class="text-gray-600 text-sm" >Full Time</p></a></div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-3"><a class="block h-full p-6 border border-gray-200 hover:border-gray-300 rounded-md" href="#">
          <p class="mb-7 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Remote</p>
          <h3 class="mb-1.5 font-heading font-semibold text-lg text-gray-900" >Senior Software Developer</h3>
          <p class="text-gray-600 text-sm" >Full Time</p></a></div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-3"><a class="block h-full p-6 border border-gray-200 hover:border-gray-300 rounded-md" href="#">
          <p class="mb-7 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >London, UK</p>
          <h3 class="mb-1.5 font-heading font-semibold text-lg text-gray-900" >Product Manager</h3>
          <p class="text-gray-600 text-sm" >Full Time</p></a></div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-3"><a class="block h-full p-6 border border-gray-200 hover:border-gray-300 rounded-md" href="#">
          <p class="mb-7 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >London, UK</p>
          <h3 class="mb-1.5 font-heading font-semibold text-lg text-gray-900" >React Developer</h3>
          <p class="text-gray-600 text-sm" >Full Time</p></a></div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-3"><a class="block h-full p-6 border border-gray-200 hover:border-gray-300 rounded-md" href="#">
          <p class="mb-7 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Remote</p>
          <h3 class="mb-1.5 font-heading font-semibold text-lg text-gray-900" >Full-Stack Develoer</h3>
          <p class="text-gray-600 text-sm" >Full Time</p></a></div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-3"><a class="block h-full p-6 border border-gray-200 hover:border-gray-300 rounded-md" href="#">
          <p class="mb-7 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >London, UK</p>
          <h3 class="mb-1.5 font-heading font-semibold text-lg text-gray-900" >Sr. Software Tester</h3>
          <p class="text-gray-600 text-sm" >Full Time</p></a></div>
    </div>
    <p class="mb-7 font-heading font-medium text-xl sm:text-2xl text-gray-900" >Marketing</p>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 xl:w-1/3 p-3"><a class="block h-full p-6 border border-gray-200 hover:border-gray-300 rounded-md" href="#">
          <p class="mb-7 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >London, UK</p>
          <h3 class="mb-1.5 font-heading font-semibold text-lg text-gray-900" >Software Tester</h3>
          <p class="text-gray-600 text-sm" >Full Time</p></a></div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-3"><a class="block h-full p-6 border border-gray-200 hover:border-gray-300 rounded-md" href="#">
          <p class="mb-7 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >London, UK</p>
          <h3 class="mb-1.5 font-heading font-semibold text-lg text-gray-900" >Software Tester</h3>
          <p class="text-gray-600 text-sm" >Full Time</p></a></div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-3"><a class="block h-full p-6 border border-gray-200 hover:border-gray-300 rounded-md" href="#">
          <p class="mb-7 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >London, UK</p>
          <h3 class="mb-1.5 font-heading font-semibold text-lg text-gray-900" >Software Tester</h3>
          <p class="text-gray-600 text-sm" >Full Time</p></a></div>
    </div>
  </div>
</section>

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <h2 class="fs-7 mb-20" >Available positions</h2>
    <h3 class="fs-15 fw-medium mb-7" >Development</h3>
    <div class="row mb-12 g-6">
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >London, UK</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Software Tester</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >Remote</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Senior Software Developer</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >London, UK</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Product Manager</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >London, UK</h3>
            <h3 class="fs-17 fw-semibold mb-2" >React Developer</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >Remote</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Full-Stact Develoer</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >London, UK</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Sr. Software Tester</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
    </div>
    <h3 class="fs-15 fw-medium mb-7" >Marketing</h3>
    <div class="row g-6">
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >London, UK</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Software Tester</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >London, UK</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Software Tester</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >London, UK</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Software Tester</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
    </div>
  </div>
</section>