Tailwind CSS Marquee - Versoly UI

Added in 1.0

Examples

<section class="py-20 bg-white" id="companies">
    <div class="container">
        <div class="row">
            <div class="col">
                <h2 class="h4 font-semibold text-center text-dark">Trusted by 3000+ great companies</h2>
                <div class="relative mt-10">
                    <div class="z-10 absolute left-0 w-[20%] md:w-[30%] h-full top-0 bg-gradient-to-r from-white to-transparent"></div>
                    <div class="z-10 absolute right-0 w-[20%] md:w-[30%] h-full top-0 bg-gradient-to-r from-transparent to-white"></div>
                    <div data-toggle="marquee" data-options="{'direction':'ltr','duration':15}">
                        <div class="flex flex-row gap-x-3 gap-y-2 px-10 flex-wrap justify-between">
                            <div>
                                <img class="h-12 w-24" alt="client logo 1" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/597b4f4f-c359-4e9f-9b46-42d363069dcd.png" width="200" height="100" />
                            </div>
                            <div>
                                <img class="h-12 w-24" alt="client logo 2" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/be9a2e74-d291-40ab-8dc3-d0467a80a913.png" width="200" height="100" />
                            </div>
                            <div>
                                <img class="h-12 w-24" alt="client logo 3" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/9c928742-6096-4545-9edb-ab5f1b95f5e2.png" width="200" height="100" />
                            </div>
                            <div>
                                <img class="h-12 w-24" alt="client logo 4" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/d1589331-9ad1-4a04-91fb-2ca6118817f0.png" width="200" height="100" />
                            </div>
                            <div>
                                <img class="h-12 w-24" alt="client logo 5" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/9b9da7c5-9abf-4424-879e-88bd04e26845.png" width="200" height="100" />
                            </div>
                            <div>
                                <img class="h-12 w-24" alt="client logo 6" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/9d5b21e9-9fd9-4ce7-9331-9738fad25b5c.png" width="200" height="100" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>