Tailwind Portfolio Components (115)

Portfolio from Zeus

Five-Image Stock Photo Collage with Office Workers

A collage of five rounded stock photographs showing people in office and workplace settings, arranged as two wide images on top and three narrower images below. No text, navigation, or interactive controls are visible, so the component reads as a decorative image gallery or section illustration.

<section class="py-10 lg:py-20">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-3">
      <div class="w-full lg:w-1/2 p-3">
        <img class="w-full h-72 rounded-lg object-cover" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/2 p-3">
        <img class="w-full h-72 rounded-lg object-cover" src="https://images.unsplash.com/photo-1544717301-9cdcb1f5940f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-3">
        <img class="w-full h-72 rounded-lg object-cover" src="https://images.unsplash.com/photo-1544717297-fa95b6ee9643?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-3">
        <img class="w-full h-72 rounded-lg object-cover" src="https://images.unsplash.com/photo-1544717305-f9c88f2897bc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-3">
        <img class="w-full h-72 rounded-lg object-cover object-top" src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
      </div>
    </div>
  </div>
</section>

Portfolio from Zospace

Tailwind CSS

Zospace

Dark Carousel Section with Heading, Slide Image, Caption Card, and Blue Arrow Controls

A dark-themed carousel showcase under an 'Our Works' eyebrow and large heading, with a centered gradient 3D image slide flanked by partial adjacent slides, a rounded caption card containing a title and subtitle, and circular blue previous/next navigation buttons.

<section class="relative bg-gray-800 py-20 2xl:py-40 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" x-init="slideWidth = $refs.slide1.offsetWidth, activeSlide = 1">
  <div class="relative max-w-4xl px-4 lg:px-0 mx-auto py-10">
    <div class="max-w-xl mb-14 lg:mb-28">
      <span class="text-lg text-blue-400 font-semibold">Our Works</span>
      <h2 class="mt-8 text-5xl text-white font-bold font-heading">More than 20 years in the game</h2>
    </div>
    <div class="relative">
      <div class="relative max-w-4xl mx-auto">
        <div>
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-12">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-12">
                    <img class="w-full h-96 mb-12 object-cover" src="https://images.unsplash.com/photo-1617791160505-6f00504e3519?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1100&amp;q=80" alt="">
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-12">
                    <img class="w-full h-96 mb-12 object-cover" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-12">
                    <img class="w-full h-96 mb-12 object-cover" src="https://images.unsplash.com/photo-1618005198920-f0cb6201c115?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -mx-5">
          <div class="w-full lg:w-4/5 px-5 mb-6 lg:mb-0">
            <div class="relative py-12 px-10 lg:px-20 bg-gray-600 rounded-xl">
              <div class="absolute top-0 -mt-6 left-0 ml-16 w-14 h-14 bg-gray-600" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
              <div :class="{'hidden': activeSlide != 0}">
                  <h3 class="mb-6 text-4xl text-white font-bold font-heading">Experience design for your products</h3>
                  <p class="text-lg text-gray-300">The brown fox jumps over the lazy dog.</p>
              </div>
              <div :class="{'hidden': activeSlide != 1}" class="hidden">
                  <h3 class="mb-6 text-4xl text-white font-bold font-heading">Crafting Memorable User Journeys</h3>
                  <p class="text-lg text-gray-300">As the clock ticks, the pendulum swings.</p>
              </div>
              <div :class="{'hidden': activeSlide != 2}" class="hidden">
                  <h3 class="mb-6 text-4xl text-white font-bold font-heading">Navigating the Path of User Engagement</h3>
                  <p class="text-lg text-gray-300">Through the mist, a beacon shines bright.</p>
              </div>
            </div>
          </div>
          <div class="w-auto mx-auto lg:w-1/5 px-5">
            <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="relative z-10 inline-flex mr-2 items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
              <svg class="w-4 h-4" width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.84708 12.1077C7.05097 12.3133 7.05097 12.6436 6.84708 12.8476C6.64319 13.0517 6.31377 13.0525 6.10988 12.8476L0.152917 6.8708C-0.0509739 6.66673 -0.0509738 6.33645 0.152917 6.13087L6.10988 0.154027C6.31377 -0.0500387 6.64319 -0.0500386 6.84708 0.154027C7.05098 0.358848 7.05098 0.689887 6.84708 0.893952L1.4143 6.50121L6.84708 12.1077Z" fill="white"></path>
              </svg>
            </button>
            <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="relative z-10 inline-flex items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
              <svg class="w-4 h-4" width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.152917 0.894235C-0.0509742 0.688658 -0.0509742 0.358375 0.152917 0.15431C0.356808 -0.0497557 0.686228 -0.0505119 0.89012 0.15431L6.84708 6.13116C7.05097 6.33522 7.05097 6.6655 6.84708 6.87108L0.890119 12.8479C0.686227 13.052 0.356807 13.052 0.152916 12.8479C-0.0509753 12.6431 -0.0509753 12.3121 0.152916 12.108L5.5857 6.50074L0.152917 0.894235Z" fill="white"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Portfolio from Wrexa

Tailwind CSS

