HTML Code Examples

TailwindCSS Content Section

<div
  class="relative py-12 md:py-24 text-white bg-white-dots-purple-blue-gradient"
>
  <div class="text-center md:text-left">
    <div class="container">
      <div class="flex flex-col lg:flex-row -mb-10 lg:mb-0">
        <div class="lg:flex-shrink-0 mb-10 lg:mb-0">
          <ol class="lg:mt-2 -mb-5 inline-block" type="i">
            <li class="mb-5 pl-3 heading-h6 text-left">
              Lorem ipsum dolor
            </li>
            <li class="mb-5 pl-3 heading-h6 text-left">
              Lorem ipsum dolor
            </li>
            <li class="mb-5 pl-3 heading-h6 text-left">
              Lorem ipsum dolor
            </li>
          </ol>
        </div>

        <div class="lg:flex-auto mb-10 lg:mb-0 lg:ml-16">
          <div class="rich-text contains-snug-heading-leading">
            <h2>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
              massa libero, lobortis luctus rhoncus sit amet, vestibulum ac
              nisl. Aenean vitae hendrerit tortor.
            </h2>
          </div>
        </div>

        <div class="lg:flex-shrink-0 mb-10 lg:mb-0 lg:ml-10">
          <div class="inline-block lg:block md:w-56 mx-auto lg:mx-0">
            <div class="text-left">
              <div class="relative p-5 bg-white shadow-lg-purple rounded-lg">
                <div>
                  <p
                    class="text-purple-400 text-lg font-sans font-bold tracking-wide"
                  >
                    Lorem ipsum dolor sit amet?
                  </p>
                </div>

                <div class="mt-2">
                  <div
                    class="text-purple-600 text-sm font-sans font-medium tracking-wide"
                  >
                    <div class="t-contains-list">
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      </p>
                    </div>

                    <div class="mt-4">
                      <div
                        class="text-sm font-sans font-medium tracking-wide t-contains-link-primary"
                      >
                        <p>
                          <a
                            href="https://static.protenus.stage1.planitstage.com/careers"
                            target="_self"
                          >
                            Lorem ipsum dolor.
                          </a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>