Bulma Components

Bulma Component #41

<section class="has-background-white is-relative py-24 pb-56-fullhd is-clipped">
    <div class="container px-8">
        <div class="columns is-justify-content-center">
            <div class="column is-6">
                <div class="has-text-centered">
                    <a class="mb-36 is-inline-block" href="#">
                        <img src="flaro-assets/logos/flaro-logo-black-xl.svg" alt="">
                    </a>
                    <h2 class="mb-4 title is-size-1 has-text-centered has-text-weight-bold">Welcome Back</h2>
                    <p class="mb-12 has-text-weight-medium has-text-grey">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
                    <form>
                        <label class="is-block mb-5">
                            <input class="px-4 py-3 input has-background-white has-text-dark" type="text" placeholder="Email address">
                        </label>
                        <label class="is-relative is-block mb-5">
                            <div class="is-absolute" style="right: 16px; top: 50%; transform: translateY(-50%);">
                                <a class="has-text-link has-text-weight-medium" href="#">Forgot Password?</a>
                            </div>
                            <input class="pl-4 pr-36 py-3 input has-background-white has-text-dark" type="password" placeholder="Password">
                        </label>
                        <button type="submit" class="is-link button mb-8 is-fullwidth">Sign In</button>
                        <p class="has-text-weight-medium has-text-dark">
                          <span>Don’t have an account?</span>
                          <a class="has-text-link" href="#">Create free account</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

Bulma Component #42

Bulma

Flaro

<section x-data="{ mobileNavOpen: false }">
    <nav class="navbar py-5 is-white is-relative">
        <div class="container is-fluid">
            <div class="navbar-brand">
                <a class="navbar-item" href="#">
                    <img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 32px;">
                  </a>
                  <button class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                  </button>
            </div>
            <div class="navbar-menu is-absolute" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">
                <ul class="navbar-item">
                    <li><a class="navbar-item" href="#">Features</a></li>
                    <li><a class="navbar-item" href="#">Solutions</a></li>
                    <li><a class="navbar-item" href="#">Resources</a></li>
                    <li><a class="navbar-item" href="#">Pricing</a></li>
                </ul>
            </div>
            <div class="navbar-menu">
                <div class="navbar-end">
                    <div class="navbar-item is-hidden-mobile"><a class="button" href="#">Create Free Account</a></div>
                </div>
            </div>
        </div>
    </nav>
    <div :class="{ 'is-block': mobileNavOpen, 'is-hidden': !mobileNavOpen }" class="is-hidden navbar-side is-fixed is-inset-0" style="width: 75%; z-index: 9999; height: 100%;">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="has-background-dark is-fixed is-inset-0" style="opacity: 75%; z-index: 50;"></div>
        <aside class="menu is-relative is-flex is-flex-direction-column p-6 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
            <div class="is-flex is-align-items-center mb-10">
                <a class="mr-auto mb-0" href="#">
                    <span class="navbar-item">
                      <img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 28px;" width="auto">
                    </span>
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button is-text p-0 mb-2" type="button" aria-label="Close">
                    <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <ul class="menu-list is-size-7">
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Features</a></li>
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Solutions</a></li>
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Resources</a></li>
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Pricing</a></li>
            </ul>
            <div class="mt-auto">
                <div class="py-6"><a class="button is-outlined is-fullwidth" href="#">Create Free Account</a></div>
                <p class="mb-4 has-text-centered has-text-grey-dark">
                  <span>© 2021 All rights reserved.</span>
                </p>
            </div>
        </aside>
    </div>
</section>

Bulma Component #43

Bulma

Flaro

<section class="has-background-white py-24 is-clipped">
    <div class="container px-8">
        <div class="columns">
            <div class="column is-6">
                <img src="flaro-assets/images/how-it-works/iphone.png" alt="">
            </div>
            <div class="column is-6">
                <h2 class="mb-20 title is-size-1 has-text-weight-bold">How Flaro helps you to launch your business in no time and grow.</h2>
                <div class="is-flex is-flex-wrap-wrap -m-2">
                    <div class="p-2">
                        <div class="is-flex is-flex-wrap-wrap -m-6">
                            <div class="p-6">
                                <div class="has-text-white has-text-weight-bold has-background-link is-relative" style="width: 40px; height: 40px; border-radius: 50%;">
                                    <img class="is-absolute is-top-0 is-left-0" src="flaro-assets/images/how-it-works/gradient.svg" alt="">
                                    <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">1</span>
                                </div>
                                <img class="is-relative" style="left: 12px;" src="flaro-assets/images/how-it-works/line.svg" alt="">
                            </div>
                            <div class="p-6" style="flex: 1;">
                                <h3 class="mb-3 is-size-4 has-text-dark has-text-weight-semibold">Connect</h3>
                                <p class="has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, to the consectetur adipiscing elit. Volutpat tempor condimentum.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="is-flex is-flex-wrap-wrap -m-2">
                    <div class="p-2">
                        <div class="is-flex is-flex-wrap-wrap -m-6">
                            <div class="p-6">
                                <div class="has-text-white has-text-weight-bold has-background-link is-relative" style="width: 40px; height: 40px; border-radius: 50%;">
                                    <img class="is-absolute is-top-0 is-left-0" src="flaro-assets/images/how-it-works/gradient.svg" alt="">
                                    <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">2</span>
                                </div>
                                <img class="is-relative" style="left: 12px;" src="flaro-assets/images/how-it-works/line2.svg" alt="">
                            </div>
                            <div class="p-6" style="flex: 1;">
                                <h3 class="mb-3 is-size-4 has-text-dark has-text-weight-semibold">Store</h3>
                                <p class="has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, to the consectetur adipiscing elit. Volutpat tempor condimentum.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="is-flex is-flex-wrap-wrap -m-2">
                    <div class="p-2">
                        <div class="is-flex is-flex-wrap-wrap -m-6">
                            <div class="p-6">
                                <div class="has-text-white has-text-weight-bold has-background-link is-relative" style="width: 40px; height: 40px; border-radius: 50%;">
                                    <img class="is-absolute is-top-0 is-left-0" src="flaro-assets/images/how-it-works/gradient.svg" alt="">
                                    <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">3</span>
                                </div>
                            </div>
                            <div class="p-6" style="flex: 1;">
                                <h3 class="mb-3 is-size-4 has-text-dark has-text-weight-semibold">Ship</h3>
                                <p class="has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, to the consectetur adipiscing elit. Volutpat tempor condimentum.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Bulma Component #44

Bulma

Flaro