Wrexa

Staggered Five-Image Gallery Hero with Scroll-Down Indicator

A dark full-width section presenting five lifestyle photographs in a staggered row, with alternating vertical offsets and no visible text or heading. A dashed circular down-arrow below the images suggests a scroll prompt on a white lower background.

<section class="pb-24">
  <div class="pt-24 sm:pt-40 pb-10 mb-40 bg-gray-900">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-end justify-center">
        <div class="w-1/3 xl:w-1/5">
          <img class="block w-full h-64 xl:h-80 object-cover" src="wrexa-assets/images/placeholder-gallery1.png" alt="">
        </div>
        <div class="w-1/3 xl:w-1/5 xl:-mb-24">
          <img class="block w-full h-64 xl:h-80 object-cover" src="wrexa-assets/images/placeholder-gallery2.png" alt="">
        </div>
        <div class="w-1/3 xl:w-1/5">
          <img class="block w-full h-64 xl:h-80 object-cover" src="wrexa-assets/images/placeholder-gallery3.png" alt="">
        </div>
        <div class="w-1/3 xl:w-1/5 -mb-24">
          <img class="block w-full h-64 xl:h-80 object-cover" src="wrexa-assets/images/placeholder-gallery4.png" alt="">
        </div>
        <div class="w-1/3 xl:w-1/5 -mb-24 xl:-mb-0">
          <img class="block w-full h-64 xl:h-80 object-cover" src="wrexa-assets/images/placeholder-gallery5.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="container px-4 mx-auto text-center">
    <a class="relative inline-flex items-center justify-center w-32 h-32 text-gray-800 hover:text-gray-700" href="#">
      <img class="absolute top-0 left-0 h-full w-full object-contain" src="wrexa-assets/elements/circle-border-light.svg" alt="">
      <svg width="12" height="32" viewBox="0 0 12 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.3109 -2.9239e-07L5.3109 29.4165L0.974389 25.1693L-1.88224e-07 26.1236L6 32L12 26.1236L11.0256 25.1693L6.6891 29.4165L6.6891 -2.32147e-07L5.3109 -2.9239e-07Z" fill="currentColor"></path>
      </svg>
    </a>
  </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

Portfolio from Uinel

Tailwind CSS

Uinel

SchoolTrip App Portfolio Hero with Photo and Finance Card

A portfolio-style hero section introducing the SchoolTrip app with a large headline, short intro text, a green text link, and a photo of a smiling child beside an overlapping app card showing balance and action buttons. The layout is a split composition with text on the left and imagery on the right.

<div>
  <section class="p-4 md:p-8 font-medium bg-blueGray-100">
    <div class="relative pt-24 pb-8 lg:pb-24 2xl:pt-52 2xl:pb-60 bg-white rounded-t-10xl z-10">
      <div class="container px-4 mx-auto">
        <div class="grid lg:grid-cols-2 items-center gap-20">
          <div>
            <img class="mb-20" src="uinel-assets/elements/portfolio/portfolio1-write-icon.svg" alt="">
            <span class="block mb-9 font-heading text-sm uppercase tracking-widest text-gray-300">Portfolio</span>
            <div class="relative flex items-center max-w-max mb-14 xl:mb-16">
              <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">SchoolTrip</h2>
              <div class="absolute bottom-20 right-16 md:-right-24 md:bottom-2 xl:bottom-12">
                <h3 class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 font-heading text-6xl z-10">APP</h3>
                <img src="uinel-assets/elements/portfolio/elipse1.svg" alt="">
                <img class="absolute top-0 left-0" src="uinel-assets/elements/portfolio/elipse2.svg" alt="">
              </div>
            </div>
            <h3 class="mb-10 text-5xl xl:text-8xl leading-tighter lg:max-w-lg">A spatial system is a set of rules for how you measure and size your UI elements.</h3>
            <p class="mb-14 xl:mb-16 font-normal text-lg leading-6 text-gray-700">The nulla commodo, commodo eros a, tristique lectus.</p>
            <a class="inline-flex items-center pb-1 text-green-600 hover:text-green-700 border-b border-green-600 hover:border-green-700" href="#">
              <span class="font-bold tracking-tight text-xl">Discover weekly</span>
              <svg class="ml-4" width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8 1L15 7H1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11 12L15 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <img src="uinel-assets/images/portfolio/widget.png" alt="">
        </div>
      </div>
    </div>
  </section>
  <div class="-mt-16 h-24 bg-yellow-500"></div>
</div>

Portfolio from Atis

Tailwind CSS

Atis

Latest Projects Image Grid with Category Filter Tabs

A portfolio section with an eyebrow label, centered heading, a four-tab category filter, an 4x2 grid of landscape photo cards with hover-revealed View Project buttons, and a green View More Projects call-to-action. The light background and consistent card spacing give it a clean gallery layout.

