Content Components in Nightsable library

<section class="relative py-20 overflow-hidden">
  <img class="absolute top-0 left-0" src="nightsable-assets/images/blog-content/shadow.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative z-10 mb-12 md:max-w-md text-center mx-auto">
      <h2 class="font-heading mb-4 text-3xl text-white tracking-3xl">Women in business: an interview with Sarah Townsend</h2>
      <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="flex flex-wrap justify-center items-center -m-2">
        <div class="w-auto p-2">
          <img src="nightsable-assets/images/blog-content/avatar.png" alt="">
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-white font-medium tracking-tighter">Wade Warren</p>
        </div>
        <div class="w-auto p-2">
          <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
          </svg>
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-white font-medium tracking-tighter">9 min read</p>
        </div>
      </div>
    </div>
  </div>
  <div class="relative px-4">
    <img class="hidden md:block absolute -top-44 right-0" src="nightsable-assets/images/blog-content/lines.png" alt="">
    <img class="relative z-10 mx-auto border border-white border-opacity-10 rounded-5xl" src="nightsable-assets/images/blog-content/header.png" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative border-b border-blueGray-900">
      <div class="max-w-3xl pt-8 mx-auto">
        <div class="border-b border-blueGray-900">
          <h3 class="mb-10 text-2xl text-gray-100 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</h3>
        </div>
        <div class="pt-8 pb-16">
          <h2 class="font-heading mb-4 text-3xl text-blueGray-50 tracking-3xl">Header 1</h2>
          <p class="mb-6 text-lg text-blueGray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
          <div class="flex flex-wrap mb-9">
            <div class="w-auto p-3">
              <div class="w-0.5 bg-green-400 h-full rounded-md"></div>
            </div>
            <div class="flex-1 mb-5 p-3">
              <h3 class="mb-4 text-2xl text-gray-200 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</h3>
              <p class="text-lg text-gray-100">— John Doe, CEO &amp; Founder</p>
            </div>
            <p class="mb-8 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
            <img class="mb-4" src="nightsable-assets/images/blog-content/header2.png" alt="">
            <p class="text-lg text-blueGray-200">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
          </div>
          <h2 class="font-heading mb-4 text-3xl text-blueGray-50 tracking-3xl">Header 1</h2>
          <h3 class="mb-9 text-2xl text-gray-100 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</h3>
          <h3 class="mb-9 text-2xl text-gray-100 tracking-2xl">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</h3>
          <ul class="mb-9">
            <li class="text-2xl text-gray-100">1. Lectus id duis vitae porttitor enim gravida morbi.</li>
            <li class="text-2xl text-gray-100">2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
            <li class="text-2xl text-gray-100">3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
          </ul>
          <h3 class="mb-12 text-2xl text-gray-100 tracking-2xl">Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim. <a class="text-green-500 underline" href="#">Vivamus id pharetra massa</a>. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</h3>
          <div class="flex flex-wrap justify-center -m-2">
            <div class="w-auto p-2"><a class="inline-block px-8 py-4 text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Copy Link</a></div>
            <div class="w-auto p-2">
              <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
                <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.59948 3.43344H9.16615V0.78344C8.4076 0.704562 7.64544 0.665619 6.88281 0.666773C4.61615 0.666773 3.06615 2.05011 3.06615 4.58344V6.76677H0.507812V9.73344H3.06615V17.3334H6.13281V9.73344H8.68281L9.06614 6.76677H6.13281V4.87511C6.13281 4.00011 6.36615 3.43344 7.59948 3.43344Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto p-2">
              <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.3346 1.83326C16.7083 2.10501 16.0458 2.28465 15.368 2.3666C16.0831 1.93936 16.619 1.26725 16.8763 0.474931C16.2043 0.874983 15.4686 1.15684 14.7013 1.30826C14.1884 0.752074 13.5054 0.381844 12.7595 0.25564C12.0135 0.129436 11.2468 0.254396 10.5795 0.610922C9.91217 0.967448 9.38208 1.53537 9.07234 2.22563C8.76259 2.91588 8.69071 3.68942 8.86797 4.42493C7.50916 4.3562 6.18 4.00239 4.96685 3.38648C3.75369 2.77057 2.68367 1.90634 1.8263 0.84993C1.52558 1.37507 1.36757 1.96978 1.36797 2.57493C1.3669 3.13692 1.50482 3.69044 1.76943 4.18623C2.03405 4.68202 2.41715 5.10469 2.88464 5.4166C2.34128 5.40181 1.80954 5.25601 1.33464 4.9916V5.03326C1.33871 5.82067 1.61463 6.58251 2.11573 7.1899C2.61683 7.7973 3.31235 8.21297 4.08464 8.3666C3.78735 8.45707 3.4787 8.50477 3.16797 8.50826C2.95288 8.50575 2.73832 8.48625 2.5263 8.44993C2.74623 9.12727 3.17182 9.71922 3.74386 10.1434C4.31591 10.5676 5.00595 10.8029 5.71797 10.8166C4.51564 11.7627 3.03121 12.279 1.5013 12.2833C1.22275 12.2842 0.944415 12.2675 0.667969 12.2333C2.22999 13.2418 4.05031 13.7772 5.90964 13.7749C7.19271 13.7883 8.46558 13.5458 9.6539 13.0617C10.8422 12.5775 11.9222 11.8615 12.8306 10.9553C13.7391 10.0492 14.4579 8.97109 14.9451 7.78402C15.4323 6.59695 15.678 5.3247 15.668 4.0416C15.668 3.89993 15.668 3.74993 15.668 3.59993C16.3219 3.11227 16.8859 2.51445 17.3346 1.83326Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto p-2">
              <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.4513 3.55008C13.2535 3.55008 13.0602 3.60873 12.8957 3.71861C12.7313 3.82849 12.6031 3.98467 12.5274 4.1674C12.4517 4.35012 12.4319 4.55119 12.4705 4.74517C12.5091 4.93915 12.6043 5.11734 12.7442 5.25719C12.884 5.39704 13.0622 5.49228 13.2562 5.53087C13.4502 5.56945 13.6513 5.54965 13.834 5.47396C14.0167 5.39827 14.1729 5.2701 14.2828 5.10565C14.3927 4.9412 14.4513 4.74786 14.4513 4.55008C14.4513 4.28486 14.3459 4.03051 14.1584 3.84297C13.9709 3.65544 13.7165 3.55008 13.4513 3.55008V3.55008ZM17.2846 5.56675C17.2684 4.87533 17.1389 4.19125 16.9013 3.54175C16.6894 2.98603 16.3596 2.48281 15.9346 2.06675C15.522 1.6396 15.0176 1.3119 14.4596 1.10841C13.8118 0.863549 13.127 0.73109 12.4346 0.716748C11.5513 0.666748 11.268 0.666748 9.0013 0.666748C6.73464 0.666748 6.4513 0.666748 5.56797 0.716748C4.8756 0.73109 4.19075 0.863549 3.54297 1.10841C2.98603 1.31396 2.48208 1.64138 2.06797 2.06675C1.64082 2.4794 1.31312 2.98378 1.10964 3.54175C0.864769 4.18953 0.73231 4.87438 0.717969 5.56675C0.667969 6.45008 0.667969 6.73342 0.667969 9.00008C0.667969 11.2667 0.667969 11.5501 0.717969 12.4334C0.73231 13.1258 0.864769 13.8106 1.10964 14.4584C1.31312 15.0164 1.64082 15.5208 2.06797 15.9334C2.48208 16.3588 2.98603 16.6862 3.54297 16.8917C4.19075 17.1366 4.8756 17.2691 5.56797 17.2834C6.4513 17.3334 6.73464 17.3334 9.0013 17.3334C11.268 17.3334 11.5513 17.3334 12.4346 17.2834C13.127 17.2691 13.8118 17.1366 14.4596 16.8917C15.0176 16.6883 15.522 16.3606 15.9346 15.9334C16.3615 15.5189 16.6916 15.0152 16.9013 14.4584C17.1389 13.8089 17.2684 13.1248 17.2846 12.4334C17.2846 11.5501 17.3346 11.2667 17.3346 9.00008C17.3346 6.73342 17.3346 6.45008 17.2846 5.56675V5.56675ZM15.7846 12.3334C15.7786 12.8624 15.6828 13.3865 15.5013 13.8834C15.3682 14.2461 15.1545 14.5738 14.8763 14.8417C14.606 15.1172 14.279 15.3304 13.918 15.4667C13.4211 15.6482 12.8969 15.744 12.368 15.7501C11.5346 15.7917 11.2263 15.8001 9.03464 15.8001C6.84297 15.8001 6.53464 15.8001 5.7013 15.7501C5.15204 15.7604 4.60513 15.6758 4.08464 15.5001C3.73945 15.3568 3.42743 15.1441 3.16797 14.8751C2.89138 14.6074 2.68034 14.2794 2.5513 13.9167C2.34785 13.4127 2.23501 12.8767 2.21797 12.3334C2.21797 11.5001 2.16797 11.1917 2.16797 9.00008C2.16797 6.80842 2.16797 6.50008 2.21797 5.66675C2.2217 5.12596 2.32043 4.59004 2.50964 4.08341C2.65634 3.73167 2.88152 3.41813 3.16797 3.16675C3.42115 2.88022 3.73404 2.65266 4.08464 2.50008C4.59259 2.31678 5.12797 2.22098 5.66797 2.21675C6.5013 2.21675 6.80964 2.16675 9.0013 2.16675C11.193 2.16675 11.5013 2.16675 12.3346 2.21675C12.8636 2.22282 13.3877 2.31862 13.8846 2.50008C14.2633 2.64063 14.6032 2.86912 14.8763 3.16675C15.1494 3.42273 15.3628 3.73569 15.5013 4.08341C15.6865 4.59086 15.7824 5.12656 15.7846 5.66675C15.8263 6.50008 15.8346 6.80842 15.8346 9.00008C15.8346 11.1917 15.8263 11.5001 15.7846 12.3334ZM9.0013 4.72508C8.15614 4.72673 7.33044 4.97885 6.62851 5.4496C5.92659 5.92034 5.37995 6.58858 5.05766 7.36988C4.73538 8.15117 4.65191 9.01047 4.8178 9.83919C4.98369 10.6679 5.3915 11.4289 5.9897 12.0259C6.5879 12.6229 7.34964 13.0293 8.17869 13.1935C9.00773 13.3578 9.86686 13.2727 10.6475 12.9489C11.4282 12.6251 12.0954 12.0771 12.5647 11.3743C13.0341 10.6714 13.2846 9.84524 13.2846 9.00008C13.2857 8.43767 13.1756 7.88059 12.9607 7.36088C12.7457 6.84117 12.4301 6.36909 12.032 5.97179C11.634 5.57449 11.1613 5.25981 10.6411 5.04586C10.121 4.8319 9.56371 4.72288 9.0013 4.72508V4.72508ZM9.0013 11.7751C8.45246 11.7751 7.91594 11.6123 7.45959 11.3074C7.00325 11.0025 6.64757 10.5691 6.43754 10.062C6.2275 9.55496 6.17255 8.997 6.27962 8.45871C6.3867 7.92041 6.65099 7.42595 7.03908 7.03786C7.42717 6.64977 7.92163 6.38548 8.45993 6.2784C8.99822 6.17133 9.55618 6.22628 10.0632 6.43632C10.5703 6.64635 11.0037 7.00203 11.3086 7.45837C11.6136 7.91472 11.7763 8.45124 11.7763 9.00008C11.7763 9.3645 11.7045 9.72535 11.5651 10.062C11.4256 10.3987 11.2212 10.7046 10.9635 10.9623C10.7058 11.22 10.3999 11.4244 10.0632 11.5638C9.72657 11.7033 9.36572 11.7751 9.0013 11.7751V11.7751Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-16">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">The latest news</span>
      <h2 class="font-heading mb-16 text-5xl lg:text-7xl xl:text-8xl text-white tracking-5xl lg:tracking-7xl xl:tracking-8xl">From the blog</h2>
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/cash.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/skyscraper.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/skyscraper2.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-lg mx-auto mb-12 text-center">
      <h3 class="fs-4 mb-4">Women in business: an interview with Sarah Townsend</h3>
      <p class="mw-md mx-auto text-secondary-light mb-8">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="d-flex align-items-center justify-content-center"><img class="img-fluid" src="nightsable-assets/images/blog-content/avatar.png" alt=""><span class="ms-4 fs-9 fw-medium">Wade Warren</span><span class="mx-4">·</span><span class="fs-9 fw-medium">9 min read</span></div>
    </div><img class="img-fluid d-block mb-8 w-100 rounded-4" src="nightsable-assets/images/blog-content/header.png" alt="">
    <div class="mw-sm mw-sm-lg mw-md-xl mw-lg-3xl mx-auto">
      <div class="pb-10 mb-10 border-bottom border-dark border-opacity-50">
        <p class="fs-5 text-light text-opacity-75 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      </div>
      <div class="mb-8">
        <h6 class="mb-4">Header 1</h6>
        <p class="fs-7 text-light text-opacity-75 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <div class="ps-6 mb-8 border-start border-2 border-primary">
          <p class="fs-5 text-light text-opacity-75 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</p><span class="fs-8 text-light text-opacity-75">— John Doe, CEO &amp; Founder</span>
        </div>
      </div>
      <p class="fs-7 text-light text-opacity-75 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p><img class="img-fluid d-block mb-4" src="nightsable-assets/images/blog-content/header2.png" alt=""><span class="fs-8 text-secondary-light">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</span>
      <div class="mt-8 mb-12">
        <h6 class="mb-4">Header 1</h6>
        <p class="fs-5 text-light text-opacity-75">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <p class="fs-5 text-light text-opacity-75 mb-6">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</p>
        <ul class="list-unstyled text-light text-opacity-75 fs-5 mb-6">
          <li>1. Lectus id duis vitae porttitor enim gravida morbi.</li>
          <li>2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
          <li>3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
        </ul>
        <p class="fs-5 text-light text-opacity-75">Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim. Vivamus id pharetra massa. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</p>
      </div>
      <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center"><a class="btn btn-outline-light fw-medium" href="#">Copy Link</a>
        <div class="d-flex gap-4"><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.5995 4.43344H14.1661V1.78344C13.4076 1.70456 12.6454 1.66562 11.8828 1.66677C9.61615 1.66677 8.06615 3.05011 8.06615 5.58344V7.76677H5.50781V10.7334H8.06615V18.3334H11.1328V10.7334H13.6828L14.0661 7.76677H11.1328V5.87511C11.1328 5.00011 11.3661 4.43344 12.5995 4.43344Z" fill="currentColor"></path>
            </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.3346 4.83326C17.7083 5.10501 17.0458 5.28465 16.368 5.3666C17.0831 4.93936 17.619 4.26725 17.8763 3.47493C17.2043 3.87498 16.4686 4.15684 15.7013 4.30826C15.1884 3.75207 14.5054 3.38184 13.7595 3.25564C13.0135 3.12944 12.2468 3.2544 11.5795 3.61092C10.9122 3.96745 10.3821 4.53537 10.0723 5.22563C9.76259 5.91588 9.69071 6.68942 9.86797 7.42493C8.50916 7.3562 7.18 7.00239 5.96685 6.38648C4.75369 5.77057 3.68367 4.90634 2.8263 3.84993C2.52558 4.37507 2.36757 4.96978 2.36797 5.57493C2.3669 6.13692 2.50482 6.69044 2.76943 7.18623C3.03405 7.68202 3.41715 8.10469 3.88464 8.4166C3.34128 8.40181 2.80954 8.25601 2.33464 7.9916V8.03326C2.33871 8.82067 2.61463 9.58251 3.11573 10.1899C3.61683 10.7973 4.31235 11.213 5.08464 11.3666C4.78735 11.4571 4.4787 11.5048 4.16797 11.5083C3.95288 11.5058 3.73832 11.4862 3.5263 11.4499C3.74623 12.1273 4.17182 12.7192 4.74386 13.1434C5.31591 13.5676 6.00595 13.8029 6.71797 13.8166C5.51564 14.7627 4.03121 15.279 2.5013 15.2833C2.22275 15.2842 1.94442 15.2675 1.66797 15.2333C3.22999 16.2418 5.05031 16.7772 6.90964 16.7749C8.19271 16.7883 9.46558 16.5458 10.6539 16.0617C11.8422 15.5775 12.9222 14.8615 13.8306 13.9553C14.7391 13.0492 15.4579 11.9711 15.9451 10.784C16.4323 9.59695 16.678 8.3247 16.668 7.0416C16.668 6.89993 16.668 6.74993 16.668 6.59993C17.3219 6.11227 17.8859 5.51445 18.3346 4.83326Z" fill="currentColor"></path>
            </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.4513 4.55008C14.2535 4.55008 14.0602 4.60873 13.8957 4.71861C13.7313 4.82849 13.6031 4.98467 13.5274 5.1674C13.4517 5.35012 13.4319 5.55119 13.4705 5.74517C13.5091 5.93915 13.6043 6.11734 13.7442 6.25719C13.884 6.39704 14.0622 6.49228 14.2562 6.53087C14.4502 6.56945 14.6513 6.54965 14.834 6.47396C15.0167 6.39827 15.1729 6.2701 15.2828 6.10565C15.3927 5.9412 15.4513 5.74786 15.4513 5.55008C15.4513 5.28486 15.3459 5.03051 15.1584 4.84297C14.9709 4.65544 14.7165 4.55008 14.4513 4.55008ZM18.2846 6.56675C18.2684 5.87533 18.1389 5.19125 17.9013 4.54175C17.6894 3.98603 17.3596 3.48281 16.9346 3.06675C16.522 2.6396 16.0176 2.3119 15.4596 2.10841C14.8118 1.86355 14.127 1.73109 13.4346 1.71675C12.5513 1.66675 12.268 1.66675 10.0013 1.66675C7.73464 1.66675 7.4513 1.66675 6.56797 1.71675C5.8756 1.73109 5.19075 1.86355 4.54297 2.10841C3.98603 2.31396 3.48208 2.64138 3.06797 3.06675C2.64082 3.4794 2.31312 3.98378 2.10964 4.54175C1.86477 5.18953 1.73231 5.87438 1.71797 6.56675C1.66797 7.45008 1.66797 7.73342 1.66797 10.0001C1.66797 12.2667 1.66797 12.5501 1.71797 13.4334C1.73231 14.1258 1.86477 14.8106 2.10964 15.4584C2.31312 16.0164 2.64082 16.5208 3.06797 16.9334C3.48208 17.3588 3.98603 17.6862 4.54297 17.8917C5.19075 18.1366 5.8756 18.2691 6.56797 18.2834C7.4513 18.3334 7.73464 18.3334 10.0013 18.3334C12.268 18.3334 12.5513 18.3334 13.4346 18.2834C14.127 18.2691 14.8118 18.1366 15.4596 17.8917C16.0176 17.6883 16.522 17.3606 16.9346 16.9334C17.3615 16.5189 17.6916 16.0152 17.9013 15.4584C18.1389 14.8089 18.2684 14.1248 18.2846 13.4334C18.2846 12.5501 18.3346 12.2667 18.3346 10.0001C18.3346 7.73342 18.3346 7.45008 18.2846 6.56675ZM16.7846 13.3334C16.7786 13.8624 16.6828 14.3865 16.5013 14.8834C16.3682 15.2461 16.1545 15.5738 15.8763 15.8417C15.606 16.1172 15.279 16.3304 14.918 16.4667C14.4211 16.6482 13.8969 16.744 13.368 16.7501C12.5346 16.7917 12.2263 16.8001 10.0346 16.8001C7.84297 16.8001 7.53464 16.8001 6.7013 16.7501C6.15204 16.7604 5.60513 16.6758 5.08464 16.5001C4.73945 16.3568 4.42743 16.1441 4.16797 15.8751C3.89138 15.6074 3.68034 15.2794 3.5513 14.9167C3.34785 14.4127 3.23501 13.8767 3.21797 13.3334C3.21797 12.5001 3.16797 12.1917 3.16797 10.0001C3.16797 7.80842 3.16797 7.50008 3.21797 6.66675C3.2217 6.12596 3.32043 5.59004 3.50964 5.08341C3.65634 4.73167 3.88152 4.41813 4.16797 4.16675C4.42115 3.88022 4.73404 3.65266 5.08464 3.50008C5.59259 3.31678 6.12797 3.22098 6.66797 3.21675C7.5013 3.21675 7.80964 3.16675 10.0013 3.16675C12.193 3.16675 12.5013 3.16675 13.3346 3.21675C13.8636 3.22282 14.3877 3.31862 14.8846 3.50008C15.2633 3.64062 15.6032 3.86912 15.8763 4.16675C16.1494 4.42273 16.3628 4.73569 16.5013 5.08341C16.6865 5.59086 16.7824 6.12656 16.7846 6.66675C16.8263 7.50008 16.8346 7.80842 16.8346 10.0001C16.8346 12.1917 16.8263 12.5001 16.7846 13.3334ZM10.0013 5.72508C9.15614 5.72673 8.33044 5.97885 7.62851 6.4496C6.92659 6.92034 6.37995 7.58858 6.05766 8.36988C5.73538 9.15117 5.65191 10.0105 5.8178 10.8392C5.98369 11.6679 6.3915 12.4289 6.9897 13.0259C7.5879 13.6229 8.34964 14.0293 9.17869 14.1935C10.0077 14.3578 10.8669 14.2727 11.6475 13.9489C12.4282 13.6251 13.0954 13.0771 13.5647 12.3743C14.0341 11.6714 14.2846 10.8452 14.2846 10.0001C14.2857 9.43767 14.1756 8.88059 13.9607 8.36088C13.7457 7.84117 13.4301 7.36909 13.032 6.97179C12.634 6.57449 12.1613 6.25981 11.6411 6.04586C11.121 5.8319 10.5637 5.72288 10.0013 5.72508ZM10.0013 12.7751C9.45246 12.7751 8.91594 12.6123 8.45959 12.3074C8.00325 12.0025 7.64757 11.5691 7.43754 11.062C7.2275 10.555 7.17255 9.997 7.27962 9.45871C7.3867 8.92041 7.65099 8.42595 8.03908 8.03786C8.42717 7.64977 8.92163 7.38548 9.45993 7.2784C9.99822 7.17133 10.5562 7.22628 11.0632 7.43632C11.5703 7.64635 12.0037 8.00203 12.3086 8.45837C12.6136 8.91472 12.7763 9.45124 12.7763 10.0001C12.7763 10.3645 12.7045 10.7253 12.5651 11.062C12.4256 11.3987 12.2212 11.7046 11.9635 11.9623C11.7058 12.22 11.3999 12.4244 11.0632 12.5638C10.7266 12.7033 10.3657 12.7751 10.0013 12.7751Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="mt-20 pt-16 border-top border-dark border-opacity-50">
      <div class="mw-sm mw-sm-lg mw-md-xl mw-lg-none mx-auto"><span class="badge mb-4 text-primary">Nightsable Card</span>
        <h2 class="font-heading h2 text-white mb-16" style="letter-spacing: -0.2rem;">From the blog</h2>
        <div class="row">
          <div class="col-12 col-lg-4 mb-12 mb-lg-0"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/cash4.png" alt="">
              <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</span><span class="mx-4">
                  <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
                  </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
              <div class="mw-sm">
                <h6 class="mb-4">Women in business</h6>
                <p class="mw-xs text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
              </div></a></div>
          <div class="col-12 col-lg-4 mb-12 mb-lg-0"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/hand4.png" alt="">
              <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</span><span class="mx-4">
                  <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
                  </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
              <div class="mw-sm">
                <h6 class="mb-4">Women in business</h6>
                <p class="mw-xs text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
              </div></a></div>
          <div class="col-12 col-lg-4"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/skyscraper4.png" alt="">
              <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</span><span class="mx-4">
                  <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
                  </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
              <div class="mw-sm">
                <h6 class="mb-4">Women in business</h6>
                <p class="mw-xs text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
              </div></a></div>
        </div>
      </div>
    </div>
  </div>
</section>