Tailwind CSS Components – Boldui Library

<section class="bg-black overflow-x-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-2xl mx-auto py-16">
      <h2 class="mb-8 text-2xl text-white font-heading">When I was a developer, I often had a hundred questions when</h2>
      <p class="mb-8 text-lg text-gray-500">Building websites from wireframes that I had received. Some of those questions were:</p>
      <ul class="mb-10">
        <li class="flex flex-wrap items-center -mx-4">
          <div class="w-full md:w-1/6 px-4">
            <div class="w-24 h-24 flex items-center justify-center bg-contain bg-no-repeat" style="background-image: url('boldui-assets/elements/ellipse.svg');">
              <p class="text-sm text-yellow-500">1</p>
            </div>
          </div>
          <div class="w-full md:w-5/6 px-4">
            <p class="text-lg text-white">How will this design scale when I shrink the browser window?</p>
          </div>
        </li>
        <li class="flex flex-wrap items-center -mx-4">
          <div class="w-full md:w-1/6 px-4">
            <div class="w-24 h-24 flex items-center justify-center bg-contain bg-no-repeat" style="background-image: url('boldui-assets/elements/ellipse.svg');">
              <p class="text-sm text-yellow-500">2</p>
            </div>
          </div>
          <div class="w-full md:w-5/6 px-4">
            <p class="text-lg text-white">What happens when this shape is filled out incorrectly?</p>

<section class="py-20 md:py-32 bg-black">
  <div class="container mx-auto px-4">
    <div class="max-w-md mx-auto mb-20 text-center">
      <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
      <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="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="flex flex-wrap -mx-4">
      <div class="relative w-full md:w-1/3 px-4">
        <img class="absolute top-0 left-0 h-52 w-52 transform rotate-90" src="boldui-assets/elements/ellipse.svg" alt="">
        <div class="h-52 w-52 clip-path transform rotate-45">
          <img class="w-full h-full" src="boldui-assets/images/placeholder-light1.png" alt="">
        </div>
        <div class="absolute top-1/2 left-0 ml-24 transform -translate-y-1/2">
          <div class="flex items-center">
            <span class="mr-4">
              <svg width="25" height="32" viewBox="0 0 25 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M24.9007 6.86123C24.9028 6.86123 24.9045 6.85952 24.9045 6.85741C24.9046 6.18186 24.9312 5.49873 24.9045 4.82321C24.9045 4.81556 24.9045 4.80792 24.9045 4.80027C24.9045 4.44467 24.6636 4.17318 24.3424 4.0623C23.0194 3.60345 21.6926 3.14461 20.3696 2.68577C18.2819 1.96309 16.198 1.23659 14.1102 0.513918C13.6476 0.353323 13.1887 0.169787 12.7184 0.032134C12.4852 -0.0366923 12.3246 0.016839 12.1219 0.0856654C11.8848 0.169786 11.6439 0.250084 11.4069 0.334205C9.40709 1.02629 7.41113 1.71838 5.41134 2.41047C3.84746 2.95343 2.28739 3.49257 0.723507 4.03553C0.696741 4.04318 0.673799 4.05465 0.647033 4.0623C0.325844 4.17318 0.0849514 4.44849 0.0849514 4.80027V11.8856C0.0849514 13.3768 0.0811277 14.868 0.0849514 16.3593C0.0887751 17.6249 0.310549 18.8982 0.731154 20.0912C1.59148 22.5498 3.15537 24.7102 5.0175 26.5111C6.8567 28.2892 9.00943 29.7766 11.3189 30.8701C11.5828 30.9925 11.8466 31.111 12.1104 31.2257C12.1247 31.2329 12.1422 31.24 12.1569 31.2471C12.1577 31.2475 12.1626 31.2487 12.1635 31.2487C12.1636 31.2487 12.164 31.2487 12.1641 31.2488C12.2023 31.264 12.2443 31.2793 12.2825 31.2908C12.4648 31.3401 12.666 31.3141 12.8673 31.2313C12.87 31.2302 12.8742 31.2293 12.8767 31.2276C12.879 31.226 12.8803 31.2252 12.883 31.2241C15.2139 30.2338 17.3767 28.835 19.2722 27.1573C21.184 25.4635 22.8703 23.4025 23.8797 21.0433C24.3998 19.8235 24.7439 18.5617 24.8586 17.2387C24.9198 16.5313 24.8968 15.8163 24.8968 15.1051V6.86506C24.8968 6.86295 24.8986 6.86123 24.9007 6.86123ZM19.2837 11.5567C18.9663 11.8741 18.6489 12.1915 18.3316 12.5088C16.955 13.8853 15.5823 15.258 14.2058 16.6346C13.3378 17.5025 12.466 18.3743 11.5981 19.2423C11.1583 19.682 10.4127 19.682 9.97682 19.2423C9.80093 19.0664 9.62504 18.8905 9.44915 18.7147C8.21793 17.4834 6.9867 16.2522 5.75165 15.0172C5.29663 14.5621 5.33105 13.8548 5.75165 13.3959C6.17226 12.9409 6.94846 12.9715 7.37289 13.3959C7.54878 13.5718 7.72467 13.7515 7.90056 13.9274C8.81188 14.8387 9.72321 15.7569 10.6345 16.669C10.7147 16.7492 10.8448 16.7492 10.9251 16.669C12.3016 15.2925 13.6743 13.9159 15.0509 12.5394C15.9188 11.6714 16.7906 10.7996 17.6586 9.93165C18.1136 9.47663 18.8248 9.51105 19.2798 9.93165C19.7387 10.3523 19.7081 11.1323 19.2837 11.5567Z" fill="#FFEC3E"></path>
              </svg>
            </span>
            <h3 class="text-xl text-white font-heading">Security in saving</h3>
          </div>
        </div>
      </div>