<section class="has-background-white py-24 is-clipped">
    <div class="container px-8">
        <h2 class="mb-5 has-text-centered has-text-weight-bold title is-size-1">The team behind Flaro</h2>
        <p class="mb-20 has-text-grey has-text-centered has-text-weight-medium mx-auto">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
        <div class="columns">
            <div class="column is-3">
                <div class="mx-auto is-relative is-clipped" style="border-radius: 20px;">
                    <img class="is-cover" style="width: 100%;" src="flaro-assets/images/team/team.png" alt="">
                    <div class="p-2 is-absolute is-bottom-0 is-left-0" style="width: 100%;">
                        <div class="has-background-black py-4 px-5" style="backdrop-filter: blur(3px); border-radius: 8px;">
                            <h3 class="mb-1 has-text-white has-text-weight-bold">Floyd Miles</h3>
                            <p class="has-text-grey has-text-weight-medium">CEO</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-3">
                <div class="mx-auto is-clipped is-relative" style="border-radius: 20px;">
                    <img class="is-cover" style="width: 100%;" src="flaro-assets/images/team/team2.png" alt="">
                    <div class="p-2 is-absolute is-bottom-0 is-left-0" style="width: 100%;">
                        <div class="has-background-black py-4 px-5" style="border-radius: 8px;">
                            <div class="pb-3 mb-4" style="backdrop-filter: blur(3px); border-bottom: 1px solid #5d5657;">
                                <h3 class="mb-1 has-text-white has-text-weight-bold">Theresa Webb</h3>
                                <p class="has-text-grey has-text-weight-medium">CEO</p>
                            </div>
                            <div class="is-flex is-align-items-center -m-2">
                                <div class="p-2">
                                    <a class="has-text-white" href="#">
                                        <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path d="M12.7345 1.28185C12.257 1.4941 11.7529 1.62675 11.2223 1.70634C11.7529 1.38797 12.1774 0.883899 12.3631 0.273702C11.859 0.565535 11.3019 0.777778 10.6917 0.910429C10.2142 0.406353 9.52438 0.0879898 8.78153 0.0879898C7.34889 0.0879898 6.18156 1.25532 6.18156 2.68796C6.18156 2.9002 6.20809 3.08591 6.26115 3.27163C4.1122 3.1655 2.17548 2.13082 0.8755 0.539005C0.663258 0.936959 0.530606 1.36144 0.530606 1.83899C0.530606 2.74102 0.981621 3.53693 1.69794 4.01447C1.27345 3.98794 0.8755 3.88182 0.504076 3.69611V3.72264C0.504076 4.99609 1.40611 6.05731 2.59997 6.29608C2.38773 6.34914 2.14895 6.37567 1.91018 6.37567C1.751 6.37567 1.56529 6.34914 1.40611 6.32261C1.751 7.35729 2.70609 8.12667 3.84689 8.12667C2.94486 8.81646 1.83059 9.24094 0.610197 9.24094C0.397954 9.24094 0.185712 9.24094 0 9.21441C1.16733 9.95726 2.52038 10.3817 4.00608 10.3817C8.80806 10.3817 11.4346 6.4022 11.4346 2.95326C11.4346 2.84714 11.4346 2.71449 11.4346 2.60837C11.9386 2.26347 12.3897 1.81246 12.7345 1.28185Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="p-2">
                                    <a class="has-text-white" href="#">
                                        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M2.86428 13.9048V7.57563H0.734375V5.10902H2.86428V3.28997C2.86428 1.17897 4.1536 0.0294952 6.03676 0.0294952C6.93881 0.0294952 7.71407 0.0966549 7.94001 0.126673V2.33279L6.63394 2.33338C5.60977 2.33338 5.41147 2.82005 5.41147 3.5342V5.10902H7.85401L7.53598 7.57563H5.41147V13.9048H2.86428Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="p-2">
                                    <a class="has-text-white" href="#">
                                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8.66026 1.39113C10.7216 1.39113 10.9657 1.39885 11.78 1.43598C12.2696 1.44197 12.7546 1.53187 13.2138 1.70178C13.5468 1.83021 13.8492 2.02695 14.1016 2.27933C14.354 2.53171 14.5507 2.83415 14.6792 3.16717C14.8491 3.62638 14.939 4.11134 14.945 4.60094C14.9817 5.41525 14.9898 5.65936 14.9898 7.72068C14.9898 9.78201 14.9821 10.0261 14.945 10.8404C14.939 11.33 14.8491 11.815 14.6792 12.2742C14.5507 12.6072 14.354 12.9097 14.1016 13.162C13.8492 13.4144 13.5468 13.6112 13.2138 13.7396C12.7546 13.9095 12.2696 13.9994 11.78 14.0054C10.9661 14.0422 10.722 14.0502 8.66026 14.0502C6.59857 14.0502 6.35446 14.0425 5.54052 14.0054C5.05091 13.9994 4.56596 13.9095 4.10674 13.7396C3.77372 13.6112 3.47129 13.4144 3.21891 13.162C2.96652 12.9097 2.76978 12.6072 2.64135 12.2742C2.47145 11.815 2.38154 11.33 2.37555 10.8404C2.33879 10.0261 2.3307 9.78201 2.3307 7.72068C2.3307 5.65936 2.33842 5.41525 2.37555 4.60094C2.38154 4.11134 2.47145 3.62638 2.64135 3.16717C2.76978 2.83415 2.96652 2.53171 3.21891 2.27933C3.47129 2.02695 3.77372 1.83021 4.10674 1.70178C4.56596 1.53187 5.05091 1.44197 5.54052 1.43598C6.35483 1.39922 6.59893 1.39113 8.66026 1.39113V1.39113ZM8.66026 0C6.56474 0 6.30078 0.00882319 5.47728 0.0463219C4.83651 0.059067 4.20255 0.180391 3.60235 0.405133C3.08747 0.599121 2.62113 0.903117 2.23585 1.29591C1.8427 1.68133 1.53845 2.14794 1.34434 2.66314C1.1196 3.26334 0.998273 3.89731 0.985528 4.53808C0.948765 5.36084 0.939941 5.6248 0.939941 7.72032C0.939941 9.81583 0.948765 10.0798 0.986263 10.9033C0.999008 11.5441 1.12033 12.178 1.34507 12.7782C1.53897 13.2934 1.84297 13.76 2.23585 14.1455C2.62134 14.5383 3.08795 14.8423 3.60308 15.0362C4.20328 15.261 4.83725 15.3823 5.47802 15.395C6.30152 15.4318 6.56438 15.4414 8.66099 15.4414C10.7576 15.4414 11.0205 15.4325 11.844 15.395C12.4847 15.3823 13.1187 15.261 13.7189 15.0362C14.2316 14.8375 14.6972 14.534 15.0859 14.145C15.4745 13.7561 15.7778 13.2903 15.9762 12.7775C16.2009 12.1773 16.3222 11.5433 16.335 10.9026C16.3718 10.0798 16.3806 9.81583 16.3806 7.72032C16.3806 5.6248 16.3718 5.36084 16.3343 4.53734C16.3215 3.89657 16.2002 3.2626 15.9754 2.66241C15.7816 2.14727 15.4775 1.68067 15.0847 1.29517C14.6992 0.902292 14.2326 0.598291 13.7174 0.404397C13.1172 0.179656 12.4833 0.0583318 11.8425 0.0455867C11.0197 0.00882324 10.7558 0 8.66026 0Z" fill="currentColor"></path>
                                            <path d="M8.65842 3.75616C7.8743 3.75616 7.10779 3.98868 6.45582 4.42431C5.80385 4.85995 5.2957 5.47913 4.99563 6.20356C4.69557 6.92799 4.61705 7.72513 4.77003 8.49418C4.923 9.26323 5.30059 9.96965 5.85504 10.5241C6.4095 11.0786 7.11592 11.4561 7.88497 11.6091C8.65402 11.7621 9.45116 11.6836 10.1756 11.3835C10.9 11.0834 11.5192 10.5753 11.9548 9.92333C12.3905 9.27136 12.623 8.50485 12.623 7.72073C12.623 6.66926 12.2053 5.66086 11.4618 4.91736C10.7183 4.17386 9.70989 3.75616 8.65842 3.75616ZM8.65842 10.2942C8.14944 10.2942 7.65189 10.1432 7.22869 9.86047C6.80549 9.57769 6.47565 9.17578 6.28087 8.70554C6.08609 8.23531 6.03513 7.71788 6.13442 7.21868C6.23372 6.71948 6.47882 6.26094 6.83872 5.90104C7.19862 5.54113 7.65716 5.29604 8.15636 5.19674C8.65556 5.09744 9.17299 5.14841 9.64323 5.34318C10.1135 5.53796 10.5154 5.8678 10.7982 6.291C11.0809 6.7142 11.2319 7.21175 11.2319 7.72073C11.2319 8.40325 10.9607 9.05781 10.4781 9.54043C9.9955 10.023 9.34094 10.2942 8.65842 10.2942V10.2942Z" fill="currentColor"></path>
                                            <path d="M12.7829 4.52561C13.2945 4.52561 13.7093 4.11083 13.7093 3.59917C13.7093 3.08751 13.2945 2.67273 12.7829 2.67273C12.2712 2.67273 11.8564 3.08751 11.8564 3.59917C11.8564 4.11083 12.2712 4.52561 12.7829 4.52561Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-3">
                <div class="mx-auto is-relative is-clipped" style="border-radius: 20px;">
                    <img class="is-cover" style="width: 100%;" src="flaro-assets/images/team/team3.png" alt="">
                    <div class="p-2 is-absolute is-bottom-0 is-left-0" style="width: 100%;">
                        <div class="has-background-black py-4 px-5" style="backdrop-filter: blur(3px); border-radius: 8px; ">
                            <h3 class="mb-1 has-text-white has-text-weight-bold">Devon Lane</h3>
                            <p class="has-text-grey has-text-weight-medium">Marketing Manager</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-3">
                <div class="mx-auto is-relative is-clipped" style="border-radius: 20px;">
                    <img class="is-cover" style="width: 100%;" src="flaro-assets/images/team/team4.png" alt="">
                    <div class="p-2 is-absolute is-bottom-0 is-left-0" style="width: 100%;">
                        <div class="has-background-black py-4 px-5" style="backdrop-filter: blur(3px); border-radius: 8px; ">
                            <h3 class="mb-1 has-text-white has-text-weight-bold">Jane Cooper</h3>
                            <p class="has-text-grey has-text-weight-medium">Business Representative</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Bulma Component #45

