Published on

6 Steps To Create A Recruiting Strategy With Tailwind CSS Like A Pro In Under An Hour

Tags
Recruiting strategy

As a FrontEnd technology blogger, I'm always looking for ways to streamline my workflow and create stunning UI components quickly. That's why I'm excited to share with you my 6-step process for creating a Recruiting Strategy UI component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that makes it easy to create custom designs without writing any CSS. With Tailwind, you can quickly create responsive layouts, customize colors, and typography, and add animations and transitions to your UI components.

The description of Recruiting strategy ui component

A Recruiting Strategy UI component is a design element that helps recruiters and HR professionals visualize their hiring process. This component typically includes a timeline or flowchart that outlines the various stages of the recruitment process, such as sourcing candidates, screening resumes, conducting interviews, and making job offers.

Why use Tailwind CSS to create a Recruiting strategy ui component?

Tailwind CSS is an excellent choice for creating a Recruiting Strategy UI component because it allows you to customize every aspect of your design quickly. With Tailwind, you can adjust the size, color, and spacing of your elements with just a few classes, making it easy to create a cohesive and visually appealing design.

The preview of Recruiting strategy ui component.

To create a Recruiting Strategy UI component with Tailwind CSS, we'll start by designing a timeline that outlines the various stages of the recruitment process. Here's a preview of what our final design will look like:

Free download of the Recruiting strategy's source code

The source code of Recruiting strategy ui component.

To create this design, we'll use a combination of HTML and Tailwind CSS classes. Here's the source code for our Recruiting Strategy UI component:

<link href="https://fonts.googleapis.com/css?family=Opens+Sans:300,400,700,900&display=swap" rel="stylesheet">