<section x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-8 md:mb-16 max-w-lg mx-auto text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="mb-6 text-4xl lg:text-5xl font-bold font-heading">Latest Projects</h2>
        <div class="inline-flex flex-wrap py-1 sm:px-1 sm:space-x-1 bg-white rounded text-sm">
          <button x-ref="tab1" class="w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 bg-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none transition duration-200" :class="{'bg-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab1.textContent == tab, 'text-gray-500 font-bold': $refs.tab1.textContent != tab}" x-on:click="tab = $refs.tab1.textContent">Category 1</button>
          <button x-ref="tab2" class="w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 text-gray-500 font-bold transition duration-200" :class="{'bg-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab2.textContent == tab, 'text-gray-500 font-bold': $refs.tab2.textContent != tab}" x-on:click="tab = $refs.tab2.textContent">Category 2</button>
          <button x-ref="tab3" class="w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 text-gray-500 font-bold transition duration-200" :class="{'bg-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab3.textContent == tab, 'text-gray-500 font-bold': $refs.tab3.textContent != tab}" x-on:click="tab = $refs.tab3.textContent">Category 3</button>
          <button x-ref="tab4" class="w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 text-gray-500 font-bold transition duration-200" :class="{'bg-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab4.textContent == tab, 'text-gray-500 font-bold': $refs.tab4.textContent != tab }" x-on:click="tab = $refs.tab4.textContent">Category 4</button>
        </div>
      </div>
      <div class="flex flex-wrap mb-8 -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4">
          <a href="#">
            <img class="mx-auto h-64 w-full rounded object-cover" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4">
          <a href="#">
            <img class="mx-auto h-64 w-full rounded object-cover" src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80" alt="">
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4">
          <div class="relative mx-auto h-64 w-full rounded-lg">
            <img class="relative h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <div class="absolute inset-0 bg-gray-900 opacity-50 rounded-lg"></div>
            <div class="absolute inset-0 flex items-center justify-center"><a class="inline-block py-2 px-4 border-2 border-gray-400 hover:border-white bg-transparent text-gray-50 hover:bg-white hover:text-gray-900 transition duration-200 rounded-l-xl rounded-t-xl font-bold leading-loose" href="#">View Project</a></div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4">
          <a href="#">
            <img class="mx-auto h-64 w-full rounded object-cover" src="https://images.unsplash.com/photo-1518098268026-4e89f1a2cd8e?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=968&amp;q=80" alt="">
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4">
          <a href="#">
            <img class="mx-auto h-64 w-full rounded object-cover" src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4">
          <a href="#">
            <img class="mx-auto h-64 w-full rounded object-cover" src="https://images.unsplash.com/photo-1459213599465-03ab6a4d5931?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80" alt="">
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4">
          <a href="#">
            <img class="mx-auto h-64 w-full rounded object-cover" src="https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1127&amp;q=80" alt="">
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4">
          <a href="#">
            <img class="mx-auto h-64 w-full rounded object-cover" src="https://images.unsplash.com/photo-1413752362258-7af2a667b590?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80" alt="">
          </a>
        </div>
      </div>
      <div class="text-center"><a class="inline-block py-2 px-6 leading-loose rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold" href="#">View More Projects</a></div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

Portfolio from Pstls.

Tailwind CSS

Pstls.

Portfolio Category Filter with Image Card Grid

A two-column masonry-style grid of image cards with serif titles and small uppercase category labels, paired with a left vertical filter menu listing categories with count badges. The layout uses a sidebar beside a main content area with a serif heading typography and light pastel background blocks.