Bulma

Flaro

<section class="has-background-black py-24 is-clipped">
    <div class="container px-8">
        <h2 class="mb-6 title is-size-1 has-text-white has-text-centered has-text-weight-bold">Try Flaro for Free</h2>
        <p class="mb-20 has-text-grey has-text-centered has-text-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen tum.</p>
        <div class="box p-0 is-relative is-clipped" style="border: 1px solid #403b3c; border-radius: 30px;">
            <img class="is-absolute is-top-0 is-left-0" src="flaro-assets/images/pricing/gradient2.svg" alt="">
            <div class="columns">
                <div class="column is-6 p-0">
                    <div class="px-11 pt-10 pb-12 has-background-dark">
                        <svg class="mb-9" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M19.5 34L18 40L16 42H32L30 40L28.5 34M6 26H42M10 34H38C40.2091 34 42 32.2091 42 30V10C42 7.79086 40.2091 6 38 6H10C7.79086 6 6 7.79086 6 10V30C6 32.2091 7.79086 34 10 34Z" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <p class="mb-3 has-text-grey has-text-weight-semibold">On your machine</p>
                        <h3 class="mb-11 text-3xl has-text-white has-text-weight-bold">Flaro can run on your PC</h3>
                        <ul class="mb-11">
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">3 Team Members</p>
                            </li>
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">1200+ UI Blocks</p>
                            </li>
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">10 GB Cloud Storage</p>
                            </li>
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">Individual Email Account</p>
                            </li>
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">Premium Support</p>
                            </li>
                        </ul>
                        <a href="#" class="py-4 px-10 has-text-white has-text-weight-semibold button is-link">Download PC App</a>
                    </div>
                </div>
                <div class="column is-6 p-0">
                    <div class="px-11 pt-10 pb-12 has-background-dark">
                        <svg class="mb-9" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 30C6 34.4183 9.58172 38 14 38H32C37.5228 38 42 33.5228 42 28C42 22.4772 37.5228 18 32 18C31.9333 18 31.8668 18.0007 31.8004 18.002C30.8746 13.4365 26.8386 10 22 10C16.4772 10 12 14.4772 12 20C12 20.7537 12.0834 21.4879 12.2414 22.1939C8.66913 22.9952 6 26.1859 6 30Z" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <p class="mb-3 has-text-grey has-text-weight-semibold">On cloud</p>
                        <h3 class="mb-11 text-3xl has-text-white has-text-weight-bold">Use Flaro from our server</h3>
                        <ul class="mb-11">
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">3 Team Members</p>
                            </li>
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">1200+ UI Blocks</p>
                            </li>
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">10 GB Cloud Storage</p>
                            </li>
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">Individual Email Account</p>
                            </li>
                            <li class="mb-4 is-flex is-align-items-center">
                                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                                </svg>
                                <p class="has-text-white has-text-weight-semibold">Premium Support</p>
                            </li>
                        </ul>
                        <a href="#" class="py-4 px-10 has-text-weight-semibold button is-white">Start on Cloud</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Bulma Component #46

Bulma

Flaro

