Tailwind CSS Career Pages Blocks

All Blocks
Marketing
Career Pages

Career Pages

Browse Tailwind CSS career page layouts for job listings, recruitment sites, and hiring pages.

An intro block leads into grouped job-list sections with repeated role rows beneath it.

<div class="bg-background">
                      <div class="max-w-5xl mx-auto px-4 xl:px-0 py-10 lg:py-20">
                        
                        <div class="max-w-3xl mb-10 lg:mb-14">
                          <h2 class="text-foreground font-semibold text-2xl md:text-4xl md:leading-tight">Explore opportunities</h2>
                          <p class="mt-1 text-muted-foreground-1">We're looking for passionate, self-motivated and daring individuals to join our team.</p>
                        </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                          
                          <div>
                            <label class="block mb-2 text-sm text-foreground">
                              Department
                            </label>

<div class="relative inline-block w-full">
                              <select id="hs-pro-select-department" data-hs-select='{
                                  "placeholder": "Select department",
                                  "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                  "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2.5 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden hover:border-line-3 focus:outline-hidden",
                                  "dropdownClasses": "inset-s-0 w-full max-h-72 p-1 space-y-2 z-50 overflow-hidden overflow-y-auto p-4 bg-select border-4 border-select-line text-select-item-foreground rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                  "optionClasses": "hs-selected:text-primary",
                                  "optionTemplate": "<div class=\"flex justify-between items-center hover:text-primary-hover w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"text-primary shrink-0 size-3.5\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                  "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                                }' class="hidden">
                                <option value="">Choose</option>
                                <option value="all" selected>All</option>
                                <option value="Engineering">Engineering</option>
                                <option value="Design">Design</option>
                                <option value="Product">Product</option>
                                <option value="Marketing">Marketing</option>
                                <option value="Sales">Sales</option>
                                <option value="Customer Success">Customer Success</option>
                                <option value="Operations">Operations</option>
                                <option value="Human Resources">Human Resources</option>
                              </select>
                            </div>
                            
                          </div>

<div>
                            <label class="block mb-2 text-sm text-foreground">
                              Location
                            </label>

<div class="relative inline-block w-full">
                              <select id="hs-pro-select-location" data-hs-select='{
                                "placeholder": "Select location",
                                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2.5 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden hover:border-line-3 focus:outline-hidden",
                                "dropdownClasses": "inset-s-0 w-full max-h-72 p-1 space-y-2 z-50 overflow-hidden overflow-y-auto p-4 bg-select border-4 border-select-line text-select-item-foreground rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                "optionClasses": "hs-selected:text-primary",
                                "optionTemplate": "<div class=\"flex justify-between items-center hover:text-primary-hover w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"text-primary shrink-0 size-3.5\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                                }' class="hidden">
                                <option value="">Choose</option>
                                <option value="all" selected>All</option>
                                <option value="San Francisco">San Francisco</option>
                                <option value="New York">New York</option>
                                <option value="London">London</option>
                                <option value="Berlin">Berlin</option>
                                <option value="Tokyo">Tokyo</option>
                                <option value="Singapore">Singapore</option>
                                <option value="Sydney">Sydney</option>
                                <option value="Remote">Remote</option>
                              </select>
                            </div>
                            
                          </div>

<div>
                            <label class="block mb-2 text-sm text-foreground">
                              Job Type
                            </label>

<div class="relative inline-block w-full">
                              <select id="hs-pro-select-job-type" data-hs-select='{
                                "placeholder": "Select job type",
                                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2.5 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden hover:border-line-3 focus:outline-hidden",
                                "dropdownClasses": "inset-s-0 w-full max-h-72 p-1 space-y-2 z-50 overflow-hidden overflow-y-auto p-4 bg-select border-4 border-select-line text-select-item-foreground rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                "optionClasses": "hs-selected:text-primary",
                                "optionTemplate": "<div class=\"flex justify-between items-center hover:text-primary-hover w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"text-primary shrink-0 size-3.5\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                                }' class="hidden">
                                <option value="">Choose</option>
                                <option value="all" selected>All</option>
                                <option value="Full-time">Full-time</option>
                                <option value="Part-time">Part-time</option>
                                <option value="Contract">Contract</option>
                                <option value="Freelance">Freelance</option>
                                <option value="Internship">Internship</option>
                                <option value="Temporary">Temporary</option>
                              </select>
                            </div>
                            
                          </div>
                          
                        </div>

