Blog Components in Filytreck library

Blog from FilyTreck

<section class="py-24 md:py-40" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-20 font-heading text-4xl md:text-5xl font-bold text-center">Recent happenings and updates</h2>
        <div class="flex flex-wrap -m-2.5 mb-20">
            <div class="w-full md:w-1/2 p-2.5">
                <div class="group relative h-full overflow-hidden rounded-3xl">
                    <div class="absolute z-10 top-10 left-12 px-2.5 py-1.5 flex items-center bg-white rounded-full">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-gray-500 font-medium">21 Jan 2024</span>
                    </div>
                    <div class="absolute bottom-0 left-0 pb-10 px-12 z-10 ">
                        <div class="flex flex-wrap -m-2">
                            <div class="flex-1 p-2">
                                <h3 class="font-heading text-3xl font-medium text-white leading-tight">2023 Remote Work: A Comprehensive Guide</h3>
                            </div>
                            <div class="w-auto p-2">
                                <a href="#" class="flex items-center justify-center w-16 h-16 bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <img class="w-full h-full object-cover transform group-hover:scale-105 transition duration-200" src="fily-assets/blog/people.jpg" alt="">
                </div>
            </div>
            <div class="w-full md:w-1/2 p-2.5">
                <div class="relative mb-5 py-10 px-12 border border-gray-100 rounded-3xl">
                    <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-sm font-medium text-gray-500">21 Jan 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Mastering the Art of Project Management Success</h3>
                            <p class="text-gray-500 font-medium leading-relaxed">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="relative py-10 px-12 border border-gray-100 rounded-3xl">
                    <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-sm font-medium text-gray-500">23 Jan 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Unlocking the Secrets to Project Management Excellence</h3>
                            <p class="text-gray-500 font-medium leading-relaxed">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': !showContent}" class="flex flex-wrap hidden -m-2.5">
            <div class="w-full md:w-1/2 lg:w-1/3 p-2.5">
                <div class="relative mb-5 py-10 px-12 h-full border border-gray-100 rounded-3xl">
                    <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-sm font-medium text-gray-500">03 Feb 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Streamlining Workflow: The Ultimate Software Solution for Businesses</h3>
                            <p class="text-gray-500 font-medium leading-relaxed">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-2.5">
                <div class="relative mb-5 py-10 px-12 h-full border border-gray-100 rounded-3xl">
                    <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-sm font-medium text-gray-500">04 Feb 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Optimal Work Management Software for Firms</h3>
                            <p class="text-gray-500 font-medium leading-relaxed">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-2.5">
                <div class="relative mb-5 py-10 px-12 h-full border border-gray-100 rounded-3xl">
                    <div class="mb-6 px-2.5 py-1.5 inline-flex items-center bg-white border border-gray-100 rounded-3xl">
                        <img class="mr-1.5" src="fily-assets/blog/clock.svg" alt="">
                        <span class="text-sm font-medium text-gray-500">12 Mar 2024</span>
                    </div>
                    <div class="flex flex-wrap -m-2.5">
                        <div class="w-full md:flex-1 p-2.5">
                            <h3 class="mb-5 font-heading text-3xl font-medium leading-tight">Management Software for Firms</h3>
                            <p class="text-gray-500 font-medium leading-relaxed">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p>
                        </div>
                        <div class="w-full md:w-auto p-2.5">
                            <a href="#" class="flex items-center justify-center w-16 h-16 bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M10.8558 2.85739C10.7428 2.97362 10.6532 3.11191 10.592 3.26428C10.5308 3.41665 10.4993 3.58007 10.4993 3.74514C10.4993 3.9102 10.5308 4.07363 10.592 4.22599C10.6532 4.37836 10.7428 4.51665 10.8558 4.63289L14.8214 8.74654L2.76786 8.74654C2.44818 8.74654 2.14159 8.87828 1.91554 9.11276C1.68949 9.34725 1.5625 9.66528 1.5625 9.9969C1.5625 10.3285 1.68949 10.6465 1.91554 10.881C2.14159 11.1155 2.44818 11.2472 2.76786 11.2472L14.8214 11.2472L10.8558 15.3609C10.7428 15.4771 10.6532 15.6154 10.592 15.7678C10.5308 15.9202 10.4993 16.0836 10.4993 16.2487C10.4993 16.4137 10.5308 16.5771 10.592 16.7295C10.6532 16.8819 10.7428 17.0202 10.8558 17.1364C11.0816 17.3693 11.3871 17.5 11.7056 17.5C12.024 17.5 12.3295 17.3693 12.5554 17.1364L17.7263 11.7599C18.1791 11.2931 18.4348 10.6591 18.4375 9.9969C18.4316 9.33908 18.1761 8.71016 17.7263 8.2464L12.5554 2.86989C12.3311 2.63534 12.0265 2.50237 11.7081 2.50003C11.3896 2.49769 11.0832 2.62616 10.8558 2.85739Z" fill="white"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center">
            <a href="#" x-on:click.prevent="showContent = true" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-black hover:bg-blue-900 focus:bg-blue-900 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">View all news</a>
        </div>
    </div>
