Bootstrap Careers Components in Nightsable library

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto mb-20 text-center"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h2 class="font-heading mb-14" style="letter-spacing: -0.1rem;">Open positions</h2>
      <div class="d-flex flex-wrap justify-content-center gap-1 mb-14"><a class="btn btn-outline-primary fw-medium" href="#">All</a><a class="btn btn-outline-secondary-light fw-medium border-0" href="#">Design</a><a class="btn btn-outline-secondary-light fw-medium border-0" href="#">Software Engineering</a><a class="btn btn-outline-secondary-light fw-medium border-0" href="#">Customer Success</a><a class="btn btn-outline-secondary-light fw-medium border-0" href="#">Sales</a><a class="btn btn-outline-secondary-light fw-medium border-0" href="#">Marketing</a></div>
    </div>
    <div class="mw-4xl mx-auto mb-8 rounded-5 position-relative">
      <div class="position-absolute bottom-0 start-0 w-100 py-52" style="transform: rotate(180deg) scaleX(1.1); background: linear-gradient(180deg, #000 0%, rgba(14, 15, 17, 0.00) 100%);"></div><a class="btn btn-outline-dark w-100 py-12 ps-12 pe-20 mb-4 text-start border rounded-5 position-relative" href="#">
        <div class="mw-lg">
          <div class="d-flex mb-3 align-items-center"><span class="fs-9 text-primary">Marketing</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Remote</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
          <h6 class="font-heading mb-4">Product Manager, Instagram Camera</h6>
          <p class="mw-sm text-secondary-light">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        </div><span class="position-absolute top-50 end-0 me-8 me-md-12 translate-middle-y">
          <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></span></a><a class="btn btn-outline-dark w-100 py-12 ps-12 pe-20 mb-4 text-start border rounded-5 position-relative" href="#">
        <div class="mw-lg">
          <div class="d-flex mb-3 align-items-center"><span class="fs-9 text-primary">Customer Success</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Remote</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
          <h6 class="font-heading mb-4">Research Director</h6>
          <p class="mw-sm text-secondary-light">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        </div><span class="position-absolute top-50 end-0 me-8 me-md-12 translate-middle-y">
          <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></span></a><a class="btn btn-outline-dark w-100 py-12 ps-12 pe-20 mb-4 text-start border rounded-5 position-relative" href="#">
        <div class="mw-lg">
          <div class="d-flex mb-3 align-items-center"><span class="fs-9 text-primary">Software Engineering</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Remote</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
          <h6 class="font-heading mb-4">Engineering Manager</h6>
          <p class="mw-sm text-secondary-light">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        </div><span class="position-absolute top-50 end-0 me-8 me-md-12 translate-middle-y">
          <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></span></a><a class="opacity-25 btn btn-outline-dark w-100 py-12 ps-12 pe-20 text-start border rounded-5 position-relative" href="#">
        <div class="mw-lg">
          <div class="d-flex mb-3 align-items-center"><span class="fs-9 text-primary">Software Engineering</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Remote</span><span class="mx-4">·</span><span class="fs-9 text-secondary-light">Full Time</span></div>
          <h6 class="font-heading mb-4">Engineering Manager</h6>
          <p class="mw-sm text-secondary-light">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        </div><span class="position-absolute top-50 end-0 me-8 me-md-12 translate-middle-y">
          <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.79688 17.43L13.5019 11.725C14.1756 11.0512 14.1756 9.94873 13.5019 9.27498L7.79688 3.56998" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></span></a>
    </div>
    <div class="text-center"><a class="btn btn-primary w-100 mw-xs fw-medium" href="#">See all positions</a></div>
  </div>
</section>