<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-transparent border-b">
    <div class="container mx-auto px-4">
      <div class="flex justify-between">
        <div class="pr-14 py-8 lg:flex items-center lg:border-r">
          <a class="inline-block text-xl text-white font-medium font-heading" href="#">
            <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
          </a>
        </div>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden self-center">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="6" width="24" height="2" fill="white"></rect><rect y="11" width="24" height="2" fill="white"></rect><rect y="16" width="24" height="2" fill="white"></rect></svg>
        </button>
        <div class="hidden lg:block py-8 lg:absolute lg:top-1/2 lg:left-1/2 lg:transform lg:-translate-y-1/2 lg:-translate-x-1/2">
          <ul class="flex justify-center">
            <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">About</a></li>
            <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">Company</a></li>
            <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">Services</a></li>
            <li><a class="text-gray-500 hover:text-gray-400" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="hidden lg:flex items-center pl-16 border-l">
          <div class="flex items-center">
            <a class="inline-block text-sm text-white hover:underline font-heading" href="#">Sign In</a>
            <span class="mx-2 text-white">/</span>

<div class="fixed top-0 left-0 right-0 pb-8 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="max-w-xl mx-auto px-4">
    <div class="py-10 px-8 md:px-16 border bg-black">
      <h3 class="mb-4 text-lg text-white font-heading">Cookie Policy</h3>
      <p class="mb-8 text-sm text-gray-500">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the ‘how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
      <div class="flex flex-wrap justify-center md:justify-start items-center">
        <a x-on:click.prevent="open=false" class="inline-flex w-full md:w-auto mb-4 md:mb-0 md:mr-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
          <svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
          </svg>
          <span class="text-sm font-heading">Accept</span>
        </a>
        <a x-on:click.prevent="open=false" class="inline-flex items-center text-white hover:underline" href="#">
          <span class="mr-2 text-sm font-heading">Allow</span>
          <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

<section class="py-20 bg-black overflow-x-hidden">
  <div class="container mx-auto px-4">
    <div class="mb-8 max-w-xl mx-auto text-center">
      <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
      <h2 class="mt-6 text-2xl text-white uppercase font-heading">Lorem ipsum dolor sit amet consectutar</h2>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4">
        <div class="relative h-64 w-full flex items-center justify-center">
          <img class="absolute top-0 left-0 h-full w-full object-contain transform md:scale-125" src="boldui-assets/elements/ellipse.svg" alt="">
          <img class="h-6" src="boldui-assets/brands/logo-clouds/slack-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4">
        <div class="relative h-64 w-full flex items-center justify-center">
          <img class="absolute top-0 left-0 h-full w-full object-contain transform md:scale-125" src="boldui-assets/elements/ellipse.svg" alt="">
          <img class="h-6" src="boldui-assets/brands/logo-clouds/spotify-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4">
        <div class="relative h-64 w-full flex items-center justify-center">
          <img class="absolute top-0 left-0 h-full w-full object-contain transform md:scale-125" src="boldui-assets/elements/ellipse.svg" alt="">
          <img class="h-6" src="boldui-assets/brands/logo-clouds/dropbox-gray.svg" alt="">
        </div>

