Tailwind CSS Portfolio Section

Portfolio section with three column grid

When you want to use cards in Portfolio section , This example lets you to display three horizontal cards on the screen.

Preview
Code

Figma File

                                                <section class="py-20 relative">
        <div class="w-full max-w-2xl lg:max-w-7xl px-6 lg:px-8 mx-auto">
            <h1 class="font-manrope font-medium text-4xl text-gray-900 mb-10 max-md:text-center">Professional Project
                Achievements</h1>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="flex items-center flex-col gap-8 w-full group">
                    <div class="block">
                        <img src="https://pagedone.io/asset/uploads/1707480017.png" alt="Project Achievements of Sketch">
                    </div>
                    <div class="flex items-center justify-between max-w-[406px] lg:max-w-full w-full lg:px-0">
                        <div class="block">
                            <h4 class="text-2xl font-manrope font-semibold text-gray-900 mb-1">Sketch</h4>
                            <p class="font-medium text-lg text-gray-400">Content Design,
                                Marketing</p>
                        </div>
                        <button
                            class=" border border-black py-2 px-3.5 rounded-full transition-all duration-300 group-hover:bg-black">
                            <svg class="stroke-black transition-all duration-300 group-hover:stroke-white"
                                xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16"
                                fill="none">
                                <path
                                    d="M9.62553 4L13.6664 8.0409M13.6664 8.0409L9.62553 12.0818M13.6664 8.0409L1.6665 8.0409"
                                    stroke="" stroke-width="1.6" stroke-linecap="round" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="group flex items-center flex-col gap-8 w-full">
                    <div class="block">
                        <img src="https://pagedone.io/asset/uploads/1707480034.png" alt="Project Achievements of Figma">
                    </div>
                    <div class="flex items-center justify-between max-w-[406px] lg:max-w-full w-full lg:px-0">
                        <div class="block">
                            <h4 class="text-2xl font-manrope font-semibold text-gray-900 mb-1">Figma</h4>
                            <p class="font-medium text-lg text-gray-400">User Interface Design
                            </p>
                        </div>
                        <button
                            class=" border border-black py-2 px-3.5 rounded-full transition-all duration-300 group-hover:bg-black">
                            <svg class="stroke-black transition-all duration-300 group-hover:stroke-white"
                                xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16"
                                fill="none">
                                <path
                                    d="M9.62553 4L13.6664 8.0409M13.6664 8.0409L9.62553 12.0818M13.6664 8.0409L1.6665 8.0409"
                                    stroke="" stroke-width="1.6" stroke-linecap="round" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div
                    class="group flex items-center flex-col gap-8 w-full md:w-1/2 mx-auto md:col-span-2 lg:col-span-1 lg:w-full">
                    <div class="block">
                        <img src="https://pagedone.io/asset/uploads/1707480044.png" alt="Project Achievements of Frame.io">
                    </div>
                    <div class="flex items-center justify-between max-w-[406px] lg:max-w-full w-full lg:px-0">
                        <div class="block">
                            <h4 class="text-2xl font-manrope font-semibold text-gray-900 mb-1">Frame.io</h4>
                            <p class="font-medium text-lg text-gray-400">User Interface Design
                            </p>
                        </div>
                        <button
                            class=" border border-black py-2 px-3.5 rounded-full transition-all duration-300 group-hover:bg-black">
                            <svg class="stroke-black transition-all duration-300 group-hover:stroke-white"
                                xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16"
                                fill="none">
                                <path
                                    d="M9.62553 4L13.6664 8.0409M13.6664 8.0409L9.62553 12.0818M13.6664 8.0409L1.6665 8.0409"
                                    stroke="" stroke-width="1.6" stroke-linecap="round" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </section>

HTML Copy

Portfolio section with Testimonial layout

When you want to use cards in testimonial layout where four horizontal cards can be displayed on the screen with next and previous buttons to move cards horizontally.

Preview
Code

Figma File

                                                <style>
        .swiper-slide.swiper-slide-active>.slide\:w-full {
            width: 100%;
        }

        .swiper-button-prev:after,
        .swiper-rtl .swiper-button-next:after {
            content: "" !important;
        }
        .swiper-wrapper {
            height: max-content !important;
            
        }

        .swiper-button-next:after,
        .swiper-rtl .swiper-button-prev:after {
            content: "" !important;
        }

        .swiper-button-next,
        .swiper-button-prev {
            position: relative !important;
        }
    </style>