<section class="has-background-light is-relative py-24 is-clipped">
    <img class="is-absolute is-bottom-0" style="left: 50%; transform: translateX(-50%);" src="flaro-assets/images/career/gradient2.svg" alt="">
    <div class="container px-8">
        <p class="mb-6 has-text-link has-text-weight-bold is-uppercase">Join with us</p>
        <h2 class="mb-5 title is-size-1 has-text-weight-bold">Open Positions</h2>
        <p class="mb-20 has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae.</p>
        <div class="is-flex is-flex-wrap-nowrap -m-2 mb-2">
            <div class="is-flex-shrink-0 p-2">
                <a href="#">
                    <div class="p-8 has-background-white box">
                        <div class="is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%;">
                            <div class="mb-16">
                                <h3 class="mb-4 has-text-weight-bold has-text-dark is-size-4">Front-end Developer</h3>
                                <p class="has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, consectrtur adipiscing elit. Volutpat tempor vitae.</p>
                            </div>
                            <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between is-align-items-center -m-2">
                                <div class="p-2">
                                    <div class="is-flex is-flex-wrap-wrap -m-3">
                                        <div class="p-3">
                                            <div class="is-flex is-flex-wrap-wrap is-align-items-center -m-1">
                                                <div class="p-1">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                </div>
                                                <div class="p-1">
                                                    <p class="has-text-dark">New York, USA</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-3">
                                            <div class="is-flex is-flex-wrap-wrap is-align-items-center -m-1">
                                                <div class="p-1">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                </div>
                                                <div class="p-1">
                                                    <p class="has-text-dark">Full-time</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-2">
                                    <div class="has-text-link" href="#">
                                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path d="M9.83333 3.33337L14.5 8.00004M14.5 8.00004L9.83333 12.6667M14.5 8.00004L2.5 8.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="is-flex-shrink-0 p-2">
                <a href="#">
                    <div class="p-8 has-background-white box">
                        <div class="is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%;">
                            <div class="mb-16">
                                <h3 class="mb-4 has-text-weight-bold has-text-dark is-size-4">Senior Digital Marketer</h3>
                                <p class="has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, consectrtur adipiscing elit. Volutpat tempor vitae.</p>
                            </div>
                            <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between is-align-items-center -m-2">
                                <div class="p-2">
                                    <div class="is-flex is-flex-wrap-wrap -m-3">
                                        <div class="p-3">
                                            <div class="is-flex is-flex-wrap-wrap is-align-items-center -m-1">
                                                <div class="p-1">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                </div>
                                                <div class="p-1">
                                                    <p class="has-text-dark">New York, USA</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-3">
                                            <div class="is-flex is-flex-wrap-wrap is-align-items-center -m-1">
                                                <div class="p-1">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                </div>
                                                <div class="p-1">
                                                    <p class="has-text-dark">Full-time</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-2">
                                    <div class="has-text-link" href="#">
                                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path d="M9.83333 3.33337L14.5 8.00004M14.5 8.00004L9.83333 12.6667M14.5 8.00004L2.5 8.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="is-flex-shrink-0 p-2">
                <a href="#">
                    <div class="p-8 has-background-white box">
                        <div class="is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%;">
                            <div class="mb-16">
                                <h3 class="mb-4 has-text-weight-bold has-text-dark is-size-4">Product Designer</h3>
                                <p class="has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, consectrtur adipiscing elit. Volutpat tempor vitae.</p>
                            </div>
                            <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between is-align-items-center -m-2">
                                <div class="p-2">
                                    <div class="is-flex is-flex-wrap-wrap -m-3">
                                        <div class="p-3">
                                            <div class="is-flex is-flex-wrap-wrap is-align-items-center -m-1">
                                                <div class="p-1">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                </div>
                                                <div class="p-1">
                                                    <p class="has-text-dark">New York, USA</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-3">
                                            <div class="is-flex is-flex-wrap-wrap is-align-items-center -m-1">
                                                <div class="p-1">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                </div>
                                                <div class="p-1">
                                                    <p class="has-text-dark">Full-time</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-2">
                                    <div class="has-text-link" href="#">
                                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path d="M9.83333 3.33337L14.5 8.00004M14.5 8.00004L9.83333 12.6667M14.5 8.00004L2.5 8.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="is-flex-shrink-0 p-2">
                <a href="#">
                    <div class="p-8 has-background-white box" style="opacity: 0.2;">
                        <div class="is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%;">
                            <div class="mb-16">
                                <h3 class="mb-4 has-text-weight-bold has-text-dark is-size-4">JS Developer</h3>
                                <p class="has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, consectrtur adipiscing elit. Volutpat tempor vitae.</p>
                            </div>
                            <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between is-align-items-center -m-2">
                                <div class="p-2">
                                    <div class="is-flex is-flex-wrap-wrap -m-3">
                                        <div class="p-3">
                                            <div class="is-flex is-flex-wrap-wrap is-align-items-center -m-1">
                                                <div class="p-1">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                </div>
                                                <div class="p-1">
                                                    <p class="has-text-dark">New York, USA</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-3">
                                            <div class="is-flex is-flex-wrap-wrap is-align-items-center -m-1">
                                                <div class="p-1">
                                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M13.2426 12.4926C12.6185 13.1168 11.3891 14.3462 10.4137 15.3216C9.63264 16.1026 8.36745 16.1027 7.5864 15.3217C6.62886 14.3641 5.42126 13.1565 4.75736 12.4926C2.41421 10.1495 2.41421 6.35051 4.75736 4.00736C7.10051 1.66421 10.8995 1.66421 13.2426 4.00736C15.5858 6.35051 15.5858 10.1495 13.2426 12.4926Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M11.25 8.25C11.25 9.49264 10.2426 10.5 9 10.5C7.75736 10.5 6.75 9.49264 6.75 8.25C6.75 7.00736 7.75736 6 9 6C10.2426 6 11.25 7.00736 11.25 8.25Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                </div>
                                                <div class="p-1">
                                                    <p class="has-text-dark">Full-time</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-2">
                                    <div class="has-text-link" href="#">
                                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path d="M9.83333 3.33337L14.5 8.00004M14.5 8.00004L9.83333 12.6667M14.5 8.00004L2.5 8.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

Bulma Component #47

Bulma

Flaro

<section class="has-background-link py-24 is-clipped is-relative">
    <img class="is-absolute is-top-0" style="left: 50%; transform: translateX(-50%);" src="flaro-assets/images/numbers/gradient2.svg" alt="">
    <div class="container px-8 is-relative" style="z-index: 10;">
        <div class="mb-24" style="border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
            <h2 class="pb-24 has-text-white has-text-weight-bold title is-size-1">Join the tribe &amp; build your startup successful</h2>
        </div>
        <div class="columns">
            <div class="column is-4">
                <p class="mb-6 has-text-white has-text-weight-semibold">Satisfied Clients</p>
                <h3 class="mb-4 has-text-white has-text-weight-bold title is-size-1">84,900</h3>
                <p class="has-text-white has-text-weight-medium">Flaro has garnered more than 15k+ users.</p>
            </div>
            <div class="column is-4">
                <p class="mb-6 has-text-white has-text-weight-semibold">Downloads</p>
                <h3 class="mb-4 has-text-white has-text-weight-bold title is-size-1">3.2M+</h3>
                <p class="has-text-white has-text-weight-medium">Flaro has garnered more than 15k+ users.</p>
            </div>
            <div class="column is-4">
                <p class="mb-6 has-text-white has-text-weight-semibold">Customer Reviews</p>
                <h3 class="mb-4 has-text-white has-text-weight-bold title is-size-1">21,394</h3>
                <p class="has-text-white has-text-weight-medium">Flaro has garnered more than 15k+ users.</p>
            </div>
        </div>
    </div>
</section>

Bulma Component #48

Bulma

Flaro