<section class="pt-24 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative z-10 max-w-xl mx-auto text-center">
      <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
      <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 class="flex flex-wrap items-center justify-center mb-20">
        <a class="inline-flex w-full md:w-auto mb-6 md:mb-0 md:mr-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
          <svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
          </svg>
          <span class="text-sm font-heading">Activate demo</span>
        </a>
        <a class="inline-flex items-center text-white hover:underline" href="#">
          <span class="mr-2 text-sm font-heading">Share with friends</span>
          <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="relative flex">
      <div class="absolute top-0 left-0 -ml-64 -mt-80 inline-block">
        <img class="w-full h-full object-contain" src="boldui-assets/elements/shadow-left-blue.svg" alt="">

<section class="py-20 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative h-screen bg-no-repeat bg-contain bg-center" style="background-image: url('boldui-assets/elements/text-logo-clouds.svg');">
      <div class="hidden md:flex items-center justify-center absolute z-10 top-0 right-0 w-64 lg:w-80 h-64 md:h-80 transform lg:-translate-x-1/2 mr-16 bg-no-repeat bg-contain" style="background-image: url('boldui-assets/elements/ellipse-dark.svg');">
        <img class="h-6 lg:h-8" src="boldui-assets/brands/logo-clouds/spotify.svg" alt="">
      </div>
      <div class="hidden md:flex items-center justify-center absolute z-10 top-1/2 right-0 w-64 lg:w-80 h-64 md:h-80 transform -translate-y-1/2 lg:mr-24 rotate-45 bg-no-repeat bg-contain" style="background-image: url('boldui-assets/elements/ellipse-dark.svg');">
        <img class="transform -rotate-45 h-6 lg:h-8" src="boldui-assets/brands/logo-clouds/netflix.svg" alt="">
      </div>
      <div class="hidden md:flex items-center justify-center absolute z-10 bottom-0 right-0 w-64 lg:w-80 h-64 md:h-80 transform lg:-translate-x-1/2 -rotate-90 -mb-12 mr-12 bg-no-repeat bg-contain" style="background-image: url('boldui-assets/elements/ellipse-dark.svg');">
        <img class="transform rotate-90 h-6 lg:h-8" src="boldui-assets/brands/logo-clouds/slack.svg" alt="">
      </div>
      <div class="hidden md:flex items-center justify-center absolute z-10 top-0 left-0 w-64 lg:w-80 h-64 md:h-80 transform lg:translate-x-1/2 ml-16 rotate-90 bg-no-repeat bg-contain" style="background-image: url('boldui-assets/elements/ellipse-dark.svg');">
        <img class="transform -rotate-90 h-6 lg:h-8" src="boldui-assets/brands/logo-clouds/dropbox.svg" alt="">
      </div>
      <div class="hidden md:flex items-center justify-center absolute z-10 top-1/2 left-0 w-64 lg:w-80 h-64 md:h-80 transform -translate-y-1/2 lg:ml-24 rotate-45 bg-no-repeat bg-contain" style="background-image: url('boldui-assets/elements/ellipse-dark.svg');">
        <img class="transform -rotate-45 h-6 lg:h-8" src="boldui-assets/brands/logo-clouds/amazon.svg" alt="">
      </div>
      <div class="hidden md:flex items-center justify-center absolute z-10 bottom-0 left-0 w-64 lg:w-80 h-64 md:h-80 transform lg:translate-x-1/2 -mb-12 ml-12 bg-no-repeat bg-contain" style="background-image: url('boldui-assets/elements/ellipse-dark.svg');">
        <img class="h-6 lg:h-8" src="boldui-assets/brands/logo-clouds/stripe.svg" alt="">
      </div>
      <div class="relative flex w-full h-full items-center justify-center">
        <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
        <div class="max-w-xs px-10 lg:px-0 text-center">