<main class="bg-white font-open-sans">
    <header class="h-24 sm:h-32 flex items-center">
        <div class="container mx-auto pl-8 flex items-center justify-between">
            <div class="uppercase text-blue-700 flex flex-col items-center">
                <div class="text-2xl">Logo<strong class="font-bold">Company</strong></div>
                <small class="tracking-widest">Your tagline goes here</small>
            </div>
            <div class="flex items-center">
                <nav class="text-gray-900 tracking-widest text-sm font-bold lg:flex items-center hidden uppercase">
                    <a href="#" class="py-2 px-8 hover:underline">
                        Home
                    </a>
                    <a href="#" class="py-2 px-8 hover:underline">
                        Services
                    </a>
                    <a href="#" class="py-2 px-8 hover:underline">
                        About
                    </a>
                    <a href="#" class="py-2 px-8 hover:underline">
                        Contact
                    </a>
                    <a href="#" class="py-2 px-8 hover:underline">
                        FAQ
                    </a>
                </nav>
                <button class="ml-4 w-6 h-6 flex flex-col lg:hidden mr-8">
                    <span class="w-6 h-px bg-gray-900 mb-1 rounded"></span>
                    <span class="w-6 h-px bg-gray-900 mb-1 rounded"></span>
                    <span class="w-6 h-px bg-gray-900 mb-1 rounded"></span>
                </button>
            </div>
        </div>
    </header>
    <div class="container mx-auto px-8 py-8 lg:py-40 relative flex flex-col lg:flex-row items-center">
        <div class="lg:w-1/2 flex flex-col items-center lg:items-start">
            <h1 class="text-center lg:text-left text-3xl sm:text-5xl font-light text-blue-700 leading-tight mb-4">Our recruiting strategy <strong class="font-black text-3xl sm:text-4xl block">hit your hiring plan</strong></h1>
            <p class="text-center lg:text-left sm:text-lg text-gray-500 lg:pr-40 leading-relaxed">You must be able to convey information via phone, email, and in person. You want to make sure your tone is always professional but friendly.</p>
            <a href="#" class="bg-blue-400 hover:bg-blue-500 mt-8 py-3 px-8 text-lg rounded-full font-bold uppercase text-white tracking-widest">Apply Now</a>
            <div class="mt-16 lg:mt-24 flex">
                <span class="w-12 h-1 mx-1 bg-blue-400"></span>
                <span class="w-12 h-1 mx-1 bg-blue-200"></span>
                <span class="w-12 h-1 mx-1 bg-blue-200"></span>
            </div>
        </div>
        <div class="w-full sm:w-2/3 lg:absolute top-0 right-0 bottom-0 mt-16 lg:mr-8">
            <svg class="w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.06 288.72"><defs/><g data-name="Capa 1"><path fill="#cbe3f4" d="M388.2 193.59c-5.61-20.14 12.23-20.92 12.63-46.87.16-10.61-5.66-21.42-19.65-26.38-6.87-2.44-13.73-4.11-19.85-8-13.94-8.83-13.69-25.63-17.49-39.95-8.35-31.46-40.5-56.45-73-55.64-23.45.59-44.66 1.31-66.05 21.22C190.12 51.6 180.61 68.36 167 82.41c-14.39 14.87-31.92 22-51.61 26.78-18.61 4.52-38.87 9.9-53.12 23.45-13.39 12.74-11.43 26.06-5.69 41.69 6.33 17.25-7.4 29-21.71 35.69-12.06 5.66-28.1 5.17-33.7 18.69-6.06 14.66 12 14.91 28.72 14.91s233.73-1.28 294.38.51c16.32.48 68.4 4.93 75.77-15.42 5.04-13.85-7.92-21.05-11.84-35.12z" opacity=".35"/><path fill="none" stroke="#cbe3f4" stroke-miterlimit="10" stroke-width="1.056" d="M406.81 187.32c-12.12 28.2-35.46 51.22-63.45 63.7"/><path fill="#cbe3f4" d="M403.26 194.82a23.18 23.18 0 008-14c.22-1.33.26-2.85-.64-3.86a1.44 1.44 0 00-.94-.54 1.91 1.91 0 00-1.51.82c-2.11 2.37-2.84 5.64-3.2 8.78s-1 5.46-1.7 8.85M397.5 204.43a23.22 23.22 0 001.77-16.07c-.33-1.31-.9-2.72-2.12-3.29a1.5 1.5 0 00-1.08-.13 2 2 0 00-1.07 1.36c-1 3-.37 6.3.55 9.33s1.2 5.43 1.94 8.8M389 216.25a23.21 23.21 0 003.72-15.73c-.17-1.34-.55-2.81-1.7-3.53a1.52 1.52 0 00-1.05-.25 1.94 1.94 0 00-1.23 1.21c-1.35 2.87-1.13 6.21-.59 9.33s.53 5.53.85 9M379.3 226.61a23.22 23.22 0 003.7-15.74c-.17-1.33-.56-2.8-1.7-3.52a1.49 1.49 0 00-1.06-.26c-.58.11-1 .68-1.22 1.22-1.35 2.86-1.13 6.21-.59 9.33s.52 5.53.85 9M364.72 238.56a23.21 23.21 0 005.33-15.26c0-1.35-.26-2.85-1.32-3.68a1.54 1.54 0 00-1-.37 2 2 0 00-1.34 1.08c-1.64 2.71-1.77 6.06-1.56 9.22s-.05 5.55-.08 9M353.3 246.2a24.85 24.85 0 006.19-14.5 5.3 5.3 0 00-.75-3.82 1.22 1.22 0 00-.84-.48c-.51 0-.94.44-1.26.91-1.7 2.48-2.16 5.79-2.31 8.95s-.64 5.51-1 8.94M394.62 208.66a25.14 25.14 0 0016.63-3.19c1.23-.72 2.51-1.7 2.77-3.07a1.52 1.52 0 00-.15-1.09 1.93 1.93 0 00-1.64-.62c-3.28-.05-6.44 1.57-9.25 3.39s-5.16 2.82-8.36 4.58M387.78 217.61a25.21 25.21 0 0016.91.87c1.37-.41 2.84-1.06 3.42-2.32a1.47 1.47 0 00.11-1.1 1.93 1.93 0 00-1.44-1c-3.18-.83-6.63 0-9.8 1.08s-5.67 1.51-9.2 2.46M377.55 228a25.15 25.15 0 0016.4 4.23c1.42-.12 3-.46 3.82-1.58a1.53 1.53 0 00.33-1.05c-.09-.59-.66-1-1.22-1.27-2.95-1.45-6.49-1.33-9.81-.9s-5.87.35-9.52.57M363.25 240.08a25.21 25.21 0 0016.93.5c1.36-.44 2.82-1.12 3.37-2.4a1.48 1.48 0 00.09-1.09 1.94 1.94 0 00-1.47-1c-3.19-.76-6.62.14-9.76 1.3s-5.65 1.64-9.16 2.66M351.69 247a25.16 25.16 0 0014.9 8.06c1.41.22 3 .27 4.08-.62a1.47 1.47 0 00.57-.94 1.9 1.9 0 00-.87-1.52c-2.51-2.12-6-2.86-9.31-3.24s-5.77-1.08-9.37-1.74"/><path fill="#6f96c2" d="M338.29 128a.29.29 0 01-.29-.28l-.1-1.5a.29.29 0 01.27-.32.29.29 0 01.32.27l.11 1.51a.3.3 0 01-.28.32z"/><path fill="#cbe3f4" d="M345.06 196.53l-3.99.28-4.43-64.27 1.99-.14 2-.14 4.43 64.27z"/><path fill="#cbe3f4" d="M338.66 127.06l-.8.05-1.22 5.43 3.99-.28-1.97-5.2z"/><path fill="none" stroke="#cbe3f4" stroke-miterlimit="10" stroke-width="1.056" d="M120.06 143.06c7.09 38.74 34.1 73.28 70 89.5"/><path fill="#cbe3f4" d="M121.85 151.16a23.19 23.19 0 01-4.66-15.48c.09-1.34.39-2.83 1.49-3.62a1.56 1.56 0 011-.32 2 2 0 011.3 1.14c1.52 2.78 1.5 6.13 1.16 9.28s-.2 5.55-.32 9M125.32 161.81a23.21 23.21 0 011.86-16.06c.62-1.2 1.48-2.45 2.8-2.73a1.49 1.49 0 011.08.12 1.92 1.92 0 01.73 1.56c.3 3.15-1 6.22-2.61 9s-2.38 5-3.86 8.14M130.94 175.22a23.22 23.22 0 01-.12-16.16c.47-1.27 1.17-2.62 2.45-3.06a1.49 1.49 0 011.08 0 1.91 1.91 0 01.92 1.45c.68 3.1-.28 6.31-1.5 9.23s-1.74 5.27-2.83 8.55M138.12 187.49a23.19 23.19 0 01-.12-16.17c.47-1.26 1.17-2.61 2.44-3a1.52 1.52 0 011.09 0 2 2 0 01.92 1.46c.68 3.09-.28 6.31-1.5 9.23s-1.75 5.27-2.83 8.55M149.66 202.39a23.26 23.26 0 01-1.79-16.06c.33-1.31.89-2.72 2.12-3.3a1.5 1.5 0 011.08-.13 1.94 1.94 0 011.06 1.36c1 3 .38 6.3-.53 9.33s-1.19 5.43-1.94 8.8M159.09 212.38a24.79 24.79 0 01-2.79-15.51 5.2 5.2 0 011.58-3.55 1.2 1.2 0 01.92-.29c.51.09.82.64 1 1.17 1.1 2.8.81 6.13.26 9.25s-.61 5.5-1 8.93M127.19 166.58a25.21 25.21 0 01-15.51-6.82c-1-1-2.06-2.22-2-3.61a1.51 1.51 0 01.39-1 1.94 1.94 0 011.74-.23c3.21.68 5.92 3 8.26 5.36s4.39 3.9 7.13 6.33M131.86 176.83a25.13 25.13 0 01-16.68-2.93c-1.24-.7-2.53-1.66-2.81-3a1.46 1.46 0 01.13-1.09 1.92 1.92 0 011.63-.65c3.28-.1 6.46 1.47 9.3 3.24s5.2 2.74 8.43 4.45M139.5 189.27a25.15 25.15 0 01-16.93.48c-1.35-.44-2.81-1.12-3.36-2.4a1.51 1.51 0 01-.09-1.1 1.91 1.91 0 011.47-1c3.19-.75 6.62.14 9.76 1.31s5.64 1.65 9.15 2.67M150.76 204.2a25.15 25.15 0 01-16.62-3.29c-1.22-.73-2.49-1.72-2.74-3.08a1.51 1.51 0 01.15-1.09 1.92 1.92 0 011.65-.61c3.28 0 6.42 1.6 9.23 3.44s5.13 2.86 8.33 4.63M160.49 213.51a25.19 25.19 0 01-16.32 4.54c-1.42-.1-3-.41-3.84-1.52a1.45 1.45 0 01-.35-1c.07-.59.64-1 1.19-1.29 2.92-1.5 6.46-1.45 9.8-1.08s5.87.24 9.52.39"/><path fill="none" stroke="#cbe3f4" stroke-miterlimit="10" stroke-width="1.056" d="M50.2 197.15c39.34-1.79 79.07 16.77 102.94 48.1"/><path fill="#cbe3f4" d="M58.5 197.08A23.24 23.24 0 0042.37 196c-1.29.4-2.68 1-3.2 2.26a1.58 1.58 0 00-.08 1.09 1.94 1.94 0 001.41 1c3 .87 6.31.09 9.3-1s5.36-1.44 8.7-2.33M69.66 198.07a23.14 23.14 0 00-15.23 5.42c-1 .87-2.06 2-2 3.34a1.44 1.44 0 00.36 1 1.91 1.91 0 001.68.37c3.14-.42 5.83-2.42 8.16-4.56s4.36-3.45 7.07-5.59M84 200.53a23.22 23.22 0 00-15.78 3.52c-1.13.74-2.29 1.72-2.43 3.07a1.52 1.52 0 00.23 1.06 1.94 1.94 0 001.62.57c3.17 0 6.09-1.69 8.66-3.54s4.74-2.88 7.7-4.68M97.55 204.77a23.23 23.23 0 00-15.78 3.52 4.65 4.65 0 00-2.43 3.06 1.54 1.54 0 00.23 1.07 2 2 0 001.63.57c3.17 0 6.08-1.69 8.65-3.54s4.75-2.88 7.7-4.68M114.67 212.67a23.21 23.21 0 00-16.06 1.87 4.67 4.67 0 00-2.74 2.8 1.55 1.55 0 00.12 1.08 2 2 0 001.56.73c3.15.3 6.22-1.05 9-2.62s5-2.38 8.14-3.86M126.52 219.62a24.74 24.74 0 00-15.74.76 5.25 5.25 0 00-3.11 2.33 1.23 1.23 0 00-.07 1c.2.48.8.66 1.37.74 3 .44 6.15-.58 9.07-1.82s5.23-1.84 8.48-3M74.72 198.82a25.19 25.19 0 00-10.13-13.58c-1.18-.79-2.62-1.51-4-1.15a1.49 1.49 0 00-.92.61 2 2 0 00.16 1.75c1.39 3 4.22 5.1 7.08 6.85s4.79 3.4 7.77 5.52M85.75 201.07a25.15 25.15 0 00-6.59-15.6c-1-1.05-2.19-2.09-3.58-2.06a1.45 1.45 0 00-1 .37 1.93 1.93 0 00-.27 1.73c.64 3.22 2.88 6 5.25 8.35s3.84 4.44 6.22 7.21M99.6 205.72a25.16 25.16 0 00-3.34-16.6c-.74-1.23-1.73-2.5-3.09-2.74a1.46 1.46 0 00-1.09.16 1.92 1.92 0 00-.61 1.64c0 3.28 1.63 6.42 3.47 9.22s2.87 5.13 4.66 8.32M116.68 213.33a25.18 25.18 0 00-6.94-15.45c-1-1-2.24-2-3.63-2a1.43 1.43 0 00-1 .39 2 2 0 00-.23 1.74c.71 3.21 3 5.91 5.43 8.23s3.94 4.36 6.39 7.07M127.93 220.72a25.17 25.17 0 00.76-16.92c-.42-1.36-1.07-2.83-2.34-3.4a1.51 1.51 0 00-1.1-.11 1.93 1.93 0 00-1 1.45c-.81 3.19 0 6.63 1.14 9.79s1.56 5.67 2.52 9.19"/><path fill="#cbe3f4" d="M174.54 213.8a27.82 27.82 0 00-21.54-7.26c-5.25.53-11 3.34-12.14 8.49-.55 2.46-.36 5.72-2.69 6.68s-4.47-1.4-6.8-2.18c-3.89-1.3-8.33 3.14-7 7 .6 1.76 2.1 3.3 2 5.16-.17 2.53-3.3 3.86-5.81 3.46s-4.72-1.86-7.18-2.48-5.65 0-6.51 2.39c-.78 2.14.56 5-1.12 6.55a4.61 4.61 0 01-2.73.88c-21.31 2-44.78 5.85-42.39 9.63.65 1 2.32.71 3.54.69 45.35-.71 86.54-1.39 131.87 0"/><path fill="none" stroke="#aed1ee" stroke-dasharray="2.641" stroke-miterlimit="10" stroke-width="1.056" d="M179.82 127.49c-3.17 9-12.6 19.12-23.35 19.12-12.22 0-15.2-9.9-18.76-13-8.76-7.71-14.24-9.5-25.39-11.4-7.25-1.24-15-11.42-13.13-21.52 3.43-18.43 36.66-27.22 45.07-40.7 6.86-11 6.5-17.55 18.49-25.43"/><path fill="#9cc6ea" d="M325.59 142.57l13.44 52.71-2.55.66-16.64-51.91"/><path fill="#acd4f0" d="M313.15 143.77c-6.87 1.75-14.17-3.57-16.29-11.87s1.75-16.47 8.62-18.22 14.17 3.58 16.28 11.87-1.76 16.45-8.61 18.22zm-6.5-25.47c-4.32 1.1-6.64 6.67-5.18 12.43s6.18 9.53 10.5 8.43 6.65-6.68 5.18-12.43-6.15-9.54-10.5-8.43z"/><path fill="#c8e2f4" d="M320.22 129.12l4.08 16a1.51 1.51 0 01-1.08 1.83 1.51 1.51 0 01-1.84-1.09l-.46-1.81s-2.14-4.58-8.08-2.69c0 0 7.08-.88 7.32-.87s-.16-12.24.06-11.37z"/><path fill="#acd4f0" d="M323.8 149.29a3.89 3.89 0 01-4.72-2.81 6.37 6.37 0 00-.74-2c-.77-1.09-2.33-1.5-5.2-.77l-.73-4.05c1.51-.48 2.59-1.21 3.81-1.12l1.64-.2c0-1.24 0-2.88-.05-4.13s1.71-2.84 1.71-3.79c0-1.72-1.77-3.46.36-3.74l2.1-.28 4.63 18.12a3.89 3.89 0 01-2.81 4.77z"/><path fill="#9cc6ea" d="M327.57 142.09l.04 54.4h2.64l3.25-54.4"/><path fill="#acd4f0" d="M327.06 124.66c0-8.56 5.75-15.53 12.84-15.54s12.85 7 12.86 15.52-5.76 15.53-12.84 15.53-12.85-6.95-12.86-15.51zm4.76 0c0 5.94 3.64 10.76 8.1 10.76s8.08-4.83 8.08-10.77-3.64-10.76-8.1-10.76-8.09 4.83-8.08 10.76z"/><path fill="#c8e2f4" d="M329.44 127.73v16.54a1.52 1.52 0 001.51 1.51 1.52 1.52 0 001.51-1.51v-1.87s1-5 7.17-4.61c0 0-7.08.9-7.31 1s-2.88-11.96-2.88-11.06z"/><path fill="#acd4f0" d="M331 148.16a3.89 3.89 0 003.89-3.89 6.26 6.26 0 01.22-2.08c.48-1.25 1.89-2 4.86-2l-.31-4.1c-1.58-.1-2.81-.53-4-.15l-1.64.22c-.3-1.21-.69-2.8-1-4s-2.36-2.32-2.59-3.25c-.42-1.67.86-3.78-1.28-3.53l-2.1.25v18.7a3.89 3.89 0 003.95 3.83z"/><path fill="none" stroke="#aed1ee" stroke-miterlimit="10" stroke-width="1.056" d="M257.89 65.31c.09-.43.19-.85.31-1.28"/><path fill="none" stroke="#aed1ee" stroke-dasharray="2.672 2.672" stroke-miterlimit="10" stroke-width="1.056" d="M259.06 61.5c3.84-9.6 14.49-19.17 30.56-15.47 11.71 2.69 14.82 13.72 21.11 20.81 4.65 5.25 11.27 9.56 13.44 17 5 17.12-1.81 35.65-14 41.48-6.75 3.22-23.48 1.8-32.13-1.19"/><path fill="none" stroke="#aed1ee" stroke-miterlimit="10" stroke-width="1.056" d="M276.79 123.64c-.43-.17-.83-.35-1.2-.53"/><path fill="#9cc6ea" d="M355.564 126.098l4.536.82a1.17 1.17 0 01.944 1.359l-10.581 58.572-6.889-1.245 10.572-58.522a1.17 1.17 0 011.36-.944z"/><path fill="#cf7788" d="M355.562 126.134l4.536.82a1.17 1.17 0 01.944 1.359l-.97 5.373-6.89-1.245.971-5.373a1.17 1.17 0 011.409-.934z"/><path fill="#6f96c2" d="M352.875 134.51l.37-2.047 6.84 1.236-.37 2.047z" opacity=".5"/><path fill="#cbe3f4" d="M368.476 135.54l11.164 4.4-23.807 60.409-11.164-4.4z"/><path fill="none" stroke="#d2e7f4" stroke-miterlimit="10" stroke-width="1.056" d="M375.19 140.47l3.68 1.45M373.95 143.6l3.68 1.45M372.71 146.74l3.68 1.45M369.68 149.17l5.48 2.16M370.24 153.02l3.68 1.45M369 156.15l3.68 1.46M367.77 159.29l3.68 1.45M364.73 161.72l5.48 2.16M365.29 165.57l3.68 1.45M364.06 168.71l3.68 1.45M362.82 171.84l3.68 1.45M359.78 174.27l5.48 2.16M360.34 178.12l3.69 1.45M359.11 181.26l3.68 1.45M357.87 184.4l3.68 1.45M354.83 186.82l5.48 2.16M355.4 190.67l3.68 1.45M354.16 193.81l3.68 1.45M352.92 196.95l3.68 1.45"/><path fill="#acd4f0" d="M364 255.51h-55.69L299 171.29a1.81 1.81 0 011.8-2h70.79a1.8 1.8 0 011.79 2z"/><path fill="#d2e7f4" d="M294.17 259.18l100.61 1.37c1.13 0 4.67-1.08-1.44-5-5.18-3.34-21.54-.33-21.54-.33s3.81-1.53 3.79-3.5a5.34 5.34 0 00-3.3-4.52 12.3 12.3 0 00-5.81-.77 37 37 0 00-11.69 2.57 3.39 3.39 0 10-3.93-5.51c2.51-3.4 6.4-18.48-5.54-25.13-15-8.34-26.34-1.48-28.76 3.54-1.23-4.93-6.88-8.65-10.6-9.58-8.49-2.1-14-1.48-21.93 2.22-2.81 1.31-6.56 5.78-8.42 8.25-2.92 3.86-3.37 9-3.53 13.85-.12 3.63-.14 7.27-.05 10.9"/><path fill="#e8e7ec" d="M313.77 264.55c0 1.73-33.78 3.14-75.45 3.14s-75.44-1.41-75.44-3.14 33.78-3.15 75.44-3.15 75.45 1.41 75.45 3.15z"/><path fill="#be5158" d="M239.76 45a7.57 7.57 0 00-7.57 7.57v9.71h15.14v-9.76a7.57 7.57 0 00-7.57-7.52zm0 11.92a4.25 4.25 0 114.24-4.3 4.25 4.25 0 01-4.24 4.25z"/><path fill="#923e44" d="M244 52.62a4.25 4.25 0 00-4.25-4.25 4.48 4.48 0 00-.64.07 3.09 3.09 0 011.73-.42 4.25 4.25 0 014.24 4.25 3.44 3.44 0 01-2.72 3.7 4.65 4.65 0 001.64-3.35zm-9.51 8.64v-9.71a7.38 7.38 0 013.19-6.3 7.55 7.55 0 00-5.5 7.27v9.71h15.14v-1z" opacity=".45"/><rect width="142.71" height="201.77" x="166.97" y="62.74" fill="#5880ba" rx="9.74"/><path fill="#cbe3f4" d="M175.24 70.65H301.4V256.6H175.24z"/><path fill="#fff" d="M180.09 76.33h116.46v174.59H180.09z"/><path fill="#be5158" d="M199.45 60.75h77.75a7 7 0 017 7v5.89h-91.8v-5.87a7 7 0 017.05-7.02z"/><path fill="#923e44" d="M196 71.76v-5.49a7.42 7.42 0 012.28-5.35 7.43 7.43 0 00-5.83 7.25v5.49h91.81v-1.9z" opacity=".45"/><circle cx="203.41" cy="100.33" r="14.97" fill="#395fa0" opacity=".25"/><circle cx="203.41" cy="100.33" r="17.39" fill="none" stroke="#cf7788" stroke-miterlimit="10" stroke-width="1.056" transform="rotate(-76.82 203.4 100.336)"/><path fill="#fff" d="M206.36 100.56a5.4 5.4 0 10-5.89 0 7.59 7.59 0 00-5.86 7.39v4.48a14.93 14.93 0 0017.6 0V108a7.59 7.59 0 00-5.85-7.44z"/><path fill="#395fa0" d="M227.71 86.54l.72 1.47 1.62.23-1.17 1.15.28 1.61-1.45-.76-1.46.76.28-1.61-1.17-1.15 1.62-.23.73-1.47zM234.79 86.54l.72 1.47 1.63.23-1.18 1.15.28 1.61-1.45-.76-1.45.76.27-1.61-1.17-1.15 1.62-.23.73-1.47zM241.87 86.54l.73 1.47 1.62.23-1.18 1.15.28 1.61-1.45-.76-1.45.76.28-1.61-1.18-1.15 1.63-.23.72-1.47zM248.95 86.54l.73 1.47 1.62.23-1.17 1.15.28 1.61-1.46-.76-1.45.76.28-1.61-1.17-1.15 1.62-.23.72-1.47zM256.04 86.54l.72 1.47 1.62.23-1.17 1.15.28 1.61-1.45-.76-1.45.76.27-1.61-1.17-1.15 1.62-.23.73-1.47z"/><g fill="none" stroke="#395fa0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.113" opacity=".15"><path d="M226.14 94.89h15.07M275.03 100.92h11.45M226.14 100.92h43.92M226.14 106.95h60.34M267.3 112.98h19.18M226.14 112.98h36.39M246.15 94.89h40.33"/></g><circle cx="203.41" cy="142.63" r="14.97" fill="#395fa0" opacity=".25" transform="rotate(-22.72 203.386 142.615)"/><path fill="#fff" d="M206.36 142.85a5.4 5.4 0 10-5.89 0 7.61 7.61 0 00-5.86 7.39v4.48a14.88 14.88 0 0017.6 0v-4.48a7.61 7.61 0 00-5.85-7.39z"/><path fill="#395fa0" d="M227.71 128.83l.72 1.47 1.62.24-1.17 1.14.28 1.62-1.45-.76-1.46.76.28-1.62-1.17-1.14 1.62-.24.73-1.47zM234.79 128.83l.72 1.47 1.63.24-1.18 1.14.28 1.62-1.45-.76-1.45.76.27-1.62-1.17-1.14 1.62-.24.73-1.47zM241.87 128.83l.73 1.47 1.62.24-1.18 1.14.28 1.62-1.45-.76-1.45.76.28-1.62-1.18-1.14 1.63-.24.72-1.47z"/><path fill="#395fa0" d="M248.95 128.83l.73 1.47 1.62.24-1.17 1.14.28 1.62-1.46-.76-1.45.76.28-1.62-1.17-1.14 1.62-.24.72-1.47zM256.04 128.83l.72 1.47 1.62.24-1.17 1.14.28 1.62-1.45-.76-1.45.76.27-1.62-1.17-1.14 1.62-.24.73-1.47z" opacity=".25"/><g fill="none" stroke="#395fa0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.113" opacity=".15"><path d="M226.14 137.19h26.8M242.01 143.22h44.47M226.14 143.22h10.9M226.14 149.25h60.34M274.13 155.28h12.35M226.14 155.28h43.21M257.89 137.19h28.59"/></g><circle cx="203.41" cy="184.92" r="14.97" fill="#395fa0" opacity=".25" transform="rotate(-67.61 203.4 184.924)"/><path fill="#fff" d="M206.36 185.15a5.4 5.4 0 10-5.89 0 7.59 7.59 0 00-5.86 7.39V197a14.91 14.91 0 0017.6 0v-4.47a7.59 7.59 0 00-5.85-7.38z"/><path fill="#395fa0" d="M227.71 171.13l.72 1.47 1.62.23-1.17 1.15.28 1.61-1.45-.76-1.46.76.28-1.61-1.17-1.15 1.62-.23.73-1.47zM234.79 171.13l.72 1.47 1.63.23-1.18 1.15.28 1.61-1.45-.76-1.45.76.27-1.61-1.17-1.15 1.62-.23.73-1.47zM241.87 171.13l.73 1.47 1.62.23-1.18 1.15.28 1.61-1.45-.76-1.45.76.28-1.61-1.18-1.15 1.63-.23.72-1.47zM248.95 171.13l.73 1.47 1.62.23-1.17 1.15.28 1.61-1.46-.76-1.45.76.28-1.61-1.17-1.15 1.62-.23.72-1.47z"/><path fill="#395fa0" d="M256.04 171.13l.72 1.47 1.62.23-1.17 1.15.28 1.61-1.45-.76-1.45.76.27-1.61-1.17-1.15 1.62-.23.73-1.47z" opacity=".25"/><g fill="none" stroke="#395fa0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.113" opacity=".15"><path d="M226.14 179.48h15.07M253.78 185.51h32.7M226.14 185.51h22.68M226.14 191.54h60.34M239.87 197.57h46.61M226.14 197.57h8.95M246.15 179.48h40.33"/></g><circle cx="203.41" cy="227.22" r="14.97" fill="#395fa0" opacity=".25"/><path fill="#fff" d="M206.36 227.44a5.4 5.4 0 10-5.89 0 7.6 7.6 0 00-5.86 7.39v4.48a14.88 14.88 0 0017.6 0v-4.48a7.6 7.6 0 00-5.85-7.39z"/><path fill="#395fa0" d="M227.71 213.42l.72 1.47 1.62.24-1.17 1.14.28 1.62-1.45-.76-1.46.76.28-1.62-1.17-1.14 1.62-.24.73-1.47zM234.79 213.42l.72 1.47 1.63.24-1.18 1.14.28 1.62-1.45-.76-1.45.76.27-1.62-1.17-1.14 1.62-.24.73-1.47zM241.87 213.42l.73 1.47 1.62.24-1.18 1.14.28 1.62-1.45-.76-1.45.76.28-1.62-1.18-1.14 1.63-.24.72-1.47zM248.95 213.42l.73 1.47 1.62.24-1.17 1.14.28 1.62-1.46-.76-1.45.76.28-1.62-1.17-1.14 1.62-.24.72-1.47zM256.04 213.42l.72 1.47 1.62.24-1.17 1.14.28 1.62-1.45-.76-1.45.76.27-1.62-1.17-1.14 1.62-.24.73-1.47z"/><g fill="none" stroke="#395fa0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.113" opacity=".15"><path d="M286.48 239.87h-15.07M237.6 233.84h-11.46M286.48 233.84h-43.92M286.48 227.81h-60.34M245.32 221.77h-19.18M286.48 221.77h-36.39M266.47 239.87h-40.33"/></g><path fill="#78aad1" d="M249.48 181.6a23.75 23.75 0 0013.68 4.33 23.37 23.37 0 004.24-.38 23.8 23.8 0 009.45-3.9l8.93 10.79a3.92 3.92 0 00.1 1.08 3 3 0 001.88 2.32 1.12 1.12 0 01.71.35 1.11 1.11 0 01.11.45 1.58 1.58 0 001.7 1.24l6.63 8a1.27 1.27 0 00.51 1.05c.19.13.45.24.47.48a.88.88 0 01-.08.34.9.9 0 001.32 1.05 1.54 1.54 0 001.41 1.47l6.83 8.25a2.68 2.68 0 002.05 1h.26V213l-4.87-5.87.15-.2a5 5 0 01.87-.78l.13.31 3.72-1.33v-4.91l-5.05 3.12v.08h-.2a20.66 20.66 0 01-2.64.05l-6.66-8c1.24-.34 2.87-.82 4.62-1.38h.11l.67-.21.24-.09.55-.18.28-.1.51-.18.31-.11.58-.22.3-.11.5-.19.28-.1.51-.21.25-.1.67-.28h.06l.71-.32.18-.08.48-.23.23-.12.4-.2a1.71 1.71 0 00.23-.13l.34-.19.23-.13.3-.19.2-.13.28-.2.16-.12a3 3 0 00.26-.22l.12-.1v-26.5a4.75 4.75 0 00-.4.38c-2.69 2.88-4.58 21.34-4.65 22-.05.51-7.67 4.92-11.47 7.09a2.15 2.15 0 00-.53-1.42 3.76 3.76 0 00-1.5-.93.64.64 0 00-.24-.05l-10-12.11a24 24 0 10-31.39 3.46zm-1.56-30.34a18.52 18.52 0 0112-7.69 19.45 19.45 0 013.3-.29 18.66 18.66 0 11-10.72 33.95 18.67 18.67 0 01-4.58-25.97z" opacity=".45" style="mix-blend-mode:multiply"/><path fill="#c7e1f1" d="M120.06 267.94c0 .91-9.46 1.64-21.12 1.64s-21.12-.73-21.12-1.64 9.46-1.64 21.12-1.64 21.12.7 21.12 1.64z" opacity=".35"/><path fill="#e5b89b" d="M126.45 185.17a25.55 25.55 0 002.76 2.87c.27.1 2.06.44 2.65.55a2.34 2.34 0 01.64.18 2 2 0 01.53.43 19 19 0 011.22 1.47 2.44 2.44 0 01.28.43 2.25 2.25 0 01.18.59c.26 1.14.47 2.3.66 3.46a.59.59 0 010 .19c-.07.13-.27.1-.38 0s-.2-.23-.34-.28v.3a.7.7 0 01-.65-.1 5.29 5.29 0 01-2-2 2.59 2.59 0 00-.32-.47c-.36-.36-.93-.35-1.41-.48a7.93 7.93 0 01-1.33-.43c-.76-.34-.85-1.26-.92-1.43a.72.72 0 00-.2-.23c-.49-.45-2.47-1.94-2.47-1.94"/><path fill="#1c2052" d="M99.06 126.86c1.1.32 1.69 1.74 2.06 2.71a15.38 15.38 0 01.83 3.67 5.08 5.08 0 01-.18 2.57 5.48 5.48 0 01-.72 1.12 2.71 2.71 0 01-.52.55.81.81 0 01-.72.12c-.34-.13-.48-.54-.58-.89a23.44 23.44 0 00-2.63-6.66"/><path fill="#d69b7f" d="M100.29 134.18c0-.73.79-1.21 1.46-.45a4.66 4.66 0 01.74 2.71c0 1.06-.79 1.27-1.46 1.42"/><path fill="#eac6ae" d="M108.3 259.81a24.41 24.41 0 01-.14 3.06c-.16.8-2.75.54-3 .09s.06-4.19.06-4.19"/><path fill="#be5158" d="M104.42 263.73c-.07.85-.07 2.44-.07 2.44l2.65.64.34-.45a4.52 4.52 0 001.55.85 10.55 10.55 0 002.5.24c2.19-.14 3.7-.83 3.78-1.15.31-1.33-2.6-1.17-3.19-1.22a3.85 3.85 0 01-3.18-2.23c-.24-.63-.1-.77-.46-.68a.88.88 0 00-.56.39 1.58 1.58 0 01-1.68.72 1.93 1.93 0 01-1-.58 1.1 1.1 0 00-.68 1.03z"/><path fill="#5880ba" d="M103.24 232.08c.25-4-3-9.28-3-9.28s8.66-4.75 8.79-6.23c0 0 1.18 8.17 1.61 11.05.74 5-1.76 33.55-1.76 33.55a10.16 10.16 0 01-4.22.06s-.45-11-2.25-18.5c-.81-3.54.53-9.66.83-10.65z"/><path fill="#5880ba" d="M102.54 186.33c3.25 7.25 6.78 30.65 7.63 38.73.36 3.42-2.5 7.43-5.82 4.34-4-3.7-9.54-20.64-11.54-23.63s-9.45-5.73-4.35-20.9"/><path fill="#eac6ae" d="M88 260s-.29 3.19-.41 4-2.7.69-3 .25a23.16 23.16 0 01-.17-4.19"/><path fill="#be5158" d="M83.83 264.87a16.58 16.58 0 00.09 2.25l3 .2.18-.49a4.75 4.75 0 001.7.61l2.52.17c1.84.13 2.9 0 3-.36.29-1.34-1.92-1.43-2.49-1.47-1.65-.11-3.38-1-3.72-1.86-.24-.63-.1-.77-.45-.68a.83.83 0 00-.54.4 1.52 1.52 0 01-1.62.75 1.81 1.81 0 01-1-.56 1.1 1.1 0 00-.67 1.04z"/><path fill="#5880ba" d="M94.44 231.62c-.55 2.82-7.92 1.76-7.76-.73.22-3.56-2.27-8.15-3.22-25.06-.11-1.93-2-2.22-2.81-7.47S83 187.27 83 187.27l11.34-1.63s4.36 9.84 3.46 19.65-2.71 23-3.36 26.33z"/><path fill="#5880ba" d="M86.7 230.29s-2.58 5.11-2.88 8.8c-.45 5.41.1 23.19.1 23.19a11.63 11.63 0 004.28.16s6.55-31.55 6.8-34.94-8.3 2.79-8.3 2.79z"/><path fill="#7fb9df" d="M106.94 152.13c-1.29-1.47-5.36-3.89-10.8-3.72-3.74.12-14 .73-15.09 3.24-.58 1.28-1.21 14.41-.35 18.93.64 3.42 2.3 11.83 2.3 13.87s-1.09 2.9-.58 3.49c1.14 1.33 8.95 1.88 12.61 1.88 3.27 0 8.82-.87 9.1-1.91.42-1.56-.63-1.5-.78-3.12s-.91-12.36 0-13.92c1.51-2.47 3-9 3.14-10.86s1.73-6.41.45-7.88z"/><path fill="#78aad1" d="M83.56 162.75c-.38.81-3 5.05-3 5.05l-.11.51a18.92 18.92 0 00.27 2.27C81.34 174 83 182.41 83 184.45s-1.09 2.9-.58 3.49 2 .94 3.88 1.23a4.92 4.92 0 01-.88-1.26c-.15-.6.85-.44 1-.95s-2.27-10.33-2.87-15.06.45-9.96.01-9.15z" opacity=".45" style="mix-blend-mode:multiply"/><path fill="#e5b89b" d="M99.34 143.79a43.23 43.23 0 00.22 4.71 7.65 7.65 0 001.08.6S100 153 99 152.75s-7.5-3.58-7.5-3.58.93-.38.93-.74-.88-7.49-.88-7.49"/><path fill="#e5b89b" d="M94.82 127.35c1 .26 3.45-.26 4.14.78a22.69 22.69 0 011.55 4.22 41.51 41.51 0 011.23 4.26c.49 1.84 1.29 5.22-.51 6.76a2.39 2.39 0 01-1.4.71c-.85.16-1.7.33-2.56.48a8.5 8.5 0 01-4.1.09c-1.76-.57-2.72-3-3.17-4.63l-2.59-9.39z"/><path fill="#222771" d="M99.26 153.83s.36 16.65 1 26.79L97.85 184l-1.69-4.23a128.62 128.62 0 011.6-25.82z"/><path fill="#222771" d="M99.82 152.36v.23a4.77 4.77 0 01-.51 1.24l-1.5.11s-1-.53-1.16-1.11 1.68-1.52 1.68-1.52l.22.09a3.31 3.31 0 011.31.94z"/><path fill="#eae9e9" d="M92.28 146.85a9.32 9.32 0 00-2 2.07 19.15 19.15 0 005 6.21 8.68 8.68 0 013-3.82s-5.46-1.13-6-4.46zM98.28 151.31a6.54 6.54 0 013 2.84 14.23 14.23 0 00-.41-5.27s-1-1.7-1.44-1.73a8 8 0 01-1.15 4.16z"/><path fill="#7fb9df" d="M105.83 151.16c3.32 1.84 9 20.78 9.62 21s13.48 15.34 13.48 15.34l-2 2.76s-13-9.43-16.69-13.56c-2.62-2.91-7.58-15.89-7.58-15.89s-.14-11.49 3.17-9.65z"/><path fill="#78aad1" d="M111.42 175.92c-1.28-1.14-5.35-13.17-5.35-13.17l-1 4.12c1.62 3.8 3.7 8.26 5.11 9.82 3.72 4.13 16.69 13.56 16.69 13.56l.79-1.08s-14.96-12.12-16.24-13.25z" opacity=".45" style="mix-blend-mode:multiply"/><path fill="#cf7788" d="M89 182.7l-19.69 3.72a.93.93 0 00-.73 1.16l2.64 13.62a.94.94 0 001.08.67l19.7-3.72a.92.92 0 00.73-1.16L90 183.37a.92.92 0 00-1-.67z"/><path fill="#e7f2fa" d="M88.74 183.75l-18.85 3.55 2.61 13.52 18.85-3.55-2.61-13.52z"/><path fill="none" stroke="#abcae5" stroke-linecap="round" stroke-linejoin="round" stroke-width=".528" d="M89.24 196.56l-2.06-11.51M87.46 196.9l-2.06-11.51M84.9 197.43l-2.06-11.51M82.34 197.95l-2.06-11.51M79.79 198.47l-2.31-11.51M77.23 199l-2.31-11.51M74.67 199.52l-2.4-11.51"/><path fill="#e5b89b" d="M78.53 192.6s.78 1.59 1.2 2.39c.27.53 2.34 2.29 3.17 3.69a3.63 3.63 0 01.65 2.23 1.49 1.49 0 01-1.61 1.35c-.22 0-.47-.15-.64 0a1 1 0 00-.19.29.91.91 0 01-.88.44.9.9 0 01-.73-.67 1.47 1.47 0 01-2 0 1.17 1.17 0 00.48-1 2.42 2.42 0 00-.6-1 2.94 2.94 0 01-.62-1.89c0-.49.14-1 .19-1.44a4.51 4.51 0 00-.63-2.85"/><path fill="#7fb9df" d="M84.46 160.79c-.59 2.12-9.65 16.07-9.65 16.07l4.85 17.68-2.77 1.73s-8.62-14.33-8.65-18.38 6.31-18.89 10.94-24.95a10.58 10.58 0 014.43-2.9"/><path fill="#222771" d="M89 138.39c.59-.34 1-.71 1.44-.14.2.3.33.72.68.82a.7.7 0 00.8-.56 2.2 2.2 0 00-.13-1.07l-.72-2.32a3.43 3.43 0 01-.17-2.31 2.57 2.57 0 01.73-.94 7.79 7.79 0 013.55-1.51c1.27-.27 2.58-.4 3.82-.79a4.18 4.18 0 001.46-.73 3.15 3.15 0 001-2.35 4.88 4.88 0 00-.75-2.51 4.18 4.18 0 01-.38.87 3.14 3.14 0 00-.7-1.09c-.37 2.07-9.09 1.38-11.12 2.29-1.41.63-2.58 1-2.54 3.33a.89.89 0 01-.27.37 6.29 6.29 0 00-2 4.62c-.2 2.54 1.28 5.29 2.73 7.38a4.82 4.82 0 001.19 1.25 2.84 2.84 0 002 .46c.63-.12 1.87-.07 1.88-.71 0-.46-1-1.27-1.24-1.64"/><path fill="#e5b89b" d="M91.31 140.79a1 1 0 01-.17.76.94.94 0 01-1 .15 2.78 2.78 0 01-1.74-2.13c-.2-1.1.39-2.2 1.39-1.91a1.47 1.47 0 01.95 1.44"/><path fill="#d69b7f" d="M99.34 144.18l-2.8.51a3.92 3.92 0 002.84 1.05"/><path fill="#4971b1" d="M105.55 232c.51-1.66-.92-4.23-1.62-6.15s-6-17.27-6-17.27l-1.16 6.2c1.09 2.65 2.29 5.49 3.48 8 .47 1 .93 1.87 1.38 2.71a15.31 15.31 0 011.58 6.56c-.3 1-1.64 7.11-.79 10.65 1.8 7.47 2.25 18.5 2.25 18.5a9 9 0 001.3.15c-.16-2.72-.42-7.53-.45-8.48 0-1.34-1.74-9.07-1.62-12.13a40.86 40.86 0 011.65-8.74z"/><path fill="#cf7788" d="M92.19 192.95l-1.71.4-1.23-6.37 1.71-.36 1.23 6.33z"/><path fill="#cf7788" d="M94.56 189.17a1.55 1.55 0 00-1.81-1.23l-2 .37.58 3 1.95-.36a1.56 1.56 0 001.28-1.78zm-2.4.46a.87.87 0 111 .69.86.86 0 01-1-.69z"/><ellipse cx="153.3" cy="280.18" fill="#c7e1f1" opacity=".35" rx="21.94" ry="1.98"/><path fill="#78aad1" d="M180.32 161.38l-13.47-1.81v27l7.3 1a1.23 1.23 0 001.37-.88l5.81-23.9a1.14 1.14 0 00-1.01-1.41z" opacity=".45" style="mix-blend-mode:multiply"/><path fill="#7fb9df" d="M163.32 158.31l-4.84 21.29a1 1 0 00.84 1.24l15.1 2.17a1 1 0 001.14-.79l4.85-21.29a1 1 0 00-.85-1.24l-15.1-2.17a1 1 0 00-1.14.79z"/><path fill="#e7f2fa" d="M164.27 158.99l-4.64 20.39 14.98 2.16 4.64-20.4-14.98-2.15z"/><path fill="none" stroke="#abcae5" stroke-linecap="round" stroke-linejoin="round" stroke-width=".528" d="M177.67 162.65l-12.74-1.83M177.24 164.57l-12.74-1.82M171.94 166.17l-7.96-1.14M171.37 167.83l-7.96-1.14M170.81 169.49l-7.96-1.15M173.72 178.64l-7.95-1.14"/><path fill="#d69b7f" d="M157.52 179.86a6.55 6.55 0 002.09-1.87l1.8-2.14a1.74 1.74 0 00.51-1c-1-.08-1.65 1.22-2.65 1.3a21 21 0 012-4.74 1.47 1.47 0 00.29-1.19 7.69 7.69 0 00-2.79 2 15.73 15.73 0 00-1.52 1.93 20.89 20.89 0 00-2.7 6.65"/><path fill="#e5b89b" d="M153.19 197l-10.78-9.09s-5 6.81-3.12 13.37c.93 3.22 2.09 4.82 2.6 6.36s3.72 21.67 3.47 23.16-2 5.62-2.64 10c-.8 5.24-.67 22.31-1.29 26.84s3.56 5.29 3.79 3.76c2-13.09 7.15-33.48 7.88-40s.43-18.57.09-34.4z"/><path fill="#d69b7f" d="M153.22 209.91l-4.68 10.76a24.08 24.08 0 013.26 11.27c.08 2.07-.1 4.15 0 6.23a1.8 1.8 0 00.06.45c.63-3.08 1.1-5.61 1.28-7.27.51-4.62.52-12 .35-21.45z"/><path fill="#e5b89b" d="M146 267.18s-1 4.74-.74 5.35a8.28 8.28 0 002.24 3c1 .67 3.35 1.46 3.54 1.75a.72.72 0 01-.14 1 4.76 4.76 0 01-3.29.83c-3.13-.51-3.46-1.9-5.28-2.12-.32 0-.9.43-1.77 0a2.06 2.06 0 01-1.22-2 9 9 0 011.38-3.35c.53-1 .9-5.4.9-5.4"/><path fill="#222771" d="M151.1 278.48c.23-.39.29-1 .07-1.13a17.77 17.77 0 00-1.95-1.17c-.6-.28-1.57-.53-1.23-.34s-.28.86-.85.83c-2-.12-3.41-1.43-4.53-1.71a3.82 3.82 0 01-2.36-2.61 7.19 7.19 0 00-1.16 2.21 3.74 3.74 0 00-.24 1.68 4.18 4.18 0 01.18 1.61 2.9 2.9 0 001.16.42 4.63 4.63 0 001.25 0l.13-1a4.66 4.66 0 011 .09 5.47 5.47 0 011.53.72c.22.26.4.75.7.9a6 6 0 002.57.64c2.11.14 3.34-.47 3.73-1.14z"/><path fill="#e5b89b" d="M167.91 278.28c-.24-.26-2.73-.66-3.9-1.15a6.75 6.75 0 01-2.73-2.6 27 27 0 01-.17-5.21c.23-9.32 1.95-32.09 2.2-37.55.44-9.48-.79-19.26-4.44-34.48l-13.58-10.42s-3.8 7.07-2.53 13.83c.74 3.92 4 4.53 4.54 6.05s8.77 26.1 8.77 26.1a46.22 46.22 0 00-1.69 11.15c-.08 5 2.17 19.95 2.59 25.67.05 1.11.24 3.78-.09 4.63-.4 1-1.43 2.27-1.38 3.58a2 2 0 001.54 1.79c1 .3 1.5-.26 1.83-.27 1.92-.08 2.45 1.24 5.75 1.24a5.27 5.27 0 003.29-1.37.7.7 0 000-.99z"/><path fill="#222771" d="M168.19 279.45c.18-.43.16-1-.08-1.13a19.11 19.11 0 00-2.18-.84c-.67-.18-1.7-.26-1.32-.14s-.17.91-.76 1c-2 .2-3.73-.85-4.92-.95a3.14 3.14 0 01-2.47-2.2 7.79 7.79 0 00-1.22 2.37 3.8 3.8 0 000 1.71 3.74 3.74 0 01.41 1.56 3.37 3.37 0 001.26.23 5 5 0 001.29-.19v-1a5.06 5.06 0 011.05-.07 3.44 3.44 0 011.68.6 3.31 3.31 0 00.91.65 6.83 6.83 0 002.68.2c2.18-.25 3.36-1.08 3.67-1.8zM142.7 186.78c-.92 1-4.21 6.48-4.24 10.94S140 205 140.15 206c1 6.81 2 15 2 15.46s3.86 3 9.06 2.69c9.59-.6 13.33-3.11 13.33-3.11s-.46-16.49-1.94-24.62c-.74-4.07-4-10.63-4-10.63"/><path fill="#e5b89b" d="M133.94 169s1.55 7.68 1.95 9.05 2.41 10 4.31 9.89 12.32-8.84 12.32-8.84l-1.48-3-9.16 4.37s-.83-9.92-1.56-12.28"/><path fill="#d69b7f" d="M137.48 173.71c1 3.43 3 7 3.56 9.7.12.53 6.46-1.77 6.48-4.16"/><path fill="#be5158" d="M140.15 158.33a11.3 11.3 0 00-4.58 1.51c-3.93 3-.89 13.91-.89 13.91s-.19.59 2.44.44a19.13 19.13 0 004.76-.9l-.76-8.94"/><path fill="#923e44" d="M136.67 164.51s-.33 6.42.83 9.65a10.31 10.31 0 002.15-.28z"/><path fill="#e5b89b" d="M154.67 138.2c1.83 2.37 1.47 5.71 1 8.68-.23 1.49-.46 3-.68 4.49a2.27 2.27 0 01-2.9 2.38v3.72q-3.19.08-6.37 0a6.08 6.08 0 00-.55-2.52c-1 0-1.73-1.07-2.14-2a28.42 28.42 0 01-1.14-3.41 18.66 18.66 0 01-.9-4.66 6.76 6.76 0 011.35-4.47 8.12 8.12 0 012.58-1.94c1.32-.68 2.9-1.22 4.26-.62"/><path fill="#222771" d="M152.48 149.51a3.87 3.87 0 01.17-2.78 1.89 1.89 0 01.56-.71 1.2 1.2 0 011.13-.12 1.24 1.24 0 01.57.54 15.93 15.93 0 00.4-5.2 6.77 6.77 0 00-4.29-5.89c-4.49-1.85-11 0-12.78 4.39a11 11 0 002 10.94c2.34 2.47 5.7 2.83 8.8 2.32 1.59-.26 4-.1 4.86-2.26a.24.24 0 00-.24-.32c-.66.05-1.14-.68-1.18-.91z"/><path fill="#222771" d="M152.82 143.64c.17.26.13.62.29.88a2.07 2.07 0 001.08.84c.77.35.59 1.46.57 2 .57-.39.66-1.43.8-2s.26-1.2.43-1.79a9.23 9.23 0 00.52-1.72 7 7 0 00-2.71-5.7 3.74 3.74 0 00-4.2 0 3.19 3.19 0 00-1.2 1.53 1 1 0 00-.05.82"/><path fill="#923e44" d="M142.61 158.36c.1-.73.3-1.57 1-1.86a2.4 2.4 0 01.59-.13 50 50 0 016.24-.29 5.86 5.86 0 012.53.44 6.25 6.25 0 012.45 3.13"/><path fill="#be5158" d="M160.15 185a16.23 16.23 0 01-1.2-1.41 21.94 21.94 0 01-.88-7.11c.21-1.3 1.36-2 1.88-4.9a10.77 10.77 0 00-1.71-7.89c-1.22-1.76-.5-1.75-.91-3.91a2.08 2.08 0 00-.43-1.07 10.52 10.52 0 00-2.42-1.15c-3.37-.52-5.35-.11-8.75 0a29.33 29.33 0 00-5 .63c-1.83.41-3.42.89-3.8 3.37A25 25 0 00138 173c.77 2.41 5.39 10.76 4.24 12.38a5.57 5.57 0 00-1 1.53c-.29 1.69 3.52 2.28 5.16 2.42a66 66 0 007.83 0c1.89-.09 6-.75 6.31-3.08a1.73 1.73 0 00-.39-1.25z"/><path fill="#923e44" d="M159.43 172.29a6.86 6.86 0 01-.5 2 5.27 5.27 0 01-3.43.15 50 50 0 00-1.56-6.56s5.49 3.78 5.49 4.41z"/><path fill="#222771" d="M143.71 151.46a3.59 3.59 0 00-3.55 1.39c-1 1.2-1.43 3.05-.5 4.3a4.27 4.27 0 001.35 1.07 7.17 7.17 0 005.09.95 4.08 4.08 0 003.2-3.72c0-1.6-1.19-2.94-2.37-4"/><path fill="#e5b89b" d="M157 170.72s6.21 15 8.91 15c2 0 6.78-13.87 6.78-13.87l-3-1.44-3.39 5.81-3.44-10.84"/><path fill="#e5b89b" d="M169.06 171.47a5.91 5.91 0 00.94-2.71 11.07 11.07 0 01-.07-2.87 11.83 11.83 0 011-2c.3-.25 1.38-.66 1.64-.48s.59-.66 1-.58a.92.92 0 01.81.84c0 .4.58.47.65.76a4.57 4.57 0 00.15.77c.11.22.43.11.55.66s0 .55 0 .8.25.23.18.72a6.1 6.1 0 01-.7 1.67 4.75 4.75 0 01-1.7 1.71 3.23 3.23 0 00-1 1.37"/><path fill="#222771" d="M170.73 159.86a.36.36 0 00-.53-.14.46.46 0 00-.12.59l1.84 4.16s.15.17.43-.08.21-.4.21-.4-1.75-3.99-1.83-4.13z"/><path fill="#d69b7f" d="M172.67 163.72a4.35 4.35 0 01-1.12 1.17c-.29.27-.25.44-.57.72.56 0 .46-.37 1.18-.89a1.52 1.52 0 00.74-.9.13.13 0 00-.23-.1z"/><path fill="#be5158" d="M151.3 157.32c1.61.09 6.33-.74 8.95 2 2.2 2.29 3.45 8.31 4.34 10.76-2.2 2.24-4.32 4-7.65 3.32-.13-.1-1.78-5.3-3-5.76"/><path fill="#1c2052" d="M153.09 224c-.61-4-4.39-16.22-4.55-16.55a14.57 14.57 0 01-4.11-4.59c-.47 2.69.75 5.35 1.9 7.82 2 4.32 3.2 9 4.93 13.46"/><path fill="#7fb9df" d="M313 161.56c-2.68 2.88-4.57 21.34-4.64 22s-13.58 8.29-13.58 8.29l1.9 2.17s14.39-3.62 17-6.75c2.2-2.66 7.27-24.36 7.27-24.36s-3.55-6.14-7.95-1.35z"/><ellipse cx="333.91" cy="285.97" fill="#c7e1f1" opacity=".35" rx="40.23" ry="2.75"/><path fill="#e5b89b" d="M354.2 271.31a24.36 24.36 0 001.66 2.79c.55.67 3-.85 3-1.4s-2.14-3.88-2.14-3.88"/><path fill="#222771" d="M359.9 272.91c.52.74 1.38 2.2 1.38 2.2l-2.13 1.94-.55-.24a4.66 4.66 0 01-1 1.57 10.9 10.9 0 01-2.19 1.5c-2.12 1-3.89 1.14-4.14.88-1-1.06 1.79-2.39 2.32-2.74a3.93 3.93 0 001.76-3.66c-.12-.7-.32-.76.06-.87a1 1 0 01.74.08 1.72 1.72 0 001.94-.21 1.91 1.91 0 00.62-1 1.21 1.21 0 011.19.55z"/><path fill="#e5b89b" d="M314.63 278.59a6 6 0 00-.47 2.16c.07.86 2.92.93 3.26.48s.5-4.4.5-4.4"/><path fill="#222771" d="M318.17 282a17.57 17.57 0 01-.26 2.36h-3.29l-.16-.53a5.33 5.33 0 01-1.91.53h-2.78c-2 0-3.19-.25-3.24-.59-.22-1.44 2.21-1.37 2.85-1.37 1.81 0 3.78-.82 4.21-1.7.31-.65.17-.81.55-.69a1 1 0 01.57.47 1.67 1.67 0 001.71.9 2 2 0 001.12-.52 1.15 1.15 0 01.63 1.14z"/><path fill="#be5158" d="M331.41 218.77c0 .12-2.69-2.94-2.72-2.81-1.06 5.36-6 23.26-7.64 27.95a4.86 4.86 0 01-2.56 2.34c-2.41.63-6.26-.19-6.57-4.81 0-.5.08-1.06 0-1.66-.68-7.1 6.11-38.43 6.29-40.43s4.09-.55 5.19-.92c5.51-1.82 9.45 12.85 8.01 20.34z"/><path fill="#be5158" d="M321.37 246.45c-1.12-3.33.58-7.24.58-7.24s-9.48-7.29-10-2.84c-.05.35-.4 3.37-.4 5.06 0 6.09 2.12 25.34 2 37.1v.77a24.14 24.14 0 004.36.29h.4c.79-7.33 2.5-17.28 3.32-27.3a23.59 23.59 0 00-.26-5.84zM345.55 245c-1.9-2.36-3.9-3.41-4.49-5.21-1.38-4.17-1-21.09-1.14-25.79.39-1 4-10.57-3.36-17.65 0 0-6.67 2.86-12 3.21a27.37 27.37 0 01-6.33-.15s4 6 4.19 8.64c.4 4.5 8.82 31.72 9.47 33.21a17.71 17.71 0 003.61 5.43c3.74 4.86 12.48 15.09 19.11 24.87l.44.64a18.5 18.5 0 003.81-2.16c-3.57-6.57-7.3-17.62-13.31-25.04z"/><path fill="#7fb9df" d="M313 161.56c1.33-1.53 7-3.89 12.68-3.71 3.89.12 16.25 1.39 17.43 4 .61 1.33.55 14-.33 18.64-.67 3.53-2.68 12.61-2.68 14.72s1.13 3 .6 3.63c-1.18 1.37-10 2-13.84 2-3.39 0-9.15-.9-9.45-2-.43-1.61.66-1.55.81-3.24s.95-12.82 0-14.44c-1.58-2.57-4-9.85-4.09-11.78s-2.51-6.3-1.13-7.82z"/><path fill="#e5b89b" d="M322.31 153.06a44 44 0 01-.23 4.88 7.44 7.44 0 01-1.11.63s.66 4.08 1.68 3.78 7.78-3.72 7.78-3.72-1-.38-1-.76.91-7.77.91-7.77"/><path fill="#1c2052" d="M324.14 137.61a2.88 2.88 0 00-2.92-.19 4.3 4.3 0 00-2 2.25 3.35 3.35 0 000 2.87 1.75 1.75 0 00-1.1 1.68 4.3 4.3 0 00.86 2.15 2 2 0 001.95.81 2.18 2.18 0 001.24-.87 5.71 5.71 0 00.7-1.37 37.28 37.28 0 001.89-6.9"/><path fill="#e5b89b" d="M327 136c-1 .26-3.58-.27-4.29.8a24.32 24.32 0 00-1.61 4.39 41.92 41.92 0 00-1.27 4.41c-.51 1.92-1.81 5.52.06 7.12a3.82 3.82 0 001.91.64l2.66.5a8.9 8.9 0 004.26.09c1.82-.59 2.82-3.1 3.29-4.8l2.69-9.75z"/><path fill="#e5b89b" d="M331 150.12a1 1 0 00.26.77 1 1 0 001.08 0 2.85 2.85 0 001.54-2.4c.08-1.16-.66-2.22-1.66-1.81a1.54 1.54 0 00-.81 1.61"/><path fill="#222771" d="M333.49 144.78c-.31 1-1.14 3.17-2 3s.36-3.66 1.12-5c-1.11 0-2.48-.18-2.88-1.21-.08-.23-.16-.53-.4-.59s-.38.12-.55.23a2 2 0 01-2.45-.68c-.15-.15-.31-.34-.52-.32a.72.72 0 00-.35.17c-1.28.9-4.67.86-4.66-.74-1.12.57-1.84-.81-1.77-1.76s.77-2.53 2.31-2.49c-.07-1.16.84-1.89 1.76-2.6a5.86 5.86 0 013.27-1.08c1.84-.08 3.94.68 4.56 2.41a.61.61 0 00.21.33.58.58 0 00.43 0 4.42 4.42 0 014.08.81 3.09 3.09 0 01.61 3.92 2.3 2.3 0 011.49 2.63 5.67 5.67 0 01-1.64 2.83 2.19 2.19 0 011.05 3.05 3.46 3.46 0 01-3.33 1.48 2 2 0 00-1.27-2.58M322.4 163.47s-.37 17.29-1.08 27.8l2.54 3.51 1.75-4.39a133.66 133.66 0 00-1.65-26.8z"/><path fill="#1c2052" d="M321.81 162l.06.24a5 5 0 00.53 1.28l1.56.12s1.06-.55 1.2-1.15-1.74-1.58-1.74-1.58l-.23.09a3.49 3.49 0 00-1.36 1z"/><path fill="#eae9e9" d="M329.64 156.23a9.81 9.81 0 012.13 2.15 19.84 19.84 0 01-5.19 6.44 9 9 0 00-3.16-4s5.66-1.13 6.22-4.59zM323.42 160.86a6.67 6.67 0 00-3.1 2.95 14.68 14.68 0 01.42-5.47s1.05-1.76 1.49-1.8a8.36 8.36 0 001.19 4.32z"/><path fill="#923e44" d="M321.37 246.45a8 8 0 01-.38-2.4.75.75 0 00.06-.13c1.11-3.15 3.7-12.28 5.6-19.55l-2.95-10.53s-1.79 21.42-2.38 23-2.41 6.49-2.23 7.56 1.33 3 1.15 4.7-.15 16.83-.15 16.91c.58-4.38 1.16-9 1.54-13.68a23.59 23.59 0 00-.26-5.88z"/><circle cx="266.88" cy="159.96" r="21.32" fill="none" stroke="#222771" stroke-miterlimit="10" stroke-width="5.282" transform="rotate(-32.43 266.905 159.966)"/><path fill="none" stroke="#222771" stroke-linecap="round" stroke-linejoin="round" stroke-width="5.282" d="M281.34 176.49l31.75 38.35"/><path fill="#e5b89b" d="M310.8 200.63l-2.65.81c-.6.17-3.4-.13-5 .24a3.78 3.78 0 00-2.13 1.1 1.55 1.55 0 00.12 2.18c.19.13.45.24.47.47a.68.68 0 01-.08.34.91.91 0 001.32 1.06 1.53 1.53 0 001.42 1.46 1.21 1.21 0 01.45-1.1 2.62 2.62 0 011.16-.24 3.15 3.15 0 001.87-.88c.35-.36.61-.79.94-1.18a4.77 4.77 0 012.6-1.56"/><path fill="#78aad1" d="M343.06 161.85a1.52 1.52 0 00-.21-.33l-8.15 8c-1.95 5.17-5.82 18.78-5.82 18.78s-3.67 1.72-6.13 3c-.63.32-2.39 1.51-4.47 2.95 0 .62-.09 1.11-.11 1.37-.15 1.69-.38 1.68.06 3.29a33.17 33.17 0 01-.69 4.25c6.12-1.56 18.77-5.52 19.25-5.78.71-.39 4.43-15.36 6.59-24.45.33-5.56.13-10.11-.32-11.08z" opacity=".45" style="mix-blend-mode:multiply"/><path fill="#7fb9df" d="M334.65 168.63c-.75 2.15-4.75 21.16-4.75 21.16a36.07 36.07 0 00-6.38 2.26c-1.91 1-15.21 9.25-15.21 9.25l1.32 3.12s23.68-8.39 24.72-9 10.55-24.56 10.55-28.84c0-2.52-2-5.1-2-5.1"/><path fill="#e5b89b" d="M294 195.9a1.58 1.58 0 01-1.69-1.24 1.43 1.43 0 00-.12-.45c-.14-.23-.45-.27-.71-.35a3.47 3.47 0 01-1.88-4 1.69 1.69 0 011.1-1.16.58.58 0 01.32 0 .63.63 0 01.24.22 4 4 0 01.68 1.36 1.68 1.68 0 00.47 1 4.59 4.59 0 00.69.29 2 2 0 01.85 1.2c.25.72-.09 2.36.05 3.11M296.81 191a2 2 0 00-.51-1.71 3.66 3.66 0 00-1.5-.93c-.14-.06-.34-.09-.43 0a.32.32 0 000 .31c.21.36.66.53.88.88a3.29 3.29 0 01.21.42 1.84 1.84 0 001.32 1"/><path fill="#78aad1" d="M316.88 178.39a63.7 63.7 0 01-2.65-7.85c-1.07 5.45-.72 15-1.62 15.81s-9.95 6-9.95 6c4.27-1.34 9.49-3.27 10.95-5 .83-1 2.06-4.69 3.27-8.9z" opacity=".45" style="mix-blend-mode:multiply"/><path fill="#d69b7f" d="M322.31 153.45a31.71 31.71 0 004.5.72c.67-.11-1.47 1.17-1.88 1.22s-2.62-.26-2.62-.26z"/><path fill="#98c3e9" d="M170.11 22.28c0-.11-5.32 3.22-5.32 3.22l1.4 9 2.63-6.76 6.93-1.32 9.87-9.28z"/><path fill="#b3d7f2" d="M185.62 17.17l-19.43 17.36 2.63-6.76 16.8-10.6z"/><path fill="#cbe3f4" d="M185.62 17.17l-25.71 5.46 4.88 2.87 20.83-8.33-16.8 10.6 8.3 5.13 8.5-15.73z"/><path fill="#1c2052" d="M91.49 136.36c.07.13.48.09.56.11s.1.08.9.94c.6.64 1.5.75 3.09 0 1.22-.55.95-1.49 1-2s.15-.56.35-.62.3 0 .6.33a2 2 0 002.17 1c1-.25 1.38-.75 1.44-1.4.1-1.17.11-1.16.22-1.29s0-.59-.06-.83-.87-.07-1.63.16a9.48 9.48 0 00-2.35.93c-.4.34-.34.5-.56.57s-.28-.1-.79-.16a17.62 17.62 0 00-3.34.81c-.77.23-1.81.65-1.77.91a2 2 0 00.17.54zm6.74-2.07c0-.32.3-.43 1.19-.74s1.26-.47 1.45-.37.4.54.35 1.22-.25 1.17-1 1.4a1.31 1.31 0 01-1.61-.52 2.65 2.65 0 01-.38-.99zm-5.5 1.37a7.8 7.8 0 012.2-.74c.91-.24 1.21-.31 1.39 0a2.65 2.65 0 01.22 1c0 .53 0 1-1.44 1.44a1.54 1.54 0 01-2-.48c-.4-.55-.48-1.03-.37-1.22z"/><rect width="47.73" height="34.18" x="115.32" y="77.8" fill="#cbe3f4" rx="4.52" transform="rotate(180 139.185 94.89)"/><path fill="#cbe3f4" d="M157.69 100.91l11.45-3.23-10.21-2.67"/><path fill="#395fa0" d="M139.41 94.66h-7.12v-1.64h7.12zM139.42 92.22h-12.15v-1.64h12.15zM156.62 101.84h-34.95v-2.02h34.95zM156.62 104.86h-34.95v-2.02h34.95zM139.42 89.78h-12.15v-1.64h12.15zM139.41 87.33h-4.46v-1.64h4.46zM142.32 90.81a7.15 7.15 0 107.15-7.15 7.15 7.15 0 00-7.15 7.15z" opacity=".25"/><path fill="#395fa0" d="M148.07 90.92a2.58 2.58 0 112.81 0 3.63 3.63 0 012.8 3.53v2.14a7.14 7.14 0 01-8.41 0v-2.14a3.63 3.63 0 012.8-3.53z" opacity=".19"/><path fill="#cf7788" d="M119.81 66.78a5 5 0 11-2.81-6.46 5 5 0 012.81 6.46z"/><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.056" d="M113.07 64.34l1.12 2.49 3.73-2.31"/><path fill="#cf7788" d="M312.53 26.12A5 5 0 11306 23.5a5 5 0 016.53 2.62z"/><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.056" d="M306.04 29.15l2.55.97 1.01-4.27"/><circle cx="361.17" cy="200.09" r="15.32" fill="#fff" stroke="#cf7788" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.113" transform="rotate(-80.74 361.156 200.088)"/><circle cx="361.17" cy="200.09" r="10.74" fill="none" stroke="#cf7788" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.113"/><path fill="none" stroke="#cf7788" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.113" d="M367.23 200.09a6.06 6.06 0 11-6.06-6.06 6.06 6.06 0 016.06 6.06z"/><circle cx="361.17" cy="200.09" r="2.57" fill="#cf7788"/><path fill="none" stroke="#353f86" stroke-miterlimit="10" stroke-width="1.056" d="M361.17 200.09l19.74-19.74M384.09 180.66h-3.52v-3.52"/><path fill="none" stroke="#353f86" stroke-miterlimit="10" stroke-width="1.056" d="M382.33 182.42h-3.52v-3.52M380.54 184.2h-3.51v-3.52M364.55 200.19h-3.52v-3.51"/><path fill="#cf7788" d="M40.85 150a1.83 1.83 0 11-1.85-1.79 1.82 1.82 0 011.85 1.79zM385.91 109.84a1.83 1.83 0 11-1.82-1.83 1.82 1.82 0 011.82 1.83zM214 41.08a1.83 1.83 0 11-1.83-1.83 1.83 1.83 0 011.83 1.83zM153.14 76.37a.58.58 0 01-.59-.58v-4.11a.59.59 0 111.17 0v4.11a.58.58 0 01-.58.58z"/><path fill="#cf7788" d="M155.19 74.32h-4.11a.59.59 0 01-.58-.59.58.58 0 01.58-.58h4.11a.58.58 0 01.59.58.59.59 0 01-.59.59zM52.39 233.09a.59.59 0 01-.58-.59v-4.11a.58.58 0 011.16 0v4.11a.59.59 0 01-.58.59z"/><path fill="#cf7788" d="M54.45 231h-4.12a.59.59 0 010-1.17h4.12a.59.59 0 010 1.17zM401.2 171.55a.58.58 0 01-.58-.58v-4.11a.59.59 0 111.17 0V171a.58.58 0 01-.59.55z"/><path fill="#cf7788" d="M403.26 169.5h-4.11a.59.59 0 110-1.17h4.11a.59.59 0 010 1.17z"/><path fill="#acd4f0" d="M265.094 6.19l25.36 8.451-5.495 16.489-25.36-8.45z"/><path fill="#acd4f0" d="M290.45 14.65L265.09 6.2 281.25 0l9.2 14.65z"/><path fill="#fff" d="M267.983 5.729l20.302 6.765-5.713 17.143-20.302-6.765z"/><path fill="#cae3f6" d="M265.09 6.2l-5.49 16.48 15.23-3.43-9.74-13.05zM290.45 14.65l-5.49 16.48-10.13-11.88 15.62-4.6z"/><path fill="#cae3f6" d="M284.96 31.13l-25.36-8.45 16.15-6.19 9.21 14.64z"/><path fill="#acd4f0" d="M259.6 22.68c1.3-.62 2.63-1.19 3.95-1.79s2.65-1.14 4-1.69c2.66-1.11 5.34-2.16 8-3.21l.41-.15.23.36c1.53 2.45 3 4.9 4.5 7.39.74 1.24 1.46 2.49 2.17 3.74s1.42 2.52 2.09 3.8c-.87-1.15-1.68-2.35-2.52-3.52S280.8 25.23 280 24c-1.61-2.4-3.16-4.83-4.71-7.26l.64.21c-2.69 1-5.4 2-8.12 3-1.36.48-2.72 1-4.09 1.4s-2.72.93-4.12 1.33z"/></g></svg>
        </div>
    </div>