<section class="py-24 relative" x-data="{ category: '' }" x-init="category = $refs.category1.textContent">
  <div class="container px-4 mx-auto relative z-10">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-20 md:mb-0">
        <ul>
          <li class="flex items-center mb-6 xl:mb-10">
            <a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="text-2xl md:text-3xl text-indigo-200 font-heading" :class="{ 'text-indigo-200': category == $refs.category1.textContent, 'text-black hover:text-gray-800': category != $refs.category1.textContent }" href="#" >All</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-200 text-white rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category1.textContent, 'bg-indigo-100': category != $refs.category1.textContent }" >41</span>
          </li>
          <li class="flex items-center mb-6 xl:mb-10">
            <a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category2.textContent, 'text-black hover:text-gray-800': category != $refs.category2.textContent }" href="#" >Art Direction</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category2.textContent, 'bg-indigo-100': category != $refs.category2.textContent }" >6</span>
          </li>
          <li class="flex items-center mb-6 xl:mb-10">
            <a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category3.textContent, 'text-black hover:text-gray-800': category!= $refs.category3.textContent }" href="#" >Branding</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category3.textContent, 'bg-indigo-100': category != $refs.category3.textContent }" >4</span>
          </li>
          <li class="flex items-center mb-6 xl:mb-10">
            <a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category4.textContent, 'text-black hover:text-gray-800': category!= $refs.category4.textContent }" href="#" >Video</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category4.textContent, 'bg-indigo-100': category != $refs.category4.textContent }" >12</span>
          </li>
          <li class="flex items-center mb-6 xl:mb-10">
            <a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category5.textContent, 'text-black hover:text-gray-800': category != $refs.category5.textContent }" href="#" >Event</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category5.textContent, 'bg-indigo-100': category != $refs.category5.textContent }" >3</span>
          </li>
          <li class="flex items-center">
            <a x-ref="category6" x-on:click.prevent="category = $refs.category6.textContent" class="text-2xl md:text-3xl text-black hover:text-gray-800 font-heading" :class="{ 'text-indigo-200': category == $refs.category6.textContent, 'text-black hover:text-gray-800': category != $refs.category6.textContent }" href="#" >Development</a><span class="flex ml-4 items-center justify-center w-6 h-6 text-xs font-bold bg-indigo-100 rounded-full" :class="{ 'bg-indigo-200 text-white': category == $refs.category6.textContent, 'bg-indigo-100': category != $refs.category6.textContent }" >16</span>
          </li>
        </ul>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/3 px-4">
        <div class="flex flex-wrap justify-center -mx-4">
          <div class="w-full md:w-1/2 px-4 mb-16 md:mt-16">
            <div class="max-w-xs mx-auto mb-16">
              <img class="block w-full mb-6" src="pstls-assets/images/portfolio/portfolio-1-room.jpg" alt="" >
              <h5 class="text-lg font-heading mb-2" >Lorem Ipsum Random Name</h5>
              <p class="text-xs text-gray-500 uppercase"  >Art direction</p>
            </div>
            <div class="max-w-xs mx-auto">
              <img class="block w-full mb-6" src="pstls-assets/images/portfolio/portfolio-1-forest.jpg" alt="" >
              <h5 class="text-lg font-heading mb-2" >Lorem Ipsum Random Name</h5>
              <p class="text-xs text-gray-500 uppercase" style="font-size: 12px;"  >Art direction</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4">
            <div class="max-w-xs mx-auto mb-16">
              <img class="block w-full mb-6" src="pstls-assets/images/portfolio/portfolio-1-design.jpg" alt="" >
              <h5 class="text-lg font-heading mb-2" >Lorem Ipsum Random Name</h5>
              <p class="text-xs text-gray-500 uppercase"  >Art direction</p>
            </div>
            <div class="max-w-xs mx-auto">
              <img class="block w-full mb-6" src="pstls-assets/images/portfolio/portfolio-1-design2.jpg" alt="" >
              <h5 class="text-lg font-heading mb-2" >Lorem Ipsum Random Name</h5>
              <p class="text-xs text-gray-500 uppercase"  >Art direction</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="absolute top-0 left-0 bg-lime-100 p-10 md:p-20 xl:p-40"></div>
  <div class="absolute bottom-0 left-0 bg-indigo-100 p-10 md:p-20 xl:p-40"></div>
  <div class="absolute top-0 right-0 bg-red-100 p-10 md:p-20 xl:p-40"></div>
</section>

Portfolio from BoldUI

Tailwind CSS

BoldUI

Dark Feature Section with Tilted App Screenshot Ovals

A dark marketing section with a centered uppercase heading and paragraph above a ring of six tilted oval-cropped app screenshots, each labeled with a short caption. The layout uses a radial arrangement with faint connecting arc lines to present product features.

<section class="py-32 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-md mx-auto text-center">
      <h2 class="mt-6 mb-6 text-2xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
      <p class="mb-10 text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="relative">
      <img class="hidden lg:block absolute top-1/2 left-0 w-full transform -translate-y-1/2 h-128" src="boldui-assets/elements/ellipse-big.svg" alt="">
      <div class="relative z-10 flex flex-wrap justify-center -mx-4">
        <img class="lg:hidden absolute w-full h-full" src="boldui-assets/elements/ellipse-big.svg" alt="">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="relative flex items-center justify-center h-72 lg:h-112 w-80 lg:w-128 transform rotate-45 clip-path-2" style="background-image: url('boldui-assets/images/portfolio-4a.png');">
            <span class="transform -rotate-45 text-lg text-white">Dolor sit</span>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 text-center">
          <div class="relative flex items-center justify-center h-72 lg:h-112 w-80 lg:w-128 transform rotate-45 clip-path-2" style="background-image: url('boldui-assets/images/portfolio10.png');">
            <span class="transform -rotate-45 text-lg text-white">Spectacular team plan</span>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="relative flex items-center justify-center h-72 lg:h-112 w-80 lg:w-128 transform rotate-45 clip-path-2" style="background-image: url('boldui-assets/images/portfolio-4a.png');">
            <span class="transform -rotate-45 text-lg text-white">Amet consectutar</span>
          </div>
        </div>
      </div>
      <div class="relative flex flex-wrap justify-center -mx-4 lg:-mt-20">
        <img class="lg:hidden absolute w-full h-full" src="boldui-assets/elements/ellipse-big.svg" alt="">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="relative flex items-center justify-center h-72 lg:h-112 w-80 lg:w-128 transform rotate-45 clip-path-2" style="background-image: url('boldui-assets/images/portfolio10.png');">
            <span class="transform -rotate-45 text-lg text-white">Dolor sit</span>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="relative flex items-center justify-center h-72 lg:h-112 w-80 lg:w-128 transform rotate-45 clip-path-2" style="background-image: url('boldui-assets/images/portfolio-4a.png');">
            <span class="transform -rotate-45 text-lg text-white">Dolor sit</span>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="relative flex items-center justify-center h-72 lg:h-112 w-80 lg:w-128 transform rotate-45 clip-path-2" style="background-image: url('boldui-assets/images/portfolio10.png');">
            <span class="transform -rotate-45 text-lg text-white">Lorem ipsum</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Portfolio from Acros