<section class="relative bg-black" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="md:absolute md:top-0 md:right-0 w-full md:w-1/2 lg:w-2/5 h-64 md:h-full flex items-end bg-cover bg-no-repeat" style="background-image: url('boldui-assets/images/placeholder-right.png'); background-position: center;">
    <div class="flex w-full items-center justify-center pb-20">
      <div class="inline-flex mr-10 items-center">
        <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="w-3 h-3 mr-6 bg-blue-500 rounded-full" :class="{ 'bg-blue-500': activeSlide==0, 'bg-gray-600': activeSlide!=0 }"></button>
        <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="w-3 h-3 mr-6 bg-gray-600 rounded-full" :class="{ 'bg-blue-500': activeSlide==1, 'bg-gray-600': activeSlide!=1 }"></button>
        <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="w-3 h-3 mr-6 bg-gray-600 rounded-full" :class="{ 'bg-blue-500': activeSlide==2, 'bg-gray-600': activeSlide!=2 }"></button>
        <button x-on:click="activeSlide = 3, slideWidth = $refs['slide4'].offsetWidth * 3" class="w-3 h-3 bg-gray-600 rounded-full" :class="{ 'bg-blue-500': activeSlide==3, 'bg-gray-600': activeSlide!=3 }"></button>
      </div>
      <div class="inline-flex items-center">
        <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block mr-6 py-6 px-6 bg-black hover:bg-gray-900 rounded-full transform duration-300">
          <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.99 3.85468H16V5.93801H3.99V9.06301L0 4.89634L3.99 0.729675V3.85468Z" fill="#FFEC3E"></path>
          </svg>
        </button>
        <button x-on:click="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block py-6 px-6 bg-black hover:bg-gray-900 rounded-full transform duration-300">
          <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.85468H0V5.93801H12.01V9.06301L16 4.89634L12.01 0.729675V3.85468Z" fill="#FFEC3E"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="container mx-auto px-4">

<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-transparent border-b">
    <div class="container mx-auto px-4">
      <div class="flex justify-between">
        <div class="pr-14 py-8 lg:border-r">
          <a class="inline-block text-xl text-white font-medium font-heading" href="#">
            <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
          </a>
        </div>
        <div class="flex items-center pl-16 py-8 lg:border-l">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="6" width="24" height="2" fill="white"></rect><rect y="11" width="24" height="2" fill="white"></rect><rect y="16" width="24" height="2" fill="white"></rect></svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-8 px-10 w-full h-full bg-black border-r overflow-y-auto">
      <a class="inline-block text-xl text-white font-medium font-heading mb-16 md:mb-32" href="#">
        <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
      </a>
      <ul class="mb-32">

<section class="py-24 bg-black overflow-x-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-2xl mx-auto">
      <ul>
        <li class="mb-6">
          <button class="block" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
            <div class="flex justify-between items-center">
              <h1 class="text-lg text-left" :class="{ 'text-white': !accordion, 'text-yellow-500': accordion }">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h1>
              <div class="flex-shrink-0 w-24 h-24 flex items-center justify-center bg-contain bg-no-repeat" style="background-image: url('boldui-assets/elements/ellipse.svg');">
                <span :class="{'rotate-180 text-gray-500': accordion, 'rotate-0 text-yellow-500': !accordion }" class="inline-block transform text-yellow-500">
                  <svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.35986 12.1499L3.35986 0.139893L5.4432 0.139893L5.4432 12.1499L8.5682 12.1499L4.40153 16.1399L0.234863 12.1499L3.35986 12.1499Z" fill="currentColor"></path>
                  </svg>
                </span>
              </div>
            </div>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="pr-10 text-gray-500 text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
            </div>
          </button>
        </li>
        <li class="mb-6">
            <button class="block" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
                <div class="flex justify-between items-center">