</main>

How to create a Recruiting strategy with Tailwind CSS?

Now that we've seen what our final design will look like let's dive into the six steps to create a Recruiting Strategy UI component with Tailwind CSS.

Step 1: Set up your project

Before we can start designing our Recruiting Strategy UI component, we need to set up our project. To do this, we'll create a new HTML file and link to the Tailwind CSS CDN in the head of our document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recruiting Strategy</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
    />
  </head>
  <body>
    <!-- Our design will go here -->
  </body>
</html>

Step 2: Create the timeline container

Next, we'll create a container for our timeline using the flex and flex-wrap classes. We'll also set the max-width of our container to 800px to ensure that it doesn't take up too much space on the page.

<div class="flex flex-wrap justify-center max-w-3xl mx-auto">
  <!-- Our timeline will go here -->
</div>

Step 3: Add the timeline items

Now that we have our timeline container, we can start adding the timeline items. We'll use the flex and flex-col classes to create a column layout for each item, and we'll add a bg-gray-200 class to give each item a light gray background.

<div class="flex flex-wrap justify-center max-w-3xl mx-auto">
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md">
    <h3 class="text-lg font-medium">Sourcing Candidates</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md">
    <h3 class="text-lg font-medium">Screening Resumes</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md">
    <h3 class="text-lg font-medium">Conducting Interviews</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md">
    <h3 class="text-lg font-medium">Making Job Offers</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Step 4: Style the timeline items