<div class="pt-10 mt-10 border-t border-line-1">
                          
                          <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                              <h3 class="text-xl md:text-3xl font-medium text-foreground">
                                Engineering
                              </h3>

<p class="mt-2 text-sm text-muted-foreground-1">
                                3 open positions
                              </p>
                            </div>

<div class="flex flex-col gap-y-3">
                              
                              <a class="py-3 px-4 group relative w-full flex justify-between gap-x-4 rounded-xl bg-layer border border-layer-line shadow-2xs hover:border-line-3 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-line-3" href="careers-job-details.html">
                                <div class="grow">
                                  <span class="text-sm font-medium text-foreground">
                                    Senior Frontend Developer
                                  </span>
                                  <p class="text-sm text-muted-foreground">
                                    Remote, Full-time
                                  </p>
                                </div>

<a class="py-3 px-4 group relative w-full flex justify-between gap-x-4 rounded-xl bg-layer border border-layer-line shadow-2xs hover:border-line-3 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-line-3" href="careers-job-details.html">
                                <div class="grow">
                                  <span class="text-sm font-medium text-foreground">
                                    Backend Engineer
                                  </span>
                                  <p class="text-sm text-muted-foreground">
                                    New York, Full-time
                                  </p>
                                </div>

<a class="py-3 px-4 group relative w-full flex justify-between gap-x-4 rounded-xl bg-layer border border-layer-line shadow-2xs hover:border-line-3 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-line-3" href="careers-job-details.html">
                                <div class="grow">
                                  <span class="text-sm font-medium text-foreground">
                                    DevOps Engineer
                                  </span>
                                  <p class="text-sm text-muted-foreground">
                                    London, Contract
                                  </p>
                                </div>

<div class="flex items-center gap-x-1">
                                  <span class="text-sm font-medium text-primary opacity-0 lg:group-hover:opacity-100 lg:transition-opacity lg:duration-300 lg:group-focus:opacity-100">
                                    Apply
                                  </span>
                                  <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                                </div>
                              </a>
                              
                            </div>
                            
                          </div>
                          
                        </div>

<div class="pt-10 mt-10 border-t border-line-1">
                          
                          <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                              <h3 class="text-xl md:text-3xl font-medium text-foreground">
                                Design
                              </h3>

<p class="mt-2 text-sm text-muted-foreground-1">
                                2 open positions
                              </p>
                            </div>

<div class="flex flex-col gap-y-3">
                              
                              <a class="py-3 px-4 group relative w-full flex justify-between gap-x-4 rounded-xl bg-layer border border-layer-line shadow-2xs hover:border-line-3 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-line-3" href="careers-job-details.html">
                                <div class="grow">
                                  <span class="text-sm font-medium text-foreground">
                                    UI/UX Designer
                                  </span>
                                  <p class="text-sm text-muted-foreground">
                                    Remote, Full-time
                                  </p>
                                </div>

<a class="py-3 px-4 group relative w-full flex justify-between gap-x-4 rounded-xl bg-layer border border-layer-line shadow-2xs hover:border-line-3 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-line-3" href="careers-job-details.html">
                                <div class="grow">
                                  <span class="text-sm font-medium text-foreground">
                                    Product Designer
                                  </span>
                                  <p class="text-sm text-muted-foreground">
                                    San Francisco, Full-time
                                  </p>
                                </div>

Open related careers page

Career Pages

Career Listing Page with Category Filters Pro