<section class="py-24 bg-black overflow-x-hidden">
  <div class="container mx-auto px-4">
    <div class="relative max-w-xl mx-auto">
      <span class="block lg:absolute top-0 left-0 lg:-ml-24 mb-8 lg:mb-0">
        <svg width="39" height="26" viewBox="0 0 39 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M31.2148 25.8994C29.9727 25.8994 28.8242 25.7002 27.7695 25.3018C26.7383 24.9033 25.8477 24.3291 25.0977 23.5791C24.3477 22.8057 23.7617 21.8799 23.3398 20.8018C22.918 19.7236 22.707 18.5049 22.707 17.1455C22.707 14.0752 23.75 11.1455 25.8359 8.35645C27.9453 5.54395 31.0039 3.04785 35.0117 0.868164L38.8789 6.3877C37.8242 6.9502 36.8867 7.50098 36.0664 8.04004C35.2695 8.5791 34.5664 9.12988 33.957 9.69238C33.3711 10.2549 32.8555 10.8408 32.4102 11.4502C31.9883 12.0361 31.6016 12.6689 31.25 13.3486C32.3984 13.3486 33.4297 13.5127 34.3438 13.8408C35.2812 14.1689 36.0781 14.626 36.7344 15.2119C37.4141 15.7744 37.9297 16.4424 38.2812 17.2158C38.6562 17.9658 38.8438 18.7744 38.8438 19.6416C38.8438 20.5088 38.6562 21.3291 38.2812 22.1025C37.9297 22.8525 37.4141 23.5088 36.7344 24.0713C36.0781 24.6338 35.2812 25.0791 34.3438 25.4072C33.4062 25.7354 32.3633 25.8994 31.2148 25.8994ZM9.34766 25.8994C8.10547 25.8994 6.95703 25.7002 5.90234 25.3018C4.87109 24.9033 3.98047 24.3291 3.23047 23.5791C2.48047 22.8057 1.89453 21.8799 1.47266 20.8018C1.05078 19.7236 0.839844 18.5049 0.839844 17.1455C0.839844 14.0752 1.88281 11.1455 3.96875 8.35645C6.07812 5.54395 9.13672 3.04785 13.1445 0.868164L17.0117 6.3877C15.957 6.9502 15.0195 7.50098 14.1992 8.04004C13.4023 8.5791 12.6992 9.12988 12.0898 9.69238C11.5039 10.2549 10.9883 10.8408 10.543 11.4502C10.1211 12.0361 9.73438 12.6689 9.38281 13.3486C10.5312 13.3486 11.5625 13.5127 12.4766 13.8408C13.4141 14.1689 14.2109 14.626 14.8672 15.2119C15.5469 15.7744 16.0625 16.4424 16.4141 17.2158C16.7891 17.9658 16.9766 18.7744 16.9766 19.6416C16.9766 20.5088 16.7891 21.3291 16.4141 22.1025C16.0625 22.8525 15.5469 23.5088 14.8672 24.0713C14.2109 24.6338 13.4141 25.0791 12.4766 25.4072C11.5391 25.7354 10.4961 25.8994 9.34766 25.8994Z" fill="#FFEC3E"></path>
        </svg>
      </span>
      <div>
        <p class="mb-8 text-xl text-gray-500">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the “excessive” amount of work behind building something new.</p>
        <div class="flex items-center">
          <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">CEO &amp; Founder at Wireframes</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-transparent border-b">
    <div class="container mx-auto px-4">
      <div class="flex justify-between">
        <div class="pr-14 flex items-center lg:border-r">
          <a class="inline-block text-xl text-white font-medium font-heading" href="#">
            <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
          </a>
        </div>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden self-center py-8">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="6" width="24" height="2" fill="white"></rect><rect y="11" width="24" height="2" fill="white"></rect><rect y="16" width="24" height="2" fill="white"></rect></svg>
        </button>
        <div class="hidden lg:flex items-center py-8 pl-16 border-l">
          <div class="flex items-center">
            <a class="inline-block text-sm text-white hover:underline font-heading" href="#">Sign In</a>
            <span class="mx-2 text-white">/</span>
            <a class="inline-block text-sm text-white hover:underline font-heading" href="#">Support</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>

<section class="bg-black">
  <div class="flex flex-wrap">
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-b lg:border-b-0 border-r">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/slack.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-b lg:border-b-0 border-r">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/spotify.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-b lg:border-b-0 border-r">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/dropbox.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-b md:border-b-0 md:border-r">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/stripe.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-r">
      <div class="flex h-full items-center justify-center">

<section class="bg-black">
  <div class="flex flex-wrap">
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-b lg:border-b-0 border-r">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/slack-gray.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-b lg:border-b-0 border-r">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/spotify-gray.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-b lg:border-b-0 border-r">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/dropbox-gray.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-b md:border-b-0 md:border-r">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/stripe-gray.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border-r">
      <div class="flex h-full items-center justify-center">