<section class="has-background-white py-24 is-relative is-clipped">
    <img class="is-absolute is-right-0 is-top-0" src="flaro-assets/images/footers/gradient2.svg" alt="">
    <div class="container px-8">
        <div class="columns">
            <div class="column is-4">
                <a class="is-inline-block" href="#">
                    <img src="flaro-assets/logos/flaro-logo-black-xl.svg" alt="">
                </a>
            </div>
            <div class="column is-2">
                <h3 class="mb-6 has-text-weight-semibold has-text-dark">Product</h3>
                <ul>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Careers</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">About Us</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Insights</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">PCI Compliance</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Intro Articles</a></li>
                <li><a class="has-text-grey has-text-weight-medium" href="#">Pricing</a></li>
                </ul>
            </div>
            <div class="column is-2">
                <h3 class="mb-6 has-text-weight-semibold has-text-dark">For Developers</h3>
                <ul>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Docs</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Knowledge Base</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">System Status</a></li>
                <li><a class="has-text-grey has-text-weight-medium" href="#">Security</a></li>
                </ul>
            </div>
            <div class="column is-2">
                <h3 class="mb-6 has-text-weight-semibold has-text-dark">Resources</h3>
                <ul>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">About</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Leadership</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Press/News</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Careers/Team</a></li>
                <li><a class="has-text-grey has-text-weight-medium" href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="column is-2">
                <h3 class="mb-6 has-text-weight-semibold has-text-dark">Legal</h3>
                <ul>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Docs</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Knowledge Base</a></li>
                <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">System Status</a></li>
                <li><a class="has-text-grey has-text-weight-medium" href="#">Security</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

Bulma Component #49

Bulma

Flaro

<section class="has-background-black py-24 is-clipped">
    <div class="container px-8">
        <h2 class="mb-6 title is-size-1 has-text-white has-text-weight-bold">Our Latest Articles</h2>
        <p class="mb-20 has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae vel purus.</p>
        <div class="columns">
            <div class="column is-4">
                <div class="box has-background-dark" style="border: 0;">
                    <div class="mb-8">
                        <img class="mb-6 is-cover" style="width: 100%;" src="flaro-assets/images/blog/blog-wide3.png" alt="">
                        <p class="mb-3 has-text-grey has-text-weight-medium">Product</p>
                        <a class="has-text-white has-text-weight-bold mb-4 is-inline-block" href="#">How startup company can help you to grow as a developer.</a>
                        <p class="has-text-grey has-text-weight-medium">12 May 2020</p>
                    </div>
                </div>
            </div>
            <div class="column is-4">
                <div class="box has-background-dark" style="border: 0;">
                    <div class="mb-8">
                        <img class="mb-6 is-cover" style="width: 100%;" src="flaro-assets/images/blog/blog-wide3.png" alt="">
                        <p class="mb-3 has-text-grey has-text-weight-medium">Product</p>
                        <a class="has-text-white has-text-weight-bold mb-4 is-inline-block" href="#">How startup company can help you to grow as a developer.</a>
                        <p class="has-text-grey has-text-weight-medium">12 May 2020</p>
                    </div>
                </div>
            </div>
            <div class="column is-4">
                <div class="box has-background-dark" style="border: 0;">
                    <div class="mb-8">
                        <img class="mb-6 is-cover" style="width: 100%;" src="flaro-assets/images/blog/blog-wide3.png" alt="">
                        <p class="mb-3 has-text-grey has-text-weight-medium">Product</p>
                        <a class="has-text-white has-text-weight-bold mb-4 is-inline-block" href="#">How startup company can help you to grow as a developer.</a>
                        <p class="has-text-grey has-text-weight-medium">12 May 2020</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Bulma Component #50

Bulma

Flaro

<section class="has-background-light py-24 is-clipped">
    <div class="container px-8">
        <div class="is-flex is-flex-wrap-wrap is-justify-content-center -m-1">
            <div class="p-1">
                <img src="flaro-assets/logos/brands/logo-square-white.png" alt="">
            </div>
            <div class="p-1">
                <img src="flaro-assets/logos/brands/logo-square-white2.png" alt="">
            </div>
            <div class="p-1">
                <img src="flaro-assets/logos/brands/logo-square-white3.png" alt="">
            </div>
            <div class="p-1">
                <img src="flaro-assets/logos/brands/logo-square-white4.png" alt="">
            </div>
            <div class="p-1">
                <img src="flaro-assets/logos/brands/logo-square-white5.png" alt="">
            </div>
            <div class="p-1">
                <img src="flaro-assets/logos/brands/logo-square-white6.png" alt="">
            </div>
        </div>
        <h2 class="mb-6 title is-size-1 has-text-centered has-text-weight-bold">Loved by the incredible community</h2>
        <p class="has-text-grey has-text-centered has-text-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.</p>
    </div>
</section>

Bulma Component #51

Bulma

Flaro

<section class="has-background-link py-12">
    <div class="container px-8">
        <div class="columns is-align-items-center">
            <div class="column is-4">
                <h1 class="has-text-white title mb-6 is-size-1 has-text-weight-bold">Trusted by over 50,000 startups since 2014.</h1>
                <p class="subtitle has-text-weight-medium has-text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu condimentum purus turpis vitae gravida iaculis id quisque nullam. Rhoncus, adipiscing mattis.</p>
            </div>
            <div class="column is-4">
                <div class="is-flex is-flex-wrap-wrap is-justify-content-center">
                    <div class="is-inline-block is-relative is-clipped" style="border-radius: 20px;">
                        <img src="flaro-assets/images/features/woman.jpg" alt="">
                        <div class="has-background-white py-8 px-9 is-absolute is-bottom-0 is-left-0" style="backdrop-filter: blur(10px);">
                            <h3 class="mb-3 title is-size-4 has-text-weight-bold">Give an amazing on-board experience of your product</h3>
                            <p class="subtitle has-text-weight-semibold has-text-grey">4096 people are joining</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-4">
                <div class="is-flex is-flex-wrap-wrap" style="height: 100%;">
                    <div class="p-10" style="width: 100%;">
                        <h3 class="mb-5 is-size-4 has-text-white has-text-weight-bold">Unlimited Meetings</h3>
                        <p class="has-text-white has-text-weight-medium">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
                    </div>
                    <div class="px-10" style="width: 100%;">
                        <div style="height: 1px; width: 100%; background-color: #5754EB;"></div>
                    </div>
                    <div class="p-10" style="width: 100%;">
                        <h3 class="mb-5 is-size-4 has-text-white has-text-weight-bold">Live Broadcast</h3>
                        <p class="has-text-white has-text-weight-medium">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Bulma Component #52

Bulma

Flaro

