Careers UI Components – Flow Library

<section class="py-12 lg:pt-16 lg:pb-24 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center -mx-4 mb-16">
                <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                    <h1 class="font-heading text-4xl sm:text-6xl md:text-7xl tracking-sm mb-6">Join our team</h1>
                    <p class="text-lg text-gray-700">Our philosophy is simple – make the world a greener place. </p>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                    <img class="block md:h-80 lg:h-72" src="flow-assets/career/team-members-photos.png" alt="">
                </div>
            </div>
            <div class="flex flex-wrap items-center -mx-4 mb-16">
                <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
                    <h3 class="text-3xl font-medium">Open positions</h3>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                    <div class="sm:flex">
                        <div class="relative inline-block w-full max-w-xs mb-4 sm:mb-0 sm:mr-4 bg-white rounded-full">
                            <span class="absolute top-1/2 right-0 mr-4 transform -translate-y-1/2">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6.3999 8.2L9.9999 11.8L13.5999 8.2" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>  
                            </span>    
                            <select name="" id="" class="w-full px-4 py-3 font-medium border rounded-full appearance-none cursor-pointer outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 bg-transparent relative">
                                <option value="1">All departments</option>
                                <option value="2">Sales</option>
                                <option value="3">Marketing</option>
                            </select>
                        </div>
                        <div class="relative inline-block w-full max-w-xs bg-white rounded-full">
                            <span class="absolute top-1/2 right-0 mr-4 transform -translate-y-1/2">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6.3999 8.2L9.9999 11.8L13.5999 8.2" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>  
                            </span>    
                            <select name="" id="" class="w-full px-4 py-3 font-medium border rounded-full appearance-none cursor-pointer outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 bg-transparent relative">
                                <option value="1">All locations</option>
                                <option value="2">USA</option>
                                <option value="3">Europe</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mb-16">
                <span class="block font-medium text-gray-600 mb-6">Research and Development (R&amp;D)</span>
                <div class="py-6 px-8 mb-4 bg-white rounded-2xl shadow-md">
                    <div class="flex flex-col sm:flex-row md:justify-between items-start">
                        <div class="mb-6 sm:mb-0">
                            <h4 class="text-xl font-medium mb-3">Renewable Energy Researcher</h4>
                            <div class="inline-flex mr-8 items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.75 8.5C16.75 13.75 10 18.25 10 18.25C10 18.25 3.25 13.75 3.25 8.5C3.25 6.70979 3.96116 4.9929 5.22703 3.72703C6.4929 2.46116 8.20979 1.75 10 1.75C11.7902 1.75 13.5071 2.46116 14.773 3.72703C16.0388 4.9929 16.75 6.70979 16.75 8.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 10.75C11.2426 10.75 12.25 9.74264 12.25 8.5C12.25 7.25736 11.2426 6.25 10 6.25C8.75736 6.25 7.75 7.25736 7.75 8.5C7.75 9.74264 8.75736 10.75 10 10.75Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                
                                <span class="ml-2 font-medium text-gray-900">San Francisco, US</span>
                            </div>
                            <div class="inline-flex items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 5.5V10L13 11.5" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                                          
                                <span class="ml-2 font-medium text-gray-900">Full-Time</span>
                            </div>
                        </div>
                        <a href="#" class="inline-flex ml-auto group items-center text-lg text-black hover:text-lime-600 transition duration-100">
                            <span class="mr-1 font-medium">Apply</span>
                            <span class="transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-100">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6.25 13.75L13.75 6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M6.25 6.25H13.75V13.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>    
                            </span>                            
                        </a>
                    </div>
                </div>
                <div class="py-6 px-8 bg-white rounded-2xl shadow-md">
                    <div class="flex flex-col sm:flex-row md:justify-between items-start">
                        <div class="mb-6 sm:mb-0">
                            <h4 class="text-xl font-medium mb-3">Materials Scientist</h4>
                            <div class="inline-flex mr-8 items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.75 8.5C16.75 13.75 10 18.25 10 18.25C10 18.25 3.25 13.75 3.25 8.5C3.25 6.70979 3.96116 4.9929 5.22703 3.72703C6.4929 2.46116 8.20979 1.75 10 1.75C11.7902 1.75 13.5071 2.46116 14.773 3.72703C16.0388 4.9929 16.75 6.70979 16.75 8.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 10.75C11.2426 10.75 12.25 9.74264 12.25 8.5C12.25 7.25736 11.2426 6.25 10 6.25C8.75736 6.25 7.75 7.25736 7.75 8.5C7.75 9.74264 8.75736 10.75 10 10.75Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                
                                <span class="ml-2 font-medium text-gray-900">San Francisco, US</span>
                            </div>
                            <div class="inline-flex items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 5.5V10L13 11.5" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                                          
                                <span class="ml-2 font-medium text-gray-900">Full-Time</span>
                            </div>
                        </div>
                        <a href="#" class="inline-flex ml-auto group items-center text-lg text-black hover:text-lime-600 transition duration-100">
                            <span class="mr-1 font-medium">Apply</span>
                            <span class="transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-100">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6.25 13.75L13.75 6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M6.25 6.25H13.75V13.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>    
                            </span>                            
                        </a>
                    </div>
                </div>
            </div>
            <div>
                <span class="block font-medium text-gray-600 mb-6">Engineering</span>
                <div class="py-6 px-8 mb-4 bg-white rounded-2xl shadow-md">
                    <div class="flex flex-col sm:flex-row md:justify-between items-start">
                        <div class="mb-6 sm:mb-0">
                            <h4 class="text-xl font-medium mb-3">Renewable Energy Engineer</h4>
                            <div class="inline-flex mr-8 items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.75 8.5C16.75 13.75 10 18.25 10 18.25C10 18.25 3.25 13.75 3.25 8.5C3.25 6.70979 3.96116 4.9929 5.22703 3.72703C6.4929 2.46116 8.20979 1.75 10 1.75C11.7902 1.75 13.5071 2.46116 14.773 3.72703C16.0388 4.9929 16.75 6.70979 16.75 8.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 10.75C11.2426 10.75 12.25 9.74264 12.25 8.5C12.25 7.25736 11.2426 6.25 10 6.25C8.75736 6.25 7.75 7.25736 7.75 8.5C7.75 9.74264 8.75736 10.75 10 10.75Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                
                                <span class="ml-2 font-medium text-gray-900">San Francisco, US</span>
                            </div>
                            <div class="inline-flex items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 5.5V10L13 11.5" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                                          
                                <span class="ml-2 font-medium text-gray-900">Full-Time</span>
                            </div>
                        </div>
                        <a href="#" class="inline-flex ml-auto group items-center text-lg text-black hover:text-lime-600 transition duration-100">
                            <span class="mr-1 font-medium">Apply</span>
                            <span class="transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-100">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6.25 13.75L13.75 6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M6.25 6.25H13.75V13.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>    
                            </span>                            
                        </a>
                    </div>
                </div>
                <div class="py-6 px-8 mb-4 bg-white rounded-2xl shadow-md">
                    <div class="flex flex-col sm:flex-row md:justify-between items-start">
                        <div class="mb-6 sm:mb-0">
                            <h4 class="text-xl font-medium mb-3">Solar Engineer</h4>
                            <div class="inline-flex mr-8 items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.75 8.5C16.75 13.75 10 18.25 10 18.25C10 18.25 3.25 13.75 3.25 8.5C3.25 6.70979 3.96116 4.9929 5.22703 3.72703C6.4929 2.46116 8.20979 1.75 10 1.75C11.7902 1.75 13.5071 2.46116 14.773 3.72703C16.0388 4.9929 16.75 6.70979 16.75 8.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 10.75C11.2426 10.75 12.25 9.74264 12.25 8.5C12.25 7.25736 11.2426 6.25 10 6.25C8.75736 6.25 7.75 7.25736 7.75 8.5C7.75 9.74264 8.75736 10.75 10 10.75Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                
                                <span class="ml-2 font-medium text-gray-900">San Francisco, US</span>
                            </div>
                            <div class="inline-flex items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 5.5V10L13 11.5" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                                          
                                <span class="ml-2 font-medium text-gray-900">Full-Time</span>
                            </div>
                        </div>
                        <a href="#" class="inline-flex ml-auto group items-center text-lg text-black hover:text-lime-600 transition duration-100">
                            <span class="mr-1 font-medium">Apply</span>
                            <span class="transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-100">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6.25 13.75L13.75 6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M6.25 6.25H13.75V13.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>    
                            </span>                            
                        </a>
                    </div>
                </div>
                <div class="py-6 px-8 bg-white rounded-2xl shadow-md">
                    <div class="flex flex-col sm:flex-row md:justify-between items-start">
                        <div class="mb-6 sm:mb-0">
                            <h4 class="text-xl font-medium mb-3">Wind Energy Engineer</h4>
                            <div class="inline-flex mr-8 items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.75 8.5C16.75 13.75 10 18.25 10 18.25C10 18.25 3.25 13.75 3.25 8.5C3.25 6.70979 3.96116 4.9929 5.22703 3.72703C6.4929 2.46116 8.20979 1.75 10 1.75C11.7902 1.75 13.5071 2.46116 14.773 3.72703C16.0388 4.9929 16.75 6.70979 16.75 8.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 10.75C11.2426 10.75 12.25 9.74264 12.25 8.5C12.25 7.25736 11.2426 6.25 10 6.25C8.75736 6.25 7.75 7.25736 7.75 8.5C7.75 9.74264 8.75736 10.75 10 10.75Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                
                                <span class="ml-2 font-medium text-gray-900">San Francisco, US</span>
                            </div>
                            <div class="inline-flex items-center">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 5.5V10L13 11.5" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                                                          
                                <span class="ml-2 font-medium text-gray-900">Full-Time</span>
                            </div>
                        </div>
                        <a href="#" class="inline-flex ml-auto group items-center text-lg text-black hover:text-lime-600 transition duration-100">
                            <span class="mr-1 font-medium">Apply</span>
                            <span class="transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-100">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6.25 13.75L13.75 6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M6.25 6.25H13.75V13.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>    
                            </span>                            
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>