Careers Components in Casper library

Careers from Casper

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 left-0 ml-52 -mt-40 w-160 h-160 bg-gradient-to-t from-purple-600 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="absolute top-0 left-0 ml-148 -mt-40 w-135 h-135 bg-gradient-to-t from-blue-500 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="relative">
      <div class="max-w-xl mx-auto mb-16 text-center">
        <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-2">Careers at Casper</h2>
        <p class="text-xl text-gray-500">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
      </div>
      <div class="max-w-2xl lg:max-w-8xl mx-auto">
        <div class="flex flex-wrap -mx-4 -mb-8">
          <div class="w-full lg:w-1/2 px-4 mb-8">
            <a class="block p-6 rounded-3xl shadow-box-violet overflow-hidden bg-white bg-opacity-10 hover:bg-opacity-20" href="#">
              <div class="flex flex-wrap items-start -mx-4">
                <div class="w-full sm:w-4/5 sm:flex items-center px-4">
                  <img class="h-full rounded-lg" src="casper-assets/careers/little-photo-1.png" alt="">
                  <div class="mt-6 sm:mt-0 sm:ml-6">
                    <h3 class="text-2xl text-white font-medium">Product Designer</h3>
                    <p class="text-sm text-gray-500 mb-2">Excepteur sint occaecat cupidatat non proident.</p>
                    <div class="inline-flex mr-8 items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Ponorogo</span>
                    </div>
                    <div class="inline-flex items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Full-time</span>
                    </div>
                  </div>
                </div>
                <div class="w-auto ml-auto mb-1 sm:mb-0 px-4 order-first sm:order-last">
                  <span class="inline-block py-px px-1 text-xs font-medium text-black bg-sky-900 rounded">Design</span>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full lg:w-1/2 px-4 mb-8">
            <a class="block p-6 rounded-3xl shadow-box-violet overflow-hidden bg-white bg-opacity-10 hover:bg-opacity-20" href="#">
              <div class="flex flex-wrap items-start -mx-4">
                <div class="w-full sm:w-4/5 sm:flex items-center px-4">
                  <img class="h-full rounded-lg" src="casper-assets/careers/little-photo-2.png" alt="">
                  <div class="mt-6 sm:mt-0 sm:ml-6">
                    <h3 class="text-2xl text-white font-medium">Marketing Manager</h3>
                    <p class="text-sm text-gray-500 mb-2">Excepteur sint occaecat cupidatat non proident.</p>
                    <div class="inline-flex mr-8 items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Tokyo</span>
                    </div>
                    <div class="inline-flex items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Full-time</span>
                    </div>
                  </div>
                </div>
                <div class="w-auto ml-auto mb-1 sm:mb-0 px-4 order-first sm:order-last">
                  <span class="inline-block py-px px-1 text-xs font-medium text-black bg-red-500 rounded">Marketing</span>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full lg:w-1/2 px-4 mb-8">
            <a class="block p-6 rounded-3xl shadow-box-violet overflow-hidden bg-white bg-opacity-10 hover:bg-opacity-20" href="#">
              <div class="flex flex-wrap items-start -mx-4">
                <div class="w-full sm:w-4/5 sm:flex items-center px-4">
                  <img class="h-full rounded-lg" src="casper-assets/careers/little-photo-3.png" alt="">
                  <div class="mt-6 sm:mt-0 sm:ml-6">
                    <h3 class="text-2xl text-white font-medium">Sr. Mobile Developer</h3>
                    <p class="text-sm text-gray-500 mb-2">Excepteur sint occaecat cupidatat non proident.</p>
                    <div class="inline-flex mr-8 items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">New York</span>
                    </div>
                    <div class="inline-flex items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Full-time</span>
                    </div>
                  </div>
                </div>
                <div class="w-auto ml-auto mb-1 sm:mb-0 px-4 order-first sm:order-last">
                  <span class="inline-block py-px px-1 text-xs font-medium text-black bg-yellow-600 rounded">Developer</span>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full lg:w-1/2 px-4 mb-8">
            <a class="block p-6 rounded-3xl shadow-box-violet overflow-hidden bg-white bg-opacity-10 hover:bg-opacity-20" href="#">
              <div class="flex flex-wrap items-start -mx-4">
                <div class="w-full sm:w-4/5 sm:flex items-center px-4">
                  <img class="h-full rounded-lg" src="casper-assets/careers/little-photo-4.png" alt="">
                  <div class="mt-6 sm:mt-0 sm:ml-6">
                    <h3 class="text-2xl text-white font-medium">Sr. UX Designer</h3>
                    <p class="text-sm text-gray-500 mb-2">Excepteur sint occaecat cupidatat non proident.</p>
                    <div class="inline-flex mr-8 items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Ponorogo</span>
                    </div>
                    <div class="inline-flex items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Full-time</span>
                    </div>
                  </div>
                </div>
                <div class="w-auto ml-auto mb-1 sm:mb-0 px-4 order-first sm:order-last">
                  <span class="inline-block py-px px-1 text-xs font-medium text-black bg-sky-900 rounded">Design</span>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full lg:w-1/2 px-4 mb-8">
            <a class="block p-6 rounded-3xl shadow-box-violet overflow-hidden bg-white bg-opacity-10 hover:bg-opacity-20" href="#">
              <div class="flex flex-wrap items-start -mx-4">
                <div class="w-full sm:w-4/5 sm:flex items-center px-4">
                  <img class="h-full rounded-lg" src="casper-assets/careers/little-photo-4.png" alt="">
                  <div class="mt-6 sm:mt-0 sm:ml-6">
                    <h3 class="text-2xl text-white font-medium">3D Model</h3>
                    <p class="text-sm text-gray-500 mb-2">Excepteur sint occaecat cupidatat non proident.</p>
                    <div class="inline-flex mr-8 items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Ponorogo</span>
                    </div>
                    <div class="inline-flex items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Full-time</span>
                    </div>
                  </div>
                </div>
                <div class="w-auto ml-auto mb-1 sm:mb-0 px-4 order-first sm:order-last">
                  <span class="inline-block py-px px-1 text-xs font-medium text-black bg-sky-900 rounded">Graphic</span>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full lg:w-1/2 px-4 mb-8">
            <a class="block p-6 rounded-3xl shadow-box-violet overflow-hidden bg-white bg-opacity-10 hover:bg-opacity-20" href="#">
              <div class="flex flex-wrap items-start -mx-4">
                <div class="w-full sm:w-4/5 sm:flex items-center px-4">
                  <img class="h-full rounded-lg" src="casper-assets/careers/little-photo-5.png" alt="">
                  <div class="mt-6 sm:mt-0 sm:ml-6">
                    <h3 class="text-2xl text-white font-medium">UX Researcher</h3>
                    <p class="text-sm text-gray-500 mb-2">Excepteur sint occaecat cupidatat non proident.</p>
                    <div class="inline-flex mr-8 items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Tokyo</span>
                    </div>
                    <div class="inline-flex items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Full-time</span>
                    </div>
                  </div>
                </div>
                <div class="w-auto ml-auto mb-1 sm:mb-0 px-4 order-first sm:order-last">
                  <span class="inline-block py-px px-1 text-xs font-medium text-black bg-teal-500 rounded">Experience</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Careers from Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-20" src="casper-assets/blur/blur-center-violet.svg" alt=""/><img class="position-absolute top-0 end-0 me-n64 mt-n64" src="casper-assets/blur/blur-circle-blue.svg" alt=""/> <div class="container position-relative"> <div class="mw-2xl mx-auto mb-16 text-center"> <h2 class="font-heading fw-medium text-white mb-6">Careers at Casper</h2> <p class="mw-lg mx-auto fs-6 text-light-light">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p> </div> <div class="mw-sm mw-sm-xl mx-auto mw-lg-none"> <div class="row mb-n8"> <div class="col-lg-6 mb-8"> <div class="bg-secondary bg-opacity-10 h-100 rounded" style="backdrop-filter: blur(10px);"><a class="btn w-100 h-100 p-6 btn-outline-primary-dark text-start rounded position-relative" href="#"> <div class="row w-100 align-items-center"> <div class="col-6 col-sm-3 mb-6 mb-sm-0"><img class="img-fluid d-block w-100" src="casper-assets/careers/little-photo-1.png" alt=""/></div> <div class="col-12 col-sm-7 col-xl-9"> <h5 class="text-white fw-medium mb-2">Product Designer</h5> <p class="small text-light-light mb-2">Excepteur sint occaecat cupidatat non proident.</p> <div class="d-flex align-items-center"> <div> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Ponorogo</span> </div> <div class="ms-8"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Full-time</span> </div> </div> </div> </div><span class="position-absolute top-0 end-0 m-6 px-2 py-1 bg-info rounded-1 text-black" style="font-size: 12px;">Design</span></a></div> </div> <div class="col-lg-6 mb-8"> <div class="bg-secondary bg-opacity-10 h-100 rounded" style="backdrop-filter: blur(10px);"><a class="btn w-100 h-100 p-6 btn-outline-primary-dark text-start rounded position-relative" href="#"> <div class="row w-100 align-items-center"> <div class="col-6 col-sm-3 mb-6 mb-sm-0"><img class="img-fluid d-block w-100" src="casper-assets/careers/little-photo-2.png" alt=""/></div> <div class="col-12 col-sm-7 col-xl-9"> <h5 class="text-white fw-medium mb-2">Marketing Manager</h5> <p class="small text-light-light mb-2">Excepteur sint occaecat cupidatat non proident.</p> <div class="d-flex align-items-center"> <div> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Tokyo</span> </div> <div class="ms-8"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Full-time</span> </div> </div> </div> </div><span class="position-absolute top-0 end-0 m-6 px-2 py-1 bg-danger-dark rounded-1 text-black" style="font-size: 12px;">Marketing</span></a></div> </div> <div class="col-lg-6 mb-8"> <div class="bg-secondary bg-opacity-10 h-100 rounded" style="backdrop-filter: blur(10px);"><a class="btn w-100 h-100 p-6 btn-outline-primary-dark text-start rounded position-relative" href="#"> <div class="row w-100 align-items-center"> <div class="col-6 col-sm-3 mb-6 mb-sm-0"><img class="img-fluid d-block w-100" src="casper-assets/careers/little-photo-3.png" alt=""/></div> <div class="col-12 col-sm-7 col-xl-9"> <h5 class="text-white fw-medium mb-2">Sr. Mobile Developer</h5> <p class="small text-light-light mb-2">Excepteur sint occaecat cupidatat non proident.</p> <div class="d-flex align-items-center"> <div> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">New York</span> </div> <div class="ms-8"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Full-time</span> </div> </div> </div> </div><span class="position-absolute top-0 end-0 m-6 px-2 py-1 bg-warning rounded-1 text-black" style="font-size: 12px;">Developer</span></a></div> </div> <div class="col-lg-6 mb-8"> <div class="bg-secondary bg-opacity-10 h-100 rounded" style="backdrop-filter: blur(10px);"><a class="btn w-100 h-100 p-6 btn-outline-primary-dark text-start rounded position-relative" href="#"> <div class="row w-100 align-items-center"> <div class="col-6 col-sm-3 mb-6 mb-sm-0"><img class="img-fluid d-block w-100" src="casper-assets/careers/little-photo-4.png" alt=""/></div> <div class="col-12 col-sm-7 col-xl-9"> <h5 class="text-white fw-medium mb-2">Sr. UX Designer</h5> <p class="small text-light-light mb-2">Excepteur sint occaecat cupidatat non proident.</p> <div class="d-flex align-items-center"> <div> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Wakanda</span> </div> <div class="ms-8"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Full-time</span> </div> </div> </div> </div><span class="position-absolute top-0 end-0 m-6 px-2 py-1 bg-info rounded-1 text-dark" style="font-size: 12px;">Design</span></a></div> </div> <div class="col-lg-6 mb-8"> <div class="bg-secondary bg-opacity-10 h-100 rounded" style="backdrop-filter: blur(10px);"><a class="btn w-100 h-100 p-6 btn-outline-primary-dark text-start rounded position-relative" href="#"> <div class="row w-100 align-items-center"> <div class="col-6 col-sm-3 mb-6 mb-sm-0"><img class="img-fluid d-block w-100" src="casper-assets/careers/little-photo-5.png" alt=""/></div> <div class="col-12 col-sm-7 col-xl-9"> <h5 class="text-white fw-medium mb-2">3D Model</h5> <p class="small text-light-light mb-2">Excepteur sint occaecat cupidatat non proident.</p> <div class="d-flex align-items-center"> <div> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Ponorogo</span> </div> <div class="ms-8"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Full-time</span> </div> </div> </div> </div><span class="position-absolute top-0 end-0 m-6 px-2 py-1 bg-info rounded-1 text-dark" style="font-size: 12px;">Graphic</span></a></div> </div> <div class="col-lg-6 mb-8"> <div class="bg-secondary bg-opacity-10 h-100 rounded" style="backdrop-filter: blur(10px);"><a class="btn w-100 h-100 p-6 btn-outline-primary-dark text-start rounded position-relative" href="#"> <div class="row w-100 align-items-center"> <div class="col-6 col-sm-3 mb-6 mb-sm-0"><img class="img-fluid d-block w-100" src="casper-assets/careers/little-photo-1.png" alt=""/></div> <div class="col-12 col-sm-7 col-xl-9"> <h5 class="text-white fw-medium mb-2">Product Designer</h5> <p class="small text-light-light mb-2">Excepteur sint occaecat cupidatat non proident.</p> <div class="d-flex align-items-center"> <div> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Ponorogo</span> </div> <div class="ms-8"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg><span class="ms-2 text-white small">Full-time</span> </div> </div> </div> </div><span class="position-absolute top-0 end-0 m-6 px-2 py-1 bg-info rounded-1 text-dark" style="font-size: 12px;">Design</span></a></div> </div> </div> </div> </div> </section>

Careers Components by Shuffle

Choose from 10 variations of Careers UI components. Presented here are variants available in Casper library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Careers UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Careers Components in Casper library

Framework

UI Library

Components

Careers from Casper

Careers from Casper

Careers Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Why the Lifetime License price is changing

New in your Lifetime License

AI Agent

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Careers Components in Casper library

Framework

UI Library

Components

Careers from Casper

Careers from Casper

Careers Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company