Tailwind CSS

Acros

Project Showcase Card Grid with Images and Tags

A grid of four project cards arranged in a two-by-two layout, each combining a photo with a hashtag label, serif heading, short description, and teal circular arrow call-to-action linking to a project. The light background and spacious tiles give it a minimal portfolio presentation.

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-8">
      <div class="w-full md:w-1/3 px-4 order-last md:order-first">
        <img class="block lg:w-full h-88 object-cover rounded" src="acros-assets/images/portfolio/diagram-md.jpg" alt="">
      </div>
      <div class="w-full md:w-2/3 px-4 mb-8 lg:mb-0">
        <div class="relative h-88 px-6 sm:pl-10 py-16">
          <img class="absolute top-0 left-0 w-full h-full object-cover rounded" src="acros-assets/images/portfolio/diagram-2-wide.jpg" alt="">
          <div class="relative max-w-xs">
            <div class="mb-2"><a class="inline-block font-heading hover:text-gray-800 mr-4" href="#">#people</a><a class="inline-block font-heading hover:text-gray-800" href="#">#family</a></div>
            <h3 class="font-heading text-3xl mb-4">Sheridan</h3>
            <p class="leading-7 mb-6">The best way to archive better skills is by challenging yourself with exciting projects.</p>
            <a class="group inline-flex items-center font-heading font-medium" href="#">
              <span class="mr-4">Check project</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 group-hover:bg-green-600">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-2/3 px-4 mb-8 lg:mb-0">
        <div class="relative h-88 px-6 sm:pl-10 py-16">
          <img class="absolute top-0 left-0 w-full h-full object-cover rounded" src="acros-assets/images/portfolio/robot-wide.jpg" alt="">
          <div class="relative max-w-xs">
            <div class="mb-2"><a class="inline-block font-heading hover:text-gray-800 mr-4" href="#">#people</a><a class="inline-block font-heading hover:text-gray-800" href="#">#family</a></div>
            <h3 class="font-heading text-3xl mb-4">Neonic</h3>
            <p class="leading-7 mb-6">The best way to archive better skills is by challenging yourself with exciting projects.</p>
            <a class="group inline-flex items-center font-heading font-medium" href="#">
              <span class="mr-4">Check project</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 group-hover:bg-green-600">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 px-4">
        <img class="block lg:w-full h-88 object-cover rounded" src="acros-assets/images/portfolio/vr-md.jpg" alt="">
      </div>
    </div>
  </div>
</section>

Portfolio from Bendis

Tailwind CSS

Bendis

Five-Image Abstract Painting Gallery Grid

A grid of five abstract paint images on a solid blue background, with two wide images on top and three narrower images below. The component displays artwork only, with no visible text, navigation, or interactive controls.

<section class="py-24 bg-blue-800">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-px">
      <div class="w-full lg:w-1/2 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/2 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1553949345-eb786bb3f7ba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1552844657-1d8b11fad02e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1003&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1593776805861-74972b600999?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1551043077-b55224769403?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
    </div>
  </div>
</section>

Portfolio from Metis

Tailwind CSS

Metis

Image Gallery Section with Heading and Bento Grid

A light-background section with a small pill badge, a bold two-line heading, and muted supporting text above a mixed-size grid of architectural photographs. The grid combines small square tiles with larger spanning tiles, presenting building images as illustrative content rather than interactive controls.

<section class="py-12 md:py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto mb-12 text-center">
      <span class="inline-block py-1 px-3 text-xs font-semibold bg-blue-100 text-blue-600 rounded-xl">Lorem ipsum</span>
      <h2 class="text-3xl md:text-4xl mt-2 mb-4 font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="flex flex-wrap -mx-3 mb-6 lg:mb-0">
      <div class="w-full lg:w-1/2 flex flex-wrap px-3 mb-6 lg:md-0">
        <div class="w-1/2 h-64 pr-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pr-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-3">
        <img class="h-128 w-full object-cover rounded" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=698&amp;q=80" alt="">
      </div>
    </div>
    <div class="flex flex-wrap -mx-3 mb-6">
      <div class="w-full lg:w-1/2 px-3 order-last lg:order-first mt-6 lg:mt-0">
        <img class="h-128 w-full object-cover rounded" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=698&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/2 flex flex-wrap px-3">
        <div class="w-1/2 h-64 pr-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pb-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pr-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="w-1/2 h-64 pl-3 pt-3">
          <img class="h-full object-cover rounded" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Portfolio from Shuffle UX

Tailwind CSS

Shuffle UX

Image Placeholder Gallery Grid