<section x-data="{ mobileNavOpen: false }">
    <nav class="navbar py-5 is-white">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item" href="#">
                    <img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 32px;">
                  </a>
                  <button class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                  </button>
            </div>
            <div class="navbar-menu">
                <ul class="navbar-item">
                    <li><a class="navbar-item" href="#">Features</a></li>
                    <li><a class="navbar-item" href="#">Solutions</a></li>
                    <li><a class="navbar-item" href="#">Resources</a></li>
                    <li><a class="navbar-item" href="#">Pricing</a></li>
                </ul>
            </div>
            <div class="navbar-menu">
                <div class="navbar-end">
                    <div class="navbar-menu">
                        <ul class="navbar-item">
                            <li><a class="navbar-item" href="#">Sign In</a></li>
                        </ul>
                    </div>
                    <div class="navbar-item is-hidden-mobile"><a class="button is-link" href="#">Try 14 Days Free Trial</a></div>
                </div>
            </div>
        </div>
    </nav>
    <div :class="{ 'is-block': mobileNavOpen, 'is-hidden': !mobileNavOpen }" class="is-hidden navbar-side is-fixed is-inset-0" style="width: 75%; z-index: 9999; height: 100%;;">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="has-background-dark is-fixed is-inset-0" style="opacity: 75%; z-index: 50;"></div>
        <aside class="menu is-relative is-flex is-flex-direction-column p-6 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
            <div class="is-flex is-align-items-center mb-10">
                <a class="mr-auto mb-0" href="#">
                    <span class="navbar-item">
                      <img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 28px;" width="auto">
                    </span>
                </a>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button is-text p-0 mb-2" type="button" aria-label="Close">
                    <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <ul class="menu-list is-size-7">
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Features</a></li>
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Solutions</a></li>
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Resources</a></li>
                <li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Pricing</a></li>
            </ul>
            <div class="mt-auto">
                <div class="py-6"><a class="button is-link is-fullwidth" href="#">Try 14 Days Free Trial</a></div>
                <p class="mb-4 has-text-centered has-text-grey-dark">
                  <span>© 2021 All rights reserved.</span>
                </p>
            </div>
        </aside>
    </div>
</section>

Bulma Component #53

Bulma

Flaro

<section class="has-background-light py-24 is-relative is-clipped">
    <img class="is-absolute is-bottom-0 is-right-0" src="flaro-assets/images/contact/gradient2.svg" alt="">
    <div class="container px-8">
        <div class="columns">
            <div class="column is-6">
                <div class="is-flex is-flex-direction-column is-justify-content-space-between">
                    <div class="mb-12">
                      <p class="mb-6 has-text-link has-text-weight-bold is-uppercase">Contact us</p>
                      <h2 class="title is-size-1 has-text-weight-bold">Get connected to grow better business.</h2>
                    </div>
                    <div class="block">
                      <p class="mb-4 has-text-grey has-text-weight-bold is-uppercase">Email</p>
                      <ul class="mb-14">
                        <li class="text-xl has-text-weight-semibold has-text-dark">info@email.com</li>
                        <li class="text-xl has-text-weight-semibold has-text-dark">support@gmail.com</li>
                      </ul>
                      <p class="mb-4 has-text-grey has-text-weight-bold is-uppercase">Phone</p>
                      <ul>
                        <li class="text-xl has-text-weight-semibold has-text-dark">+1 848 4125 690</li>
                        <li class="text-xl has-text-weight-semibold has-text-dark">+1 848 4125 658</li>
                      </ul>
                    </div>
                </div>
            </div>
            <div class="column is-6">
                <form>
                    <div class="box px-11 pt-8 pb-12 has-background-white">
                        <label class="mb-4 has-text-dark has-text-weight-semibold is-block">Name</label>
                        <div class="is-relative mb-4">
                            <svg class="is-absolute" style="left: 16px; top: 50%; transform: translateY(-50%);" width="20" height="26" viewBox="0 0 20 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.3327 8.83358C13.3327 10.6745 11.8403 12.1669 9.99935 12.1669C8.1584 12.1669 6.66602 10.6745 6.66602 8.83358C6.66602 6.99263 8.1584 5.50024 9.99935 5.50024C11.8403 5.50024 13.3327 6.99263 13.3327 8.83358Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M9.99935 14.6669C6.77769 14.6669 4.16602 17.2786 4.16602 20.5002H15.8327C15.8327 17.2786 13.221 14.6669 9.99935 14.6669Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <input class="input has-background-white has-text-dark" type="text" placeholder="First &amp; last name">
                        </div>
                        <label class="mb-4 has-text-dark has-text-weight-semibold is-block">Email Address</label>
                        <div class="is-relative mb-4">
                            <svg class="is-absolute" style="left: 16px; top: 50%; transform: translateY(-50%);" width="20" height="26" viewBox="0 0 20 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.3327 8.83358C13.3327 10.6745 11.8403 12.1669 9.99935 12.1669C8.1584 12.1669 6.66602 10.6745 6.66602 8.83358C6.66602 6.99263 8.1584 5.50024 9.99935 5.50024C11.8403 5.50024 13.3327 6.99263 13.3327 8.83358Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M9.99935 14.6669C6.77769 14.6669 4.16602 17.2786 4.16602 20.5002H15.8327C15.8327 17.2786 13.221 14.6669 9.99935 14.6669Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <input class="input has-background-white has-text-dark" type="text" placeholder="Email address">
                        </div>
                        <label class="mb-4 has-text-dark has-text-weight-semibold is-block">Message</label>
                        <div class="is-relative mb-12">
                            <svg class="is-absolute" style="left: 16px; top: 16px;" width="20" height="26" viewBox="0 0 20 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.3327 8.83358C13.3327 10.6745 11.8403 12.1669 9.99935 12.1669C8.1584 12.1669 6.66602 10.6745 6.66602 8.83358C6.66602 6.99263 8.1584 5.50024 9.99935 5.50024C11.8403 5.50024 13.3327 6.99263 13.3327 8.83358Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M9.99935 14.6669C6.77769 14.6669 4.16602 17.2786 4.16602 20.5002H15.8327C15.8327 17.2786 13.221 14.6669 9.99935 14.6669Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <textarea class="textarea has-background-white has-text-dark" placeholder="Message"></textarea>
                        </div>
                        <div class="is-flex">
                            <button type="submit" class="is-link button">Send Message</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

Bulma Component #54

Bulma

Flaro

<section class="has-background-white py-24 is-clipped">
    <div class="container px-8">
        <p class="mb-5 has-text-link has-text-weight-semibold is-uppercase">Frequently Asked questions</p>
        <h2 class="mb-16 title is-size-1 has-text-weight-bold">Common Answers</h2>
        <div class="columns">
            <div class="column is-6">
                <div class="box has-background-white">
                    <h3 class="mb-4 has-text-weight-semibold is-size-4 has-text-dark">1. How does Flaro help you in problems?</h3>
                    <p class="has-text-grey">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor condimentum vitae vel purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="column is-6">
                <div class="box has-background-white">
                    <h3 class="mb-4 has-text-weight-semibold is-size-4 has-text-dark">2. What makes us look good?</h3>
                    <p class="has-text-grey">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor condimentum vitae vel purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
        <div class="columns">
            <div class="column is-6">
                <div class="box has-background-white">
                    <h3 class="mb-4 has-text-weight-semibold is-size-4 has-text-dark">3. How to claim your 25% discount offer?</h3>
                    <p class="has-text-grey">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor condimentum vitae vel purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="column is-6">
                <div class="box has-background-white">
                    <h3 class="mb-4 has-text-weight-semibold is-size-4 has-text-dark">4. How to get support for the product?</h3>
                    <p class="has-text-grey">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor condimentum vitae vel purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
        <a class="mt-8 has-text-weight-semibold has-text-link" style="text-decoration: underline;" href="#">See all questions &amp; answers</a>
    </div>
