Bulma Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Bulma Component #41

Bulma

Flaro

<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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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

Get the code for 13,400+ components

Bulma Component #42

Get the code for 13,400+ components

Bulma Component #43

Get the code for 13,400+ components

Bulma Component #44

Get the code for 13,400+ components

Bulma Component #45

Get the code for 13,400+ components

Bulma Component #46

Get the code for 13,400+ components

Bulma Component #47

Get the code for 13,400+ components

Bulma Component #48

Get the code for 13,400+ components

Bulma Component #49

Get the code for 13,400+ components

Bulma Component #50

Get the code for 13,400+ components

Bulma Component #51

Get the code for 13,400+ components

Bulma Component #52

Get the code for 13,400+ components

Bulma Component #53

Get the code for 13,400+ components

Bulma Component #54

Get the code for 13,400+ components

Bulma Component #55

Get the code for 13,400+ components

Bulma Component #56

Get the code for 13,400+ components

Bulma Component #57

Get the code for 13,400+ components

Bulma Component #58

Get the code for 13,400+ components

Bulma Component #59

Get the code for 13,400+ components

Bulma Component #60

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support