A gallery layout of five gray rectangular image placeholders arranged in two rows, with two wide tiles on top and three narrower tiles below. Each placeholder shows a centered white image icon, indicating images are not yet loaded.

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <img class="w-full h-80 object-cover rounded-lg" src="mockup-assets/images/gray-500-horizontal.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <img class="w-full h-80 object-cover rounded-lg" src="mockup-assets/images/gray-500-horizontal.png" alt="">
      </div>
      <div class="w-full md:w-1/3 p-4">
        <img class="w-full h-80 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
      </div>
      <div class="w-full md:w-1/3 p-4">
        <img class="w-full h-80 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
      </div>
      <div class="w-full md:w-1/3 p-4">
        <img class="w-full h-80 object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
      </div>
    </div>
  </div>
</section>

Portfolio from Cronos

Tailwind CSS

Cronos

Five-Photo Collage Grid with Yellow and Green Accent Blocks

A grid of five photographs showing office workspaces, a person using a smartphone, hands typing on a laptop, a person working by a window, and a group of people standing against a wall. Yellow and dark green square accents overlap the image corners, and the layout is a loose two-row arrangement with no visible text or interactive controls.

<section class="py-32">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <div class="relative">
                    <img class="absolute hidden lg:block top-0 left-0 -ml-20 -mt-20" src="cronos-assets/elements/light-warning-dark-warning.svg" alt="">
                    <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt="">
                </div>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="relative">
                    <img class="absolute hidden lg:block top-0 right-0 -mr-20 z-10" src="cronos-assets/elements/warning-light-small.svg" alt="">
                    <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1467007849282-42dad96c2312?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=755&amp;q=80" alt="">
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative">
                    <img class="absolute hidden lg:block bottom-0 left-0 -ml-20 z-10" src="cronos-assets/elements/green-light-left.svg" alt="">
                    <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1488751045188-3c55bbf9a3fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative">
                    <img class="absolute hidden lg:block right-0 bottom-0 -mr-20 z-10" src="cronos-assets/elements/light-green-small.svg" alt="">
                    <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1598826859769-e62543ab62b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

Portfolio from NEUB

Tailwind CSS

NEUB

Five-Image Photo Collage with Pink and Yellow Offset Frames

A grid of five stock-style photographs of home offices and a woman using a phone and card, each framed with bold black borders and offset pink or yellow shadow blocks. It functions as a decorative image gallery or feature showcase with no visible text, navigation, or controls.

<section class="py-20">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/2 p-4">
                <div class="relative">
                    <div class="absolute inset-0 bg-pink-500 translate-x-4 translate-y-4 border-4 border-black"></div>
                    <img class="relative w-full h-80 object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1713947506242-8fcae733d158?q=80&amp;w=1332&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-2 -right-2 w-16 h-16 bg-yellow-300 border-4 border-black"></div>
                </div>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="relative">
                    <div class="absolute inset-0 bg-yellow-300 translate-x-4 translate-y-4 border-4 border-black"></div>
                    <img class="relative w-full h-80 object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1691580438246-a6e5cb35ca05?q=80&amp;w=764&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-2 -right-2 w-16 h-16 bg-pink-500 border-4 border-black"></div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative">
                    <div class="absolute inset-0 bg-pink-500 translate-x-3 translate-y-3 border-4 border-black"></div>
                    <img class="relative w-full h-80 object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1690228254548-31ef53e40cd1?q=80&amp;w=871&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-1 -right-1 w-12 h-12 bg-yellow-300 border-4 border-black"></div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative">
                    <div class="absolute inset-0 bg-yellow-300 translate-x-3 translate-y-3 border-4 border-black"></div>
                    <img class="relative w-full h-80 object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1713947506242-8fcae733d158?q=80&amp;w=1332&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-1 -right-1 w-12 h-12 bg-pink-500 border-4 border-black"></div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative">
                    <div class="absolute inset-0 bg-pink-500 translate-x-3 translate-y-3 border-4 border-black"></div>
                    <img class="relative w-full h-80 object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1690228254548-31ef53e40cd1?q=80&amp;w=871&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-1 -right-1 w-12 h-12 bg-yellow-300 border-4 border-black"></div>
                </div>
            </div>
        </div>
    </div>
</section>

Portfolio from Casper

Tailwind CSS

Casper

Dark Project Showcase Grid with 3D Character Thumbnails

A dark-themed portfolio section headed by '300+ Projects Launched' with a 'See more projects' button and a two-column staggered grid of project cards. Each card shows a 3D illustrated scene, a domain label, a client logo, and placeholder descriptive text.