</section>

Bulma Component #55

Bulma

Flaro

<section class="has-background-white py-24 is-clipped">
    <div class="container px-8">
        <div class="is-flex is-justify-content-center">
            <div class="is-relative is-clipped" style="border-radius: 20px;">
                <img class="is-cover" style="height: 650px;" src="flaro-assets/images/testimonials/contact.png" alt="">
                <div class="px-14 py-11 is-absolute is-left-0 is-top-0 is-hidden-mobile is-block-tablet" style="width: 50%; height: 100%; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(24px);">
                    <div class="is-flex is-flex-direction-column is-justify-content-center is-align-items-flex-start" style="height: 100%;">
                        <svg class="mb-20" width="47" height="36" viewBox="0 0 47 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 36V25.6999C0 22.7377 0.554721 19.6578 1.66416 16.46C2.80722 13.2286 4.35372 10.1823 6.30365 7.32118C8.2872 4.42637 10.5061 1.98598 12.9603 0L21.4324 5.5035C19.4489 8.4993 17.7847 11.6297 16.4399 14.8948C15.1288 18.1262 14.49 21.6943 14.5236 25.5989V36H0ZM25.5676 36V25.6999C25.5676 22.7377 26.1223 19.6578 27.2318 16.46C28.3748 13.2286 29.9213 10.1823 31.8712 7.32118C33.8548 4.42637 36.0737 1.98598 38.5279 0L47 5.5035C45.0165 8.4993 43.3523 11.6297 42.0075 14.8948C40.6964 18.1262 40.0576 21.6943 40.0912 25.5989V36H25.5676Z" fill="#4F46E5"></path>
                        </svg>
                        <h3 class="mb-8 has-text-weight-semibold is-size-4 has-text-dark">We use Flaro for almost everything: pipe management, hr, contacts management. Great platform to keep all things in one place. What a beauty!! this is world class design and functionality.</h3>
                        <h4 class="mb-1 has-text-weight-bold has-text-dark">Jenny Wilson</h4>
                        <p class="has-text-weight-medium has-text-grey">Senior UX Designer</p>
                    </div>
                </div>
                <div class="px-8 py-11 is-absolute is-inset-0 is-block-mobile is-hidden-tablet" style="background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(24px);">
                    <div class="is-flex is-flex-direction-column is-justify-content-center is-align-items-flex-start" style="height: 100%;">
                        <svg class="mb-20" width="47" height="36" viewBox="0 0 47 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 36V25.6999C0 22.7377 0.554721 19.6578 1.66416 16.46C2.80722 13.2286 4.35372 10.1823 6.30365 7.32118C8.2872 4.42637 10.5061 1.98598 12.9603 0L21.4324 5.5035C19.4489 8.4993 17.7847 11.6297 16.4399 14.8948C15.1288 18.1262 14.49 21.6943 14.5236 25.5989V36H0ZM25.5676 36V25.6999C25.5676 22.7377 26.1223 19.6578 27.2318 16.46C28.3748 13.2286 29.9213 10.1823 31.8712 7.32118C33.8548 4.42637 36.0737 1.98598 38.5279 0L47 5.5035C45.0165 8.4993 43.3523 11.6297 42.0075 14.8948C40.6964 18.1262 40.0576 21.6943 40.0912 25.5989V36H25.5676Z" fill="#4F46E5"></path>
                        </svg>
                        <h3 class="mb-8 has-text-weight-semibold is-size-4 has-text-dark">We use Flaro for almost everything: pipe management, hr, contacts management. Great platform to keep all things in one place. What a beauty!! this is world class design and functionality.</h3>
                        <h4 class="mb-1 has-text-weight-bold has-text-dark">Jenny Wilson</h4>
                        <p class="has-text-weight-medium has-text-grey">Senior UX Designer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Bulma Component #56

Bulma

Flaro

<section class="has-background-white is-clipped">
    <div class="container is-fluid p-0">
        <div class="columns">
            <div class="column is-6">
                <div class="columns is-justify-content-center px-8">
                    <div class="column is-12-tablet is-6-fullhd">
                        <div class="mx-auto pt-16 pb-24">
                            <div class="is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-space-between -m-2 mb-24">
                                <div class="p-2">
                                    <a class="is-inline-block" href="#">
                                        <img src="flaro-assets/logos/flaro-logo-black-xl.svg" alt="">
                                    </a>
                                </div>
                                <div class="p-2">
                                    <a class="has-text-link has-text-weight-medium" href="#">Sign In</a>
                                </div>
                            </div>
                            <h2 class="mb-4 title is-size-1 has-text-weight-bold">Create free account</h2>
                            <p class="mb-9 has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
                            <form>
                                <label class="is-block mb-5">
                                    <input class="px-4 py-3 input has-background-white has-text-dark" type="text" placeholder="Full name">
                                </label>
                                <label class="is-block mb-5">
                                    <input class="px-4 py-3 input has-background-white has-text-dark" type="text" placeholder="Email address">
                                </label>
                                <label class="is-block mb-5">
                                    <input class="px-4 py-3 input has-background-white has-text-dark" type="password" placeholder="********">
                                </label>
                                <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between -m-2 mb-4">
                                    <div class="p-2">
                                        <div class="is-flex is-align-items-center">
                                            <input style="width: 16px; height: 16px;" id="default-checkbox" type="checkbox" value="">
                                            <label class="ml-2 has-text-dark has-text-weight-medium" for="default-checkbox">
                                                <span>By signing up, I agree to the</span>
                                                <a class="has-text-link" href="#">Terms &amp; Conditions</a>
                                                <span>of Flaro</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="is-link button mb-6 is-fullwidth">Create Free Account</button>
                                <a href="#" class="button is-fullwidth mb-4">
                                    <img class="mr-3" src="flaro-assets/logos/brands/google.svg" alt="">
                                    <span class="has-text-weight-semibold">Sign up with Google</span>
                                </a>
                                <a href="#" class="button is-fullwidth">
                                    <img class="mr-3" src="flaro-assets/logos/brands/fb.svg" alt="">
                                    <span class="has-text-weight-semibold">Sign up with Facebook</span>
                                </a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-6 p-0">
                <div class="is-flex is-flex-direction-column is-justify-content-center has-background-link p-8" style="height: 100%;">
                    <img class="mx-auto" src="flaro-assets/images/sign-in/cards.png" alt="">
                    <h2 class="mb-5 title is-size-1 has-text-white has-text-weight-semibold has-text-centered">A special card for you</h2>
                    <p class="has-text-white has-text-weight-medium has-text-centered">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
                    <div class="pb-6 mt-16 is-flex is-flex-wrap-wrap is-justify-content-center is-align-items-center -m-2">
                        <div class="w-auto p-2"><a class="is-inline-block has-background-link-light" style="border-radius: 50%; width: 8px; height: 8px;" href="#"></a></div>
                        <div class="w-auto p-2"><a class="is-inline-block has-background-link-light" style="border-radius: 50%; width: 8px; height: 8px;" href="#"></a></div>
                        <div class="w-auto p-2"><a class="is-inline-block has-background-link-light" style="border-radius: 50%; width: 8px; height: 8px;" href="#"></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Bulma Component #57