Now that we have our timeline items, we can start styling them. We'll use the border-l-4 class to add a left border to each item, and we'll use the border-blue-500 class to give each item a blue border. We'll also add a mt-4 class to add some spacing between each item.

<div class="flex flex-wrap justify-center max-w-3xl mx-auto">
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4">
    <h3 class="text-lg font-medium">Sourcing Candidates</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4">
    <h3 class="text-lg font-medium">Screening Resumes</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4">
    <h3 class="text-lg font-medium">Conducting Interviews</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4">
    <h3 class="text-lg font-medium">Making Job Offers</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Step 5: Add the timeline connectors

To connect our timeline items, we'll add a before pseudo-element to each item using the ::before selector. We'll use the absolute and inset-0 classes to position the connector, and we'll use the bg-blue-500 class to give it a blue background. We'll also use the z-10 class to ensure that the connector appears behind the timeline items.

<style>
  .timeline-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    height: 100%;
    width: 10px;
    background-color: #4299e1;
    z-index: -1;
  }
</style>

<div class="flex flex-wrap justify-center max-w-3xl mx-auto">
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4 timeline-item">
    <h3 class="text-lg font-medium">Sourcing Candidates</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4 timeline-item">
    <h3 class="text-lg font-medium">Screening Resumes</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4 timeline-item">
    <h3 class="text-lg font-medium">Conducting Interviews</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4 timeline-item">
    <h3 class="text-lg font-medium">Making Job Offers</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Step 6: Add responsive styles