<section x-data="{ showContent: false }" class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="hidden md:block absolute top-0 right-0 lg:-mt-20 mr-20 lg:mr-40 animate-spinStar z-10" src="casper-assets/services/blink-star.png" alt="">
    <div class="relative max-w-lg lg:max-w-8xl mx-auto">
      <div class="absolute top-0 left-0 -mt-96 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
      <div class="absolute bottom-0 right-0 w-186 h-186 bg-gradient-to-t from-violet-700 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
      <div class="relative flex flex-wrap items-end -mx-4 mb-12">
        <div class="w-full lg:w-3/5 xl:w-auto px-4 mb-8 lg:mb-0">
          <div class="max-w-2xl">
            <span class="block font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-transparent bg-clip-text bg-gradient-to-br from-violet-500 via-blueGray-800 to-sky-900 tracking-tight">300+</span>
            <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-6">Projects Launched</h2>
            <p class="max-w-xl text-xl text-gray-500 leading-relaxed tracking-tight">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
          </div>
        </div>
        <div class="w-full lg:w-2/5 xl:w-auto ml-auto px-4 lg:text-right">
          <a x-show="!showContent" x-on:click.prevent="showContent = true" class="group inline-flex w-full md:w-auto h-14 px-7 items-center justify-center text-base font-medium text-black hover:text-violet-800 bg-violet-500 hover:bg-white transition duration-200 rounded-full" href="#">
            <span class="mr-2">SEE MORE PROJECTS</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="relative flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
          <a class="group block mb-6 rounded-3xl overflow-hidden" href="#">
            <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post1.png" alt="">
            <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
              <div class="sm:flex mb-6 items-center justify-between">
                <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">jiggle.co</span>
                <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon.svg" alt="">
              </div>
              <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
          </a>
          <a class="group block mb-6 rounded-3xl overflow-hidden" href="#">
            <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post3.png" alt="">
            <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
              <div class="sm:flex mb-6 items-center justify-between">
                <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">welytics.co</span>
                <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-3.svg" alt="">
              </div>
              <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
          </a>
          <div x-show="showContent" class="visibility-item">
            <a class="group block rounded-3xl overflow-hidden" href="#">
              <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post1.png" alt="">
              <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
                <div class="sm:flex mb-6 items-center justify-between">
                  <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">welytics.co</span>
                  <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-3.svg" alt="">
                </div>
                <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
              </div>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 lg:pt-20">
          <a class="group block mb-6 rounded-3xl overflow-hidden" href="#">
            <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post2.png" alt="">
            <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
              <div class="sm:flex mb-6 items-center justify-between">
                <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">symtric.co.id</span>
                <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-2.svg" alt="">
              </div>
              <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
          </a>
          <a class="group block mb-6 rounded-3xl overflow-hidden" href="#">
            <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post4.png" alt="">
            <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
              <div class="sm:flex mb-6 items-center justify-between">
                <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">casper.agency</span>
                <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-4.svg" alt="">
              </div>
              <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
          </a>
          <div x-show="showContent" class="visibility-item">
            <a class="group block rounded-3xl overflow-hidden" href="#">
              <img class="block h-96 w-full object-cover" src="casper-assets/portfolio/portfolio-post2.png" alt="">
              <div class="p-8 bg-gray-800 bg-opacity-20 group-hover:bg-violet-600 transition duration-200">
                <div class="sm:flex mb-6 items-center justify-between">
                  <span class="text-xl font-medium text-gray-500 group-hover:text-black tracking-tight">casper.agency</span>
                  <img class="block mt-4 sm:mt-0" src="casper-assets/portfolio/logo-icon-4.svg" alt="">
                </div>
                <p class="text-2xl font-medium text-white group-hover:text-black transition duration-200">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Portfolio from Cyber

Tailwind CSS

Cyber

Dark-background skateboarding photo collage gallery

A dark-themed gallery of five skateboarding photographs arranged in a staggered grid, with images at slight rotations. The outer component is a photo collage showcasing skateboarding scenes such as graffiti walls, a concrete pipe, and a skate tunnel, with no visible navigation or controls.

<section class="py-20 relative scan-lines">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="container px-4 mx-auto relative z-10">
            <div class="flex flex-wrap -mx-4">
                <div class="w-full lg:w-1/2 p-4">
                    <div class="relative group hologram-effect border border-blue-400 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                        <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
                        <div class="absolute inset-0 border-2 border-blue-400 opacity-0 group-hover:opacity-50 transform group-hover:rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 p-4">
                    <div class="relative group hologram-effect border border-purple-500 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" src="https://images.unsplash.com/photo-1458080464185-b0ebf9ede5cb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                        <div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-green-400 to-blue-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                        <div class="absolute top-4 left-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 right-4 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-150"></div>
                        <div class="absolute inset-0 border-2 border-purple-500 opacity-0 group-hover:opacity-50 transform group-hover:-rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
                <div class="w-full md:w-1/3 p-4">
                    <div class="relative group hologram-effect border border-green-400 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                        <div class="absolute inset-0 bg-gradient-to-br from-green-400 via-blue-400 to-purple-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                        <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
                        <div class="absolute inset-0 border-2 border-green-400 opacity-0 group-hover:opacity-50 transform group-hover:rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
                <div class="w-full md:w-1/3 p-4">
                    <div class="relative group hologram-effect border border-blue-400 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-green-400 to-purple-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                        <div class="absolute top-4 left-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 right-4 w-1 h-1 bg-purple-500 rounded-full animate-pulse delay-150"></div>
                        <div class="absolute inset-0 border-2 border-blue-400 opacity-0 group-hover:opacity-50 transform group-hover:-rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
                <div class="w-full md:w-1/3 p-4">
                    <div class="relative group hologram-effect border border-purple-500 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
                        <div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-blue-400 to-green-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                        <div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 left-4 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
                        <div class="absolute inset-0 border-2 border-purple-500 opacity-0 group-hover:opacity-50 transform group-hover:rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Portfolio from Suncealand