Bulma

Flaro

<section class="has-background-white is-clipped">
    <div class="container is-fluid p-0">
        <div class="columns">
            <div class="column is-6">
                <div class="columns is-justify-content-center px-8">
                    <div class="column is-12-tablet is-6-fullhd">
                        <div class="mx-auto pt-16 pb-24">
                            <div class="is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-space-between -m-2 mb-24">
                                <div class="p-2">
                                    <a class="is-inline-block" href="#">
                                        <img src="flaro-assets/logos/flaro-logo-black-xl.svg" alt="">
                                    </a>
                                </div>
                                <div class="p-2">
                                    <a class="has-text-link has-text-weight-medium" href="#">Create free account</a>
                                </div>
                            </div>
                            <h2 class="mb-4 title is-size-1 has-text-weight-bold">Login to Flaro</h2>
                            <p class="mb-9 has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
                            <form>
                                <label class="is-block mb-5">
                                    <input class="px-4 py-3 input has-background-white has-text-dark" type="text" placeholder="Email address">
                                </label>
                                <label class="is-block mb-5">
                                    <input class="px-4 py-3 input has-background-white has-text-dark" type="password" placeholder="********">
                                </label>
                                <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between -m-2 mb-4">
                                    <div class="p-2">
                                        <div class="is-flex is-align-items-center">
                                            <input style="width: 16px; height: 16px;" id="default-checkbox" type="checkbox" value="">
                                            <label class="ml-2 has-text-dark has-text-weight-medium" for="default-checkbox">Remember Me</label>
                                        </div>
                                    </div>
                                    <div class="p-2"><a class="has-text-link has-text-weight-medium" href="#">Forgot Password?</a></div>
                                </div>
                                <button type="submit" class="is-link button mb-6 is-fullwidth">Sign In</button>
                                <a href="#" class="button is-fullwidth is-outlined mb-4">
                                    <img class="mr-3" src="flaro-assets/logos/brands/google.svg" alt="">
                                    <span class="has-text-weight-semibold">Sign in with Google</span>
                                </a>
                                <a href="#" class="button is-fullwidth is-outlined">
                                    <img class="mr-3" src="flaro-assets/logos/brands/fb.svg" alt="">
                                    <span class="has-text-weight-semibold">Sign in with Facebook</span>
                                </a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column is-6 p-0">
                <div class="is-flex is-flex-direction-column is-justify-content-center has-background-link p-8" style="height: 100%;">
                    <img class="mx-auto" src="flaro-assets/images/sign-in/cards.png" alt="">
                    <h2 class="mb-5 title is-size-1 has-text-white has-text-weight-semibold has-text-centered">A special card for you</h2>
                    <p class="has-text-white has-text-weight-medium has-text-centered">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
                    <div class="pb-6 mt-16 is-flex is-flex-wrap-wrap is-justify-content-center is-align-items-center -m-2">
                        <div class="w-auto p-2"><button class="is-inline-block has-background-link-light" style="border-radius: 50%; width: 8px; height: 8px;"></button></div>
                        <div class="w-auto p-2"><button class="is-inline-block has-background-link-light" style="border-radius: 50%; width: 8px; height: 8px;"></button></div>
                        <div class="w-auto p-2"><button class="is-inline-block has-background-link-light" style="border-radius: 50%; width: 8px; height: 8px;"></button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Bulma Component #58

Bulma

Flaro

<section class="has-background-white py-36 is-clipped" style="background-image: url('flaro-assets/images/cta/bg.jpeg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
    <div class="container px-8">
        <p class="mb-9 has-text-white has-text-weight-semibold has-text-centered is-uppercase">👋  Meet new Flaro</p>
        <h2 class="mb-11 has-text-white has-text-weight-bold has-text-centered title is-size-1">Join the tribe &amp; build your startup successful</h2>
        <div class="is-flex is-justify-content-center">
            <a href="#" class="is-link button">Start 14 Days Free Trial</a>
        </div>
    </div>
</section>

Bulma Component #59

Bulma

Flaro

<section class="has-background-white py-24 is-relative is-clipped">
    <img class="is-absolute is-bottom-0" style="left: 50%; transform: translateX(-50%);" src="flaro-assets/images/http-codes/gradient2.svg" alt="">
    <div class="container px-8">
        <img class="mb-16 mx-auto is-block" src="flaro-assets/images/http-codes/illustration2.png" alt="">
        <h3 class="mb-4 title is-size-1 has-text-centered has-text-weight-bold">Something went wrong</h3>
        <p class="mb-11 has-text-grey has-text-centered has-text-weight-medium">Lorem ipsum dolor sit amet consectrtur. Volutpat tempor condimentum vitae vel pur pellentes.</p>
        <div class="is-flex is-justify-content-center">
            <a href="#" class="button is-link">
                <svg class="mr-2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.66667 12.6666L2 7.99998M2 7.99998L6.66667 3.33331M2 7.99998L14 7.99998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span>Go Back to Homepage</span>
            </a>
        </div>
    </div>
</section>

Bulma Component #60

Bulma

Flaro

<section class="has-background-white is-clipped">
    <div class="is-relative is-clipped has-background-black">
        <img class="is-absolute is-bottom-0" style="left: 50%; transform: translateX(-50%);" src="flaro-assets/images/applications/gradient2.svg" alt="">
        <img class="mx-auto" src="flaro-assets/images/applications/iphones.png" alt="">
    </div>
    <div class="has-background-white pt-28 pb-36">
        <div class="container px-8">
            <div class="columns">
                <div class="column is-4">
                    <h2 class="title is-size-1 has-text-weight-bold">Online Yoga, from Home</h2>
                </div>
                <div class="column is-4">
                    <p class="has-text-grey has-text-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestib ulum, commodo pulvinar.</p>
                </div>
                <div class="column is-4">
                    <div class="p-2">
                        <a href="#">
                            <img src="flaro-assets/images/applications/app-store-round.png" alt="">
                        </a>
                    </div>
                    <div class="p-2">
                        <a href="#">
                            <img src="flaro-assets/images/applications/play-store-round.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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

Framework

UI Library

Components

Bulma Component #41

Bulma Component #42

Bulma Component #43

Your next website starts here

Bulma Component #44

Bulma Component #45

Bulma Component #46

Bulma Component #47

Bulma Component #48

Bulma Component #49

Bulma Component #50

Bulma Component #51

Bulma Component #52

Bulma Component #53

Bulma Component #54

Bulma Component #55

Bulma Component #56

Bulma Component #57

Bulma Component #58

Bulma Component #59

Bulma Component #60

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support