</section>

Blog from FilyTreck

<section class="py-12 py-lg-24 py-xl-32"> <div class="container position-relative"> <h2 class="font-heading text-center mb-16">Recent happenings and updates</h2> <div class="mw-lg mx-auto mw-lg-none"> <div class="row"> <div class="col-lg-6 mb-6 mb-lg-0"><a class="d-block h-100 position-relative rounded-3 overflow-hidden" href="#"><img class="img-fluid d-block w-100 h-100 rounded-2" style="min-height: 400px; object-fit: cover;" src="fily-assets/blog/people.jpg" alt=""> <div class="position-absolute top-0 start-0 ms-10 ms-lg-12 mt-10 d-inline-flex align-items-center py-1 px-2 bg-white rounded-pill"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_119_749)"> <path d="M7 0C5.61553 0 4.26216 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.003033 5.6003 -0.13559 7.00777 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C13.998 5.1441 13.2599 3.36479 11.9475 2.05247C10.6352 0.74015 8.8559 0.0020073 7 0ZM7 12.8333C5.84628 12.8333 4.71846 12.4912 3.75918 11.8502C2.79989 11.2093 2.05222 10.2982 1.61071 9.23232C1.16919 8.16642 1.05368 6.99353 1.27876 5.86197C1.50384 4.73042 2.05941 3.69102 2.87521 2.87521C3.69102 2.0594 4.73042 1.50383 5.86198 1.27875C6.99353 1.05367 8.16642 1.16919 9.23232 1.6107C10.2982 2.05221 11.2093 2.79989 11.8502 3.75917C12.4912 4.71846 12.8333 5.84628 12.8333 7C12.8316 8.54658 12.2165 10.0293 11.1229 11.1229C10.0293 12.2165 8.54658 12.8316 7 12.8333Z" fill="#696D81"></path> <path d="M7.00042 3.5C6.84571 3.5 6.69733 3.56146 6.58794 3.67085C6.47854 3.78025 6.41708 3.92862 6.41708 4.08333V6.60625L4.45067 7.83825C4.31916 7.9204 4.22568 8.05143 4.19078 8.2025C4.15589 8.35358 4.18243 8.51233 4.26458 8.64383C4.34673 8.77534 4.47776 8.86882 4.62884 8.90372C4.77991 8.93861 4.93866 8.91207 5.07017 8.82992L7.31017 7.42992C7.3948 7.37689 7.4644 7.30302 7.5123 7.21539C7.56021 7.12775 7.58481 7.02928 7.58375 6.92942V4.08333C7.58375 3.92862 7.52229 3.78025 7.4129 3.67085C7.3035 3.56146 7.15513 3.5 7.00042 3.5Z" fill="#696D81"></path> </g> </svg><span class="ms-2 fs-9 fw-medium text-secondary">21 October 2023</span> </div> <div class="position-absolute bottom-0 start-0 w-100 pb-10 px-10 px-lg-12"> <div class="d-flex align-items-center justify-content-between"> <h4 class="text-white fw-normal me-4"><span class="d-block">2023 Remote Work:</span><span>A Comprehensive Guide</span></h4><span class="flex-shirink-0"> <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="64" height="64" rx="32" fill="#273ACF"></rect> <path d="M32.8558 24.8574C32.7428 24.9736 32.6532 25.1119 32.592 25.2643C32.5308 25.4166 32.4993 25.5801 32.4993 25.7451C32.4993 25.9102 32.5308 26.0736 32.592 26.226C32.6532 26.3784 32.7428 26.5166 32.8558 26.6329L36.8214 30.7465L24.7679 30.7465C24.4482 30.7465 24.1416 30.8783 23.9155 31.1128C23.6895 31.3473 23.5625 31.6653 23.5625 31.9969C23.5625 32.3285 23.6895 32.6465 23.9155 32.881C24.1416 33.1155 24.4482 33.2472 24.7679 33.2472L36.8214 33.2472L32.8558 37.3609C32.7428 37.4771 32.6532 37.6154 32.592 37.7678C32.5308 37.9202 32.4993 38.0836 32.4993 38.2487C32.4993 38.4137 32.5308 38.5771 32.592 38.7295C32.6532 38.8819 32.7428 39.0202 32.8558 39.1364C33.0816 39.3693 33.3871 39.5 33.7056 39.5C34.024 39.5 34.3295 39.3693 34.5554 39.1364L39.7263 33.7599C40.1791 33.2931 40.4348 32.6591 40.4375 31.9969C40.4316 31.3391 40.1761 30.7102 39.7263 30.2464L34.5554 24.8699C34.3311 24.6353 34.0265 24.5024 33.7081 24.5C33.3896 24.4977 33.0832 24.6262 32.8558 24.8574Z" fill="white"></path> </svg></span> </div> </div></a></div> <div class="col-lg-6"><a class="btn btn-outline-light-light d-block mb-6 ps-10 pe-8 py-10 text-start rounded-2" href="#"> <div class="d-inline-flex mb-6 align-items-center py-1 px-2 bg-white border border-light-light rounded-pill"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_119_749)"> <path d="M7 0C5.61553 0 4.26216 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.003033 5.6003 -0.13559 7.00777 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C13.998 5.1441 13.2599 3.36479 11.9475 2.05247C10.6352 0.74015 8.8559 0.0020073 7 0ZM7 12.8333C5.84628 12.8333 4.71846 12.4912 3.75918 11.8502C2.79989 11.2093 2.05222 10.2982 1.61071 9.23232C1.16919 8.16642 1.05368 6.99353 1.27876 5.86197C1.50384 4.73042 2.05941 3.69102 2.87521 2.87521C3.69102 2.0594 4.73042 1.50383 5.86198 1.27875C6.99353 1.05367 8.16642 1.16919 9.23232 1.6107C10.2982 2.05221 11.2093 2.79989 11.8502 3.75917C12.4912 4.71846 12.8333 5.84628 12.8333 7C12.8316 8.54658 12.2165 10.0293 11.1229 11.1229C10.0293 12.2165 8.54658 12.8316 7 12.8333Z" fill="#696D81"></path> <path d="M7.00042 3.5C6.84571 3.5 6.69733 3.56146 6.58794 3.67085C6.47854 3.78025 6.41708 3.92862 6.41708 4.08333V6.60625L4.45067 7.83825C4.31916 7.9204 4.22568 8.05143 4.19078 8.2025C4.15589 8.35358 4.18243 8.51233 4.26458 8.64383C4.34673 8.77534 4.47776 8.86882 4.62884 8.90372C4.77991 8.93861 4.93866 8.91207 5.07017 8.82992L7.31017 7.42992C7.3948 7.37689 7.4644 7.30302 7.5123 7.21539C7.56021 7.12775 7.58481 7.02928 7.58375 6.92942V4.08333C7.58375 3.92862 7.52229 3.78025 7.4129 3.67085C7.3035 3.56146 7.15513 3.5 7.00042 3.5Z" fill="#696D81"></path> </g> </svg><span class="ms-2 fs-9 fw-medium text-secondary">21 October 2023</span> </div> <div class="d-flex align-items-start"> <div class="pe-4"> <h4 class="font-heading mb-5 fw-medium">Mastering the Art of Project Management Success</h4> <p class="text-secondary fw-medium mb-0">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p> </div><span class="flex-shrink-0"> <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="64" height="64" rx="32" fill="#273ACF"></rect> <path d="M32.8558 24.8574C32.7428 24.9736 32.6532 25.1119 32.592 25.2643C32.5308 25.4166 32.4993 25.5801 32.4993 25.7451C32.4993 25.9102 32.5308 26.0736 32.592 26.226C32.6532 26.3784 32.7428 26.5166 32.8558 26.6329L36.8214 30.7465L24.7679 30.7465C24.4482 30.7465 24.1416 30.8783 23.9155 31.1128C23.6895 31.3473 23.5625 31.6653 23.5625 31.9969C23.5625 32.3285 23.6895 32.6465 23.9155 32.881C24.1416 33.1155 24.4482 33.2472 24.7679 33.2472L36.8214 33.2472L32.8558 37.3609C32.7428 37.4771 32.6532 37.6154 32.592 37.7678C32.5308 37.9202 32.4993 38.0836 32.4993 38.2487C32.4993 38.4137 32.5308 38.5771 32.592 38.7295C32.6532 38.8819 32.7428 39.0202 32.8558 39.1364C33.0816 39.3693 33.3871 39.5 33.7056 39.5C34.024 39.5 34.3295 39.3693 34.5554 39.1364L39.7263 33.7599C40.1791 33.2931 40.4348 32.6591 40.4375 31.9969C40.4316 31.3391 40.1761 30.7102 39.7263 30.2464L34.5554 24.8699C34.3311 24.6353 34.0265 24.5024 33.7081 24.5C33.3896 24.4977 33.0832 24.6262 32.8558 24.8574Z" fill="white"></path> </svg></span> </div></a><a class="btn btn-outline-light-light d-block ps-10 pe-8 py-10 text-start rounded-2" href="#"> <div class="d-inline-flex mb-6 align-items-center py-1 px-2 bg-white border border-light-light rounded-pill"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_119_749)"> <path d="M7 0C5.61553 0 4.26216 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.003033 5.6003 -0.13559 7.00777 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C13.998 5.1441 13.2599 3.36479 11.9475 2.05247C10.6352 0.74015 8.8559 0.0020073 7 0ZM7 12.8333C5.84628 12.8333 4.71846 12.4912 3.75918 11.8502C2.79989 11.2093 2.05222 10.2982 1.61071 9.23232C1.16919 8.16642 1.05368 6.99353 1.27876 5.86197C1.50384 4.73042 2.05941 3.69102 2.87521 2.87521C3.69102 2.0594 4.73042 1.50383 5.86198 1.27875C6.99353 1.05367 8.16642 1.16919 9.23232 1.6107C10.2982 2.05221 11.2093 2.79989 11.8502 3.75917C12.4912 4.71846 12.8333 5.84628 12.8333 7C12.8316 8.54658 12.2165 10.0293 11.1229 11.1229C10.0293 12.2165 8.54658 12.8316 7 12.8333Z" fill="#696D81"></path> <path d="M7.00042 3.5C6.84571 3.5 6.69733 3.56146 6.58794 3.67085C6.47854 3.78025 6.41708 3.92862 6.41708 4.08333V6.60625L4.45067 7.83825C4.31916 7.9204 4.22568 8.05143 4.19078 8.2025C4.15589 8.35358 4.18243 8.51233 4.26458 8.64383C4.34673 8.77534 4.47776 8.86882 4.62884 8.90372C4.77991 8.93861 4.93866 8.91207 5.07017 8.82992L7.31017 7.42992C7.3948 7.37689 7.4644 7.30302 7.5123 7.21539C7.56021 7.12775 7.58481 7.02928 7.58375 6.92942V4.08333C7.58375 3.92862 7.52229 3.78025 7.4129 3.67085C7.3035 3.56146 7.15513 3.5 7.00042 3.5Z" fill="#696D81"></path> </g> </svg><span class="ms-2 fs-9 fw-medium text-secondary">21 October 2023</span> </div> <div class="d-flex align-items-start"> <div class="pe-4"> <h4 class="font-heading mb-5 fw-medium">Optimal Work Management Software for Firms</h4> <p class="text-secondary fw-medium mb-0">If you handle a mix of project-related and other tasks, including client billing, and haven't discovered the perfect software yet, your search may need a new direction.</p> </div><span class="flex-shrink-0"> <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="64" height="64" rx="32" fill="#273ACF"></rect> <path d="M32.8558 24.8574C32.7428 24.9736 32.6532 25.1119 32.592 25.2643C32.5308 25.4166 32.4993 25.5801 32.4993 25.7451C32.4993 25.9102 32.5308 26.0736 32.592 26.226C32.6532 26.3784 32.7428 26.5166 32.8558 26.6329L36.8214 30.7465L24.7679 30.7465C24.4482 30.7465 24.1416 30.8783 23.9155 31.1128C23.6895 31.3473 23.5625 31.6653 23.5625 31.9969C23.5625 32.3285 23.6895 32.6465 23.9155 32.881C24.1416 33.1155 24.4482 33.2472 24.7679 33.2472L36.8214 33.2472L32.8558 37.3609C32.7428 37.4771 32.6532 37.6154 32.592 37.7678C32.5308 37.9202 32.4993 38.0836 32.4993 38.2487C32.4993 38.4137 32.5308 38.5771 32.592 38.7295C32.6532 38.8819 32.7428 39.0202 32.8558 39.1364C33.0816 39.3693 33.3871 39.5 33.7056 39.5C34.024 39.5 34.3295 39.3693 34.5554 39.1364L39.7263 33.7599C40.1791 33.2931 40.4348 32.6591 40.4375 31.9969C40.4316 31.3391 40.1761 30.7102 39.7263 30.2464L34.5554 24.8699C34.3311 24.6353 34.0265 24.5024 33.7081 24.5C33.3896 24.4977 33.0832 24.6262 32.8558 24.8574Z" fill="white"></path> </svg></span> </div></a></div> </div> </div> </div> </section>

Blog Components by Shuffle

Choose from 12 variations of Blog UI components. Presented here are variants available in Filytreck library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Blog UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Blog Components in Filytreck library

Framework

UI Library

Components

Blog from FilyTreck

Recent Happenings Blog Post Card Grid with Featured Image

Your next website starts here

Blog from FilyTreck

Blog Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Get Shuffle for life at today's price

New in every Lifetime License

A more capable AI Agent

Shopify theme export

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

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

Blog Components in Filytreck library

Framework

UI Library

Components

Blog from FilyTreck

Recent Happenings Blog Post Card Grid with Featured Image

Your next website starts here

Blog from FilyTreck

Blog Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company