Content Components in Casper library

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 left-0 -ml-60 -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="relative flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-2xl mx-auto lg:mx-0 lg:max-w-md xl:max-w-lg">
          <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl xl:text-7xl font-medium text-white tracking-tight mb-6">
            <span class="block">Casper</span>
            <span>is an awesome UI Library</span>
          </h2>
          <p class="text-3xl font-medium text-gray-600 mb-4">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
          <p class="text-3xl font-medium text-gray-600">Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-2xl mx-auto lg:mx-0 lg:max-w-md xl:max-w-xl">
          <h3 class="text-2xl text-gray-50 font-medium mb-8">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</h3>
          <p class="text-lg tracking-tight text-gray-200 mb-4">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
          <p class="text-lg tracking-tight text-gray-200 mb-10">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
          <img class="block w-full" src="casper-assets/content/image-robot.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="row">
      <div class="col-md-6 mb-10 mb-md-0">
        <div class="mw-lg">
          <h2 class="font-heading fw-medium text-white mb-6">Casper is an awesome UI Library</h2>
          <p class="h4 fw-normal text-light-light mb-6">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
          <p class="h4 fw-normal text-light-light mb-0">Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div>
          <p class="display-4 text-white fw-medium mb-9">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
          <p class="fs-6 text-white">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
          <p class="fs-6 text-white mb-12">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p><img class="img-fluid d-block w-100" src="casper-assets/content/image-lg.png" alt=""/>
        </div>
      </div>
    </div>
  </div>
</section>