<section class="py-12 relative">
        <div class="w-full max-w-7xl px-6 lg:px-8 mx-auto">
            <div class="flex items-center justify-between flex-col sm:flex-row gap-y-4 mb-5">
                <h2 class="font-manrope font-bold text-4xl text-gray-900">Creative Expressions</h2>
                <div class="flex justify-center items-center gap-6">
                    <button
                        class="swiper-button-prev rounded-full w-9 h-9 flex items-center justify-center p-2.5 bg-indigo-200 group transition-all duration-300 hover:bg-indigo-600">
                        <svg class="stroke-indigo-700 transition-all duration-300 group-hover:stroke-white"
                            xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path
                                d="M8.38449 15.1023L3.33337 10.0512M3.33337 10.0512L8.38449 5.00006M3.33337 10.0512H18.3333"
                                stroke="" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                    <button
                        class="swiper-button-next rounded-full w-9 h-9 flex items-center justify-center p-2.5 bg-indigo-200 group transition-all duration-300 hover:bg-indigo-600">
                        <svg class="stroke-indigo-700 transition-all duration-300 group-hover:stroke-white"
                            xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path
                                d="M11.6155 5.00006L16.6667 10.0512M16.6667 10.0512L11.6155 15.1023M16.6667 10.0512L1.66675 10.0512"
                                stroke="" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                </div>
            </div>
            <p class="font-normal text-base text-gray-500 max-w-4xl max-sm:text-center">Nisl molestie facilisis
                pellentesque diam nulla nam
                vitae
                sapien. Ac cras aenean auctor molestie aliquet. Cras non bibendum ultricies metus orci proin blandit a
                quis.</p>


        </div>
        <div class="swiper mySwiper mb-10 py-10">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[426px]">
                        <img src="https://pagedone.io/asset/uploads/1707712046.png" alt=""
                            class="w-full h-full object-fill mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712065.png" alt=""
                            class="w-full h-full object-fill mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712095.png" alt=""
                            class="w-full h-full object-fill mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712046.png" alt=""
                            class="w-full h-full object-fill mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712065.png" alt=""
                            class="w-full h-full object-fill mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712095.png" alt=""
                            class="w-full h-full object-fill mx-auto">
                    </div>
                </div>

            </div>
        </div>

        <button
            class="flex items-center justify-center py-3.5 px-7 rounded-full font-semibold text-base text-white bg-indigo-600 shadow-sm shadow-transparent transition-all duration-300 hover:shadow-indigo-200 hover:bg-indigo-700 w-max mx-auto">View
            More</button>
    </section>

<script>
        var swiper = new Swiper('.mySwiper', {
            pagination: '.swiper-pagination',
            slidesPerView: 2,
            centeredSlides: true,
            paginationClickable: true,
            loop: true,
            spaceBetween: 30,
            slideToClickedSlide: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>

HTML Copy

Grid layout with image and description and CTA

Whenever you wish to show more details this design can be used as Portfolio in grid to list projects in beautiful style

Preview
Code

Figma File

                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl px-6 lg:px-8 mx-auto">
            <div class="flex items-center justify-center flex-col gap-5 mb-14">
                <span class='bg-indigo-50 text-indigo-500 text-xs font-medium px-3.5 py-1 rounded-full'>Portfolio</span>
                <h2 class="font-manrope font-bold text-4xl text-gray-900 text-center">Structural Elegance</h2>
                <p class="text-lg font-normal text-gray-500 max-w-3xl mx-auto text-center"> In the world of architecture
                    or organization, structure provides the backbone for a purposeful and harmonious existence.</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 mb-14">
                <div class="sm:col-span-2 bg-cover bg-center max-md:h-80 rounded-lg flex justify-end flex-col px-7 py-6"
                    style="background-image: url(https://pagedone.io/asset/uploads/1707712993.png);">
                    <h6 class="font-medium text-xl leading-8 text-white mb-4">Architecture Designer</h6>
                    <p class="text-base font-normal text-white/70">where knowledge meets innovation, and success is
                        sculpted through a blend of skill and vision.</p>
                </div>
                <div class="block">
                    <img src="https://pagedone.io/asset/uploads/1707713007.png" alt="Building structure image" class="w-full">
                </div>
                <div class="block">
                    <img src="https://pagedone.io/asset/uploads/1707713018.png" alt="Building structure image" class="w-full">
                </div>
                <div class="block">
                    <img src="https://pagedone.io/asset/uploads/1707713032.png" alt="Building structure image" class="w-full">
                </div>
                <div class=" bg-cover rounded-lg max-sm:h-80 flex justify-start flex-col px-7 py-6"
                    style="background-image: url(https://pagedone.io/asset/uploads/1707713043.png);">
                    <h6 class="font-medium text-xl leading-8 text-white mb-4">Interior Designer</h6>
                    <p class="text-base font-normal text-white/70">Crafting exceptional interiors, where aesthetics meet
                        functionality for spaces that inspire and elevate.</p>
                </div>
                <div class="block">
                    <img src="	https://pagedone.io/asset/uploads/1707713055.png" alt="Building structure image" class="w-full">
                </div>
                <div class=" bg-cover rounded-lg max-sm:h-80 flex justify-end flex-col px-7 py-6"
                    style="background-image: url(https://pagedone.io/asset/uploads/1707713066.png);">
                    <h6 class="font-medium text-xl leading-8 text-white mb-4">Business Building</h6>
                    <p class="text-base font-normal text-white/70">Architecting business success through innovation, resilience, and strategic leadership.</p>
                </div>
            </div>
            <button
                class="w-full rounded-lg py-4 px-6 text-center bg-indigo-100 text-lg font-medium text-indigo-600 transition-all duration-300 hover:text-white hover:bg-indigo-600">Load
                More</button>
        </div>

    </section>

HTML Copy