Finally, we'll add some responsive styles to ensure that our timeline looks great on all screen sizes. We'll use the flex-col and flex-row classes to adjust the layout of our timeline items on smaller screens, and we'll use the text-center class to center the text within each item.

<style>
  @media (max-width: 640px) {
    .timeline-item {
      flex-direction: row;
      align-items: center;
    }
    .timeline-item::before {
      left: 0;
      top: -10px;
      width: 100%;
      height: 10px;
    }
  }
</style>

<div class="flex flex-wrap justify-center max-w-3xl mx-auto">
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4 timeline-item text-center">
    <h3 class="text-lg font-medium">Sourcing Candidates</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4 timeline-item text-center">
    <h3 class="text-lg font-medium">Screening Resumes</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4 timeline-item text-center">
    <h3 class="text-lg font-medium">Conducting Interviews</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="flex flex-col bg-gray-200 p-4 rounded-lg shadow-md border-l-4 border-blue-500 mt-4 timeline-item text-center">
    <h3 class="text-lg font-medium">Making Job Offers</h3>
    <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Conclusion

And there you have it! In just six steps, we've created a beautiful and responsive Recruiting Strategy UI component using Tailwind CSS. With Tailwind, you can create custom designs quickly and easily, making it an excellent choice for any FrontEnd developer looking to streamline their workflow. I hope you found this tutorial helpful and that it inspires you to create your own stunning UI components with Tailwind CSS.