<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-transparent border-b">
    <div class="container mx-auto px-4">
      <div class="flex justify-between">
        <div class="pr-14 py-8 lg:border-r">
          <a class="inline-block text-xl text-white font-medium font-heading" href="#">
            <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
          </a>
        </div>
        <div class="hidden lg:block py-8 lg:absolute lg:top-1/2 lg:left-1/2 lg:transform lg:-translate-y-1/2 lg:-translate-x-1/2">
          <ul class="flex justify-center">
            <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">About</a></li>
            <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">Company</a></li>
            <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">Services</a></li>
            <li><a class="text-gray-500 hover:text-gray-400" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="hidden md:flex ml-auto lg:ml-0 mr-8 lg:mr-0 items-center pl-16">
          <div class="flex px-6 py-3 bg-black rounded-full border border-white">
            <input class="w-full pr-4 bg-transparent text-sm text-white placeholder-white outline-none" type="text" placeholder="Search">
            <button class="flex items-center text-yellow-300 hover:text-yellow-400">
              <span class="mr-2">Go</span>
              <svg class="mt-1" width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.01 3H0V5H12.01V8L16 4L12.01 0V3Z" fill="currentColor"></path>

<section class="py-16 bg-black overflow-x-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-2xl mx-auto">
      <h2 class="mb-8 text-2xl text-white font-heading">When I was a developer, I often had a hundred questions when</h2>
      <p class="mb-16 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>
    </div>
  </div>
  <img class="h-72 md:h-128 w-full mb-16 object-cover" src="boldui-assets/images/men5.png" alt="">
  <div class="container mx-auto px-4">
    <div class="max-w-2xl mx-auto">
      <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>
</section>

<section class="pt-24 bg-black overflow-x-hidden">
  <div class="container mx-auto px-4 mb-16">
    <div class="max-w-xl mx-auto text-center">
      <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
      <h2 class="mt-6 text-2xl text-white uppercase font-heading">Lorem ipsum dolor sit amet consectutar</h2>
    </div>
  </div>
  <div class="flex flex-wrap">
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/slack.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border border-l-0">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/spotify.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border border-l-0">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/dropbox.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border border-l-0">

<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-transparent border-b">
    <div class="container mx-auto px-4">
      <div class="flex justify-between">
        <div class="hidden lg:block pr-16 py-8 lg:border-r">
          <a class="flex items-center text-white hover:underline" href="#">
            <span class="mr-2">Search</span>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
            </svg>
          </a>
        </div>
        <div class="flex items-center lg:absolute lg:top-1/2 lg:left-1/2 lg:transform lg:-translate-y-1/2 lg:-translate-x-1/2">
          <a class="inline-block text-xl text-white font-medium font-heading" href="#">
            <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
          </a>
        </div>
        <div class="flex items-center pl-16 py-8 lg:border-l">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="6" width="24" height="2" fill="white"></rect><rect y="11" width="24" height="2" fill="white"></rect><rect y="16" width="24" height="2" fill="white"></rect></svg>
          </button>
        </div>
      </div>
    </div>

<section class="pt-24 bg-black">
  <div class="container mx-auto px-4 mb-16">
    <div class="max-w-xl mx-auto text-center">
      <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
      <h2 class="mt-6 text-2xl text-white uppercase font-heading">Lorem ipsum dolor sit amet consectutar</h2>
    </div>
  </div>
  <div class="flex flex-wrap">
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/slack-gray.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border border-l-0">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/spotify-gray.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border border-l-0">
      <div class="flex h-full items-center justify-center">
        <img class="h-7" src="boldui-assets/brands/logo-clouds/dropbox-gray.svg" alt="">
      </div>
    </div>
    <div class="w-1/2 md:w-1/3 lg:w-1/6 h-40 md:h-60 border border-l-0">

<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-transparent border-b">
    <div class="container mx-auto px-4">
      <div class="flex justify-between">
        <div class="pr-14 py-8 lg:border-r">
          <a class="inline-block text-xl text-white font-medium font-heading" href="#">
            <img class="h-8" width="auto" src="boldui-assets/logo/logo-boldui-light.svg" alt="">
          </a>
        </div>
        <div class="hidden lg:block py-8 lg:absolute lg:top-1/2 lg:left-1/2 lg:transform lg:-translate-y-1/2 lg:-translate-x-1/2">
          <ul class="flex justify-center">
            <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">About</a></li>
            <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">Company</a></li>
            <li class="mr-12"><a class="text-gray-500 hover:text-gray-400" href="#">Services</a></li>
            <li><a class="text-gray-500 hover:text-gray-400" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="hidden lg:flex ml-auto items-center">
          <a class="inline-flex mr-8 items-center text-white hover:underline" href="#">
            <span class="mr-2 text-xs font-heading">Sign In</span>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
            </svg>
          </a>