Content Components in Boldui library

<section class="relative bg-black bg-no-repeat bg-cover overflow-hidden" style="background-image: url('boldui-assets/images/content1.png');">
  <div class="w-full sm:w-3/5 md:w-1/3 ml-auto">
    <div class="flex md:h-80 items-center justify-center px-4 bg-black">
      <a class="relative inline-flex items-center h-52 md:h-64 text-white hover:underline" href="#">
        <img class="absolute top-0 h-full left-0" src="boldui-assets/elements/ellipse-right.svg" alt="">
        <div class="flex items-center">
          <span class="mr-2 text-sm font-heading">Read next article</span>
          <svg width="17" height="9" viewBox="0 0 17 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.3264 3.70975H0.316406V5.80206H12.3264V8.94052L16.3164 4.7559L12.3264 0.571289V3.70975Z" fill="#FFEC3E"></path>
          </svg>
        </div>
      </a>
    </div>
  </div>
  <div class="w-full sm:w-5/6 md:w-2/3 px-4 bg-black">
    <div class="pt-12 pb-24 md:pt-24 px-4">
      <div class="max-w-xl mx-auto">
        <ul class="flex items-center mb-12">
          <li class="flex items-center mr-3">
            <a class="inline-block mr-3 text-xs text-gray-500 uppercase font-semibold" href="#">Home</a>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 6.18506H0L0 4.10173H12.01V0.976726L16 5.14339L12.01 9.31006V6.18506Z" fill="#7E7E7E"></path>
            </svg>
          </li>
          <li class="flex items-center mr-3">
            <a class="inline-block mr-3 text-xs text-gray-500 uppercase font-semibold" href="#">Blog</a>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 6.18506H0L0 4.10173H12.01V0.976726L16 5.14339L12.01 9.31006V6.18506Z" fill="#7E7E7E"></path>
            </svg>
          </li>
          <li><a class="inline-block text-xs text-gray-500 uppercase font-semibold" href="#">Article</a></li>
        </ul>
        <h2 class="inline-block mb-6 text-3xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
        <div class="flex items-center mb-8">
          <img class="h-24" src="boldui-assets/images/team6.png" alt="">
          <div class="ml-4">
            <h3 class="mb-2 text-white font-heading">Clara Osborne</h3>
            <p class="text-xs text-gray-500 uppercase font-semibold tracking-widest">Product designer</p>
          </div>
        </div>
        <div>
          <p class="mb-8 text-lg text-gray-500">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
          <p class="text-lg text-gray-500">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
        </div>
      </div>
    </div>
  </div>
</section>