Tailwind CSS

Suncealand

Dark Project Showcase with Scattered Photo Grid and CTA Card

A dark-background section headed by a large serif title "View projects" with scattered photographs of people and laptops arranged asymmetrically, plus a large rounded dark card with a circular outline and a "Click here and see more" call to action. It functions as a portfolio-style teaser that invites users to view more work.

<section class="py-20 md:py-40 bg-gray-900 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h1 class="text-6xl sm:text-8xl md:text-10xl xl:text-11xl font-heading font-semibold text-white mb-32">View projects</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-24 md:mb-0">
        <div class="flex flex-wrap justify-center xl:justify-end -mx-3">
          <div class="w-full sm:w-1/2 xl:w-auto px-3 mb-8 sm:mb-0 xl:mr-6">
            <img class="w-full sm:w-auto xl:w-60 xl:h-88 mx-auto rounded-lg object-cover" src="suncealand-assets/images/portfolio-template1-1.png" alt="">
          </div>
          <div class="w-full sm:w-1/2 xl:w-auto px-3 mb-8 sm:mb-0">
            <img class="sm:animate-bouncingSlow mx-auto w-full sm:w-auto xl:w-60 xl:h-88 sm:mt-24 rounded-lg" src="suncealand-assets/images/portfolio-template1-5.png" alt="">
          </div>
        </div>
        <div class="flex flex-wrap justify-end">
          <div class="w-full sm:w-1/2 xl:w-auto px-3 xl:mr-auto mb-8 sm:mb-0">
            <img class="w-full sm:w-auto xl:w-60 xl:h-60 mx-auto xl:-mt-8 rounded-lg" src="suncealand-assets/images/portfolio-template1-3.png" alt="">
          </div>
          <div class="w-full sm:w-1/2 xl:w-auto px-3">
            <img class="w-full sm:w-auto xl:w-60 xl:h-60 mx-auto sm:mt-20 xl:mt-32 rounded-lg" src="suncealand-assets/images/portfolio-template1-4.png" alt="">
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div>
          <img class="hidden md:block animate-photo w-60 h-60 ml-auto mb-16 rounded-lg" src="suncealand-assets/images/portfolio-template1-2.png" alt="">
          <a class="group flex h-full w-full md:max-w-md xl:max-w-lg ml-auto md::mr-12 py-20 px-6 xl:px-16 items-center justify-center bg-gray-800 rounded-3xl" href="#">
            <div class="flex items-center justify-center w-40 sm:w-72 xl:w-88 h-40 sm:h-72 xl:h-88 px-4 rounded-full border border-gray-500 group-hover:border-gray-300 transition duration-300">
              <span class="text-center sm:text-2xl text-white font-semibold transform group-hover:rotate-45 transition duration-700">Click here and see more</span>
            </div>
          </a>
          <img class="md:hidden animate-photo w-60 h-60 ml-auto mt-20 rounded-lg" src="suncealand-assets/images/portfolio-template1-2.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind components for portfolio will allow you to display previously completed work, case studies and experience. This is a key element in persuading clients, so make sure to give it the right setting.

On this subpage you can browse a variety of Tailwind portfolio component themes that are available within our UI libraries. You will also find many other types of components that will be in the same style. Each of these libraries has been prepared by experienced designers along with our in-house team of developers.

Get access to all Tailwind teams components, code and our editor. Try the demo for free.

Try for Free →

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

Tailwind CSS Portfolio Components

Framework

UI Library

Components

Portfolio from Zeus

Five-Image Stock Photo Collage with Office Workers

Portfolio from Zospace

Dark Carousel Section with Heading, Slide Image, Caption Card, and Blue Arrow Controls

Portfolio from Wrexa

Staggered Five-Image Gallery Hero with Scroll-Down Indicator

Your next website starts here

Portfolio from Uinel

SchoolTrip App Portfolio Hero with Photo and Finance Card

Portfolio from Atis

Latest Projects Image Grid with Category Filter Tabs

Portfolio from Pstls.

Portfolio Category Filter with Image Card Grid

Portfolio from BoldUI

Dark Feature Section with Tilted App Screenshot Ovals

Portfolio from Acros

Project Showcase Card Grid with Images and Tags

Portfolio from Bendis

Five-Image Abstract Painting Gallery Grid

Portfolio from Metis

Image Gallery Section with Heading and Bento Grid

Portfolio from Shuffle UX

Image Placeholder Gallery Grid

Portfolio from Cronos

Five-Photo Collage Grid with Yellow and Green Accent Blocks

Portfolio from NEUB

Five-Image Photo Collage with Pink and Yellow Offset Frames

Portfolio from Casper

Dark Project Showcase Grid with 3D Character Thumbnails

Portfolio from Cyber

Dark-background skateboarding photo collage gallery

Portfolio from Suncealand

Dark Project Showcase with Scattered Photo Grid and CTA Card

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