Portfolio Components in Boldui library

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