UI Components in Boldui library

Framework

UI Library

Components

Tailwind Component #41

Tailwind CSS

BoldUI

<section class="relative bg-black overflow-x-hidden">
  <div class="hidden md:block absolute top-0 left-0 bottom-0 w-1/5 md:w-1/3 lg:w-1/2">
    <img class="h-full w full object-cover" src="boldui-assets/images/placeholder5.png" alt="">
  </div>
  <div class="container mx-auto px-4">
    <div class="flex -mx-4">
      <div class="w-full md:w-2/3 lg:w-1/2 px-4 ml-auto py-32">
        <div class="max-w-xl ml-auto">
          <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
          <h2 class="mb-10 mt-6 text-2xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
          <ul class="mb-12">
            <li class="flex flex-wrap items-center mb-6">
              <div class="w-full md:w-auto">
                <div class="relative flex mr-4 items-center justify-center h-20 w-24">
                  <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/ellipse.svg" alt="">
                  <span class="text-yellow-300">1</span>
                </div>
              </div>
              <div class="w-full md:w-2/3">
                <p class="text-lg text-gray-500">Fairly assigning daily tasks to your employees take a big step forward in growing.</p>
              </div>
            </li>
            <li class="flex flex-wrap items-center mb-6">
              <div class="w-full md:w-auto">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-screen feature section with eye photo, numbered steps, and CTA buttons

A dark split-screen marketing section with a full-height close-up eye photograph on the left and a text column on the right containing a blue eyebrow label, bold uppercase heading, four numbered descriptive steps, and a yellow primary button alongside a secondary text link. The layout presents a brand-focused call to action with a clear hierarchy.

Tailwind Component #42

Tailwind CSS

BoldUI

<section class="pb-24 bg-black overflow-hidden">
  <div class="flex flex-wrap">
    <div class="w-full">
      <div class="h-full py-32 md:py-52 bg-cover bg-center bg-no-repeat" style="background-image: url('boldui-assets/images/men4-light.png');">
        <div class="container mx-auto px-4">
          <div class="flex flex-wrap items-center justify-between">
            <div class="max-w-xl mb-6 lg:mb-0">
              <span class="font-semibold text-xs text-blue-500">10 jun 2021 | 19:40</span>
              <h2 class="mt-2 text-2xl text-white font-heading">Take quick action that increases your brand's regular profit.</h2>
            </div>
            <a class="inline-flex w-full md:w-auto items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
              <svg class="text-black 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="currentColor"></path>
              </svg>
              <span class="text-sm font-medium font-heading">Read article</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/3 mb-24 lg:mb-0">
      <a class="block group" href="#">
        <img class="h-80 md:h-112 w-full object-cover" src="boldui-assets/images/men2.png" alt="">
        <div class="relative -mt-20 px-10">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Hero Banner with Three-Card Article Grid

A dark-themed article showcase with a full-width hero image featuring a headline, date, and yellow 'Read article' button, above a three-column grid of image cards with dates, headings, and placeholder body text. The layout is a stacked hero followed by an evenly divided grid.

Tailwind Component #43

Tailwind CSS

BoldUI

<section class="py-20 bg-black overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap lg:flex-nowrap justify-center">
      <div class="hidden lg:block flex-shrink-0 w-auto">
        <img class="w-64 h-64 rounded-circle" src="boldui-assets/images/team-circle2.png" alt="">
      </div>
      <div class="flex-shrink-0 w-full lg:max-w-5xl mx-auto lg:px-20">
        <div class="flex flex-wrap items-center -mx-4">
          <div class="w-full md:w-2/5 px-4 mb-6 md:mb-0">
            <img class="w-40 md:w-64 h-40 md:h-64 mx-auto rounded-circle" src="boldui-assets/images/team-circle.png" alt="">
          </div>
          <div class="realtive w-full md:w-3/5 px-4">
            <img class="absolute top-0 md:bottom-0 right-0" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                    <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                        <p class="mb-10 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 x-ref="slide2" class="flex-shrink-0 w-full p-3">
                        <p class="mb-10 text-gray-500">Unlock the potential of your business with innovative marketing techniques. Discover the strategies that will elevate your brand and captivate your audience.</p>
                    </div>
                    <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                        <p class="mb-10 text-gray-500">Transform your brand's voice and engage your audience with compelling content. Learn the art of storytelling and take your business to new heights.</p>
                    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Testimonial Carousel with Circular Avatars and Prev/Next Arrows

A dark testimonial slider showing circular portrait avatars in a horizontal row with a centered quote and role label, plus round previous and next arrow buttons. The layout is a horizontal row of avatars beside a text block, and the arrows suggest carousel navigation.

Tailwind Component #44

Tailwind CSS

BoldUI

<section class="md:pt-24 bg-black overflow-hidden">
  <div class="h-40 lg:h-80 overflow-hidden">
    <div class="relative w-full">
      <div class="absolute top-0 left-0 -ml-24 -mt-12 inline-block">
        <img class="w-full h-full object-contain" src="boldui-assets/elements/shadow-left-blue.svg" alt="">
      </div>
      <div class="absolute top-0 right-0 -mr-24 -mt-12 inline-block">
        <img class="w-full h-full object-contain" src="boldui-assets/elements/shadow-right.svg" alt="">
      </div>
    </div>
    <div class="container mx-auto px-4">
      <div class="relative flex -mx-4">
        <div class="w-full lg:w-1/3 px-4">
          <img class="w-full h-64 md:h-128 object-contain" src="boldui-assets/images/phone1.png" alt="">
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <img class="w-full h-64 md:h-128 object-contain" src="boldui-assets/images/phone2.png" alt="">
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <img class="w-full h-64 md:h-128 object-contain" src="boldui-assets/images/phone3.png" alt="">
        </div>
      </div>
    </div>
  </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark App Showcase Section with Phone Mockups and App Store Badges

A dark marketing section promoting a mobile app, with three phone device mockups showing app screenshots above a centered heading, supporting text, and App Store and Google Play download badges. The heading uses a bold display typeface and the layout is a centered stack.

Tailwind Component #45

Tailwind CSS

BoldUI

<div class="fixed top-0 left-0 right-0 pt-20 z-50">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto">
      <div class="p-8 md:p-16 bg-black border">
        <h2 class="mb-4 text-2xl text-white font-heading">Do you want to delete your account?</h2>
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex flex-wrap justify-center md:justify-start">
          <a class="inline-flex justify-center w-full md:w-auto mb-6 lg:mb-0 md:mr-8 items-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">Yes</span>
          </a>
          <a class="inline-flex items-center text-white hover:underline" href="#">
            <span class="mr-2 text-sm font-heading">No, thanks</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>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Confirmation Dialog for Account Deletion

A black confirmation card asking whether the user wants to delete their account, with a bold white heading, gray supporting text, a yellow pill-shaped "Yes" button with an arrow, and a text-style "No, thanks" link. It is a compact, centered prompt intended to confirm a destructive action.

Tailwind Component #46

Tailwind CSS

BoldUI

<section class="bg-black overflow-hidden">
  <div class="container mx-auto px-4 mb-12 md:mb-0">
    <div class="flex flex-wrap items-center">
      <div class="w-full md:w-4/6 mb-8 md:mb-0 bg-black border-b md:border-b-0 md:border-r">
        <div class="py-24">
          <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="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-10">
              <img class="h-24" src="boldui-assets/images/team6.png" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Blog Article Layout with Author Byline and Next Article Link

A dark-themed blog article page with breadcrumb navigation, a bold uppercase headline, author avatar and name, body text in two paragraphs, and a 'Read next article' link in a right-side panel. A full-width photograph appears below the article content.

Tailwind Component #47

Tailwind CSS

BoldUI

<section class="py-20 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/4 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" 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 md:w-1/2 lg:w-1/4 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" 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 md:w-1/2 lg:w-1/4 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" src="boldui-assets/elements/ellipse.svg" alt="">
          <img class="h-6" src="boldui-assets/brands/logo-clouds/dropbox-gray.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 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" src="boldui-assets/elements/ellipse.svg" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tilted Oval Logo Strip with Slack, Spotify, Dropbox, and Stripe

A horizontal row of four tilted oval containers, each holding a grayscale brand logo (Slack, Spotify, Dropbox, Stripe) on a dark background. It functions as a trust-building logo cloud showing customer or partner companies.

Tailwind Component #48

Tailwind CSS

BoldUI

<section class="py-20 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="relative w-full lg: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>
      <div class="relative w-full lg: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-light2.png" alt="">
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Three-Item Feature Row with Yellow Icons and Tilted Image Ellipses

A horizontal row of three feature items on a black background, each with a yellow icon (shield with check, key, checklist) over a dim tilted elliptical photo and a short bold heading. The layout presents features as a compact strip without visible body text, buttons, or navigation.

Tailwind Component #49

Tailwind CSS

BoldUI

<section class="py-20 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative max-w-xs md:max-w-xl py-10 md:py-40 mx-auto">
      <img class="absolute top-0 left-0 w-full h-full object-contain" src="boldui-assets/images/group.png" alt="">
      <img class="absolute inset-0 w-full h-full" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
      <div class="relative flex flex-wrap">
        <div class="w-1/2 mb-8 md:mb-16">
          <div class="text-center">
            <span class="inline-block mx-auto">
              <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="md:text-xl text-white font-heading">Security in saving</h3>
          </div>
        </div>
        <div class="w-1/2 mb-8 md:mb-16">
          <div class="text-center">
            <span class="inline-block mx-auto">
              <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.89084 3.01913C-0.963286 6.87325 -0.963286 13.1683 2.89084 17.0224C5.63154 19.7632 9.74261 20.6624 13.3398 19.2921L15.7807 21.733C15.9948 21.9472 16.2946 22.0756 16.5944 22.0756H19.0781V24.5594C19.0781 24.8592 19.2066 25.1589 19.4207 25.373L20.6198 26.5721C20.8339 26.7862 21.1337 26.9147 21.4334 26.9147H23.9172V29.3985C23.9172 29.6982 24.0457 29.998 24.2598 30.2121L25.7158 31.6681C25.9299 31.8822 26.2297 32.0107 26.4866 32.0107L30.7262 32.1392C31.0259 32.1392 31.3685 32.0535 31.6255 31.7966C31.8396 31.5825 31.968 31.2399 31.968 30.8973L31.8396 26.6577C31.8396 26.358 31.6683 26.101 31.497 25.8869L19.121 13.5537C20.4485 9.91373 19.592 5.84549 16.8513 3.10478C13.04 -0.834988 6.74496 -0.834988 2.89084 3.01913ZM15.0527 8.71467L10.1708 13.8535C9.9139 14.1533 9.52849 14.3246 9.10025 14.3246C8.67202 14.3246 8.32943 14.1533 8.02966 13.8535L5.33178 10.9843C4.77507 10.3848 4.8179 9.48549 5.3746 8.92879C5.97413 8.37208 6.87343 8.4149 7.43013 8.97161L9.10025 10.7274L12.9544 6.70196C13.5111 6.10243 14.4532 6.10243 15.0099 6.65914C15.5666 7.21584 15.6094 8.11514 15.0527 8.71467Z" fill="#FFEC3E"></path>
              </svg>
            </span>
            <h3 class="md:text-xl text-white font-heading">Change of access</h3>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #50

Tailwind CSS

BoldUI

<section class="relative py-32 bg-black overflow-x-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-16">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-6 lg:mb-0 text-center">
        <div class="relative flex items-center h-52 w-52 mx-auto">
          <span class="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
            <svg width="25" height="32" viewBox="0 0 25 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24.9007 7.36111C24.9028 7.36111 24.9045 7.3594 24.9045 7.35729C24.9046 6.68174 24.9313 5.99861 24.9045 5.32309C24.9045 5.31544 24.9045 5.30779 24.9045 5.30015C24.9045 4.94454 24.6637 4.67306 24.3425 4.56217C23.0195 4.10333 21.6927 3.64449 20.3697 3.18565C18.2819 2.46297 16.198 1.73647 14.1103 1.0138C13.6476 0.853201 13.1888 0.669665 12.7185 0.532012C12.4852 0.463186 12.3246 0.516717 12.122 0.585543C11.8849 0.669664 11.644 0.749962 11.4069 0.834083C9.40715 1.52617 7.41119 2.21826 5.41141 2.91034C3.84752 3.45331 2.28746 3.99245 0.723568 4.53541C0.696802 4.54306 0.67386 4.55453 0.647094 4.56217C0.325905 4.67306 0.0850124 4.94837 0.0850124 5.30015V12.3854C0.0850124 13.8767 0.0811887 15.3679 0.0850124 16.8591C0.0888361 18.1248 0.31061 19.3981 0.731215 20.5911C1.59154 23.0497 3.15543 25.2101 5.01757 27.011C6.85676 28.789 9.00949 30.2764 11.319 31.37C11.5828 31.4924 11.8467 31.6109 12.1105 31.7256C12.1247 31.7327 12.1422 31.7398 12.1569 31.747C12.1577 31.7474 12.1626 31.7486 12.1636 31.7486C12.1637 31.7486 12.1641 31.7486 12.1642 31.7486C12.2024 31.7639 12.2444 31.7792 12.2826 31.7906C12.4649 31.84 12.666 31.8139 12.8673 31.7311C12.87 31.73 12.8743 31.7291 12.8767 31.7275C12.8791 31.7259 12.8804 31.7251 12.883 31.7239C15.214 30.7337 17.3768 29.3349 19.2723 27.6572C21.1841 25.9633 22.8703 23.9024 23.8798 21.5432C24.3998 20.3234 24.744 19.0616 24.8587 17.7386C24.9198 17.0312 24.8969 16.3162 24.8969 15.605V7.36494C24.8969 7.36282 24.8986 7.36111 24.9007 7.36111ZM19.2837 12.0566C18.9664 12.374 18.649 12.6913 18.3316 13.0087C16.9551 14.3852 15.5824 15.7579 14.2059 17.1344C13.3379 18.0024 12.4661 18.8742 11.5981 19.7422C11.1584 20.1819 10.4128 20.1819 9.97688 19.7422C9.80099 19.5663 9.6251 19.3904 9.44921 19.2145C8.21799 17.9833 6.98676 16.7521 5.75171 15.517C5.29669 15.062 5.33111 14.3546 5.75171 13.8958C6.17232 13.4408 6.94853 13.4714 7.37295 13.8958C7.54884 14.0717 7.72473 14.2514 7.90062 14.4273C8.81194 15.3386 9.72327 16.2568 10.6346 17.1688C10.7148 17.2491 10.8449 17.2491 10.9252 17.1689C12.3017 15.7923 13.6744 14.4158 15.0509 13.0393C15.9189 12.1713 16.7907 11.2995 17.6587 10.4315C18.1137 9.97651 18.8249 10.0109 19.2799 10.4315C19.7388 10.8521 19.7082 11.6322 19.2837 12.0566Z" fill="#FFEC3E"></path>
            </svg>
          </span>
          <img class="absolute top-0 left-0 transform rotate-90" src="boldui-assets/elements/ellipse.svg" alt="">
          <div class="clip-path transform rotate-45">
            <img class="w-full h-full" src="boldui-assets/images/placeholder-light1.png" alt="">
          </div>
        </div>
        <div class="md:max-w-xs mx-auto lg:px-10">
          <h3 class="mb-4 text-xl text-white font-heading">Security in saving</h3>
          <p class="text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-6 lg:mb-0 text-center">
        <div class="relative flex items-center h-52 w-52 mx-auto">
          <span class="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #51

Tailwind CSS

BoldUI

<section class="py-20 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative max-w-xl mx-auto text-center mb-12">
      <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-96" src="boldui-assets/elements/ellipse.svg" alt="">
      <ul class="relative flex items-center justify-center mb-10">
        <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="mb-4 text-3xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
      <div class="flex items-center justify-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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #52

Tailwind CSS

BoldUI

<section class="py-24 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="mb-10 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">Take quick action that increases your brand's regular profit.</h2>
    </div>
  </div>
  <div class="relative flex flex-wrap -mx-4 mb-20">
    <img class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
    <div class="w-full md:w-1/2 lg:w-1/4 px-4">
      <div class="text-center">
        <div class="relative h-64 md:h-80 flex items-center justify-center">
          <img class="absolute top-0 left-1/2 transform -translate-x-1/2 h-full" src="boldui-assets/elements/ellipse-dark.svg" alt="">
          <div class="relative">
            <h3 class="text-6xl md:text-7xl text-yellow-500 font-heading text-stroke">60</h3>
            <p class="text-lg text-gray-500 font-heading">%</p>
          </div>
        </div>
        <p class="md:px-20 text-sm font-semibold uppercase text-gray-500">Market size</p>
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/4 px-4">
      <div class="text-center">
        <div class="relative h-64 md:h-80 flex items-center justify-center">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #53

Tailwind CSS

BoldUI

<section class="pb-24 relative bg-black overflow-hidden">
  <div class="absolute top-0 left-0 w-full">
    <img class="mx-auto" src="boldui-assets/elements/shadow-blue.svg" alt="">
  </div>
  <div class="relative flex h-40 md:h-80 mb-20 md:mb-32">
    <div class="w-1/2 md:w-2/3">
      <img class="h-full w-full object-cover" src="boldui-assets/images/placeholder-banner.png" alt="">
    </div>
    <div class="w-1/2 md:w-1/3">
      <img class="h-full w-full object-cover" src="boldui-assets/images/placeholder-banner2.png" alt="">
    </div>
  </div>
  <div class="relative container mx-auto px-4">
    <div class="max-w-2xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-3/5 px-4 mb-20 md:mb-0">
          <h2 class="mb-6 text-3xl uppercase text-white font-heading">Increase 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="w-full md:w-2/5 px-4 md:text-right">
          <div class="relative inline-block md:ml-auto">
            <img class="absolute top-1/2 left-1/2 transform -translate-y-1/2" src="boldui-assets/elements/circle-text.svg" alt="">
            <a class="inline-flex items-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">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #54

Tailwind CSS

BoldUI

<section class="relative bg-black overflow-hidden">
  <div class="absolute top-0 right-0 w-2/3 md:w-1/2 lg:w-3/5 ml-auto h-64 md:h-full">
    <img class="rounded-l-full w-full h-full object-cover" src="boldui-assets/images/photo-women.png" alt="">
  </div>
  <div class="container mx-auto px-4">
    <div class="w-full md:w-1/2 lg:w-1/3 pb-32 pt-80 md:pt-32 lg:py-52">
      <h2 class="mb-8 text-2xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
      <ul class="mb-8">
        <li class="flex items-center mb-4">
          <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
          </svg>
          <span class="text-gray-50">Complete documentation</span>
        </li>
        <li class="flex items-center mb-4">
          <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
          </svg>
          <span class="text-gray-50">100GB cloud storage</span>
        </li>
        <li class="flex items-center">
          <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
          </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #55

Tailwind CSS

BoldUI

<section class="relative bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="lg:max-w-md py-24">
      <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-6 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>
      <ul class="mb-8">
        <li class="flex items-center">
          <div class="relative h-24 w-24 flex items-center justify-center">
            <img class="absolute h-full w-full top-0 left-0" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="inline-block">
              <svg class="h-6" width="21" height="26" viewBox="0 0 21 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.9867 5.51793C20.9885 5.51793 20.9899 5.51648 20.9899 5.51469C20.99 4.97545 21.0125 4.43014 20.9899 3.89092C20.9899 3.88481 20.9899 3.87871 20.9899 3.8726C20.9899 3.58872 20.7862 3.37199 20.5146 3.28346C19.3958 2.91716 18.2738 2.55085 17.155 2.18455C15.3896 1.60762 13.6273 1.02763 11.8618 0.450704C11.4706 0.322497 11.0826 0.175975 10.6848 0.0660833C10.4876 0.0111375 10.3518 0.0538729 10.1804 0.108819C9.97995 0.175975 9.77624 0.240078 9.57576 0.307234C7.88466 0.859744 6.19678 1.41225 4.50567 1.96476C3.18318 2.39823 1.86392 2.82863 0.541428 3.2621C0.518794 3.2682 0.499393 3.27736 0.476759 3.28346C0.205147 3.37199 0.0014371 3.59177 0.0014371 3.8726V9.52897C0.0014371 10.7195 -0.00179638 11.91 0.0014371 13.1004C0.00467058 14.1108 0.192213 15.1273 0.547895 16.0797C1.27543 18.0425 2.59792 19.7672 4.17262 21.2049C5.72793 22.6244 7.54837 23.8118 9.50139 24.6848C9.7245 24.7825 9.94761 24.8772 10.1707 24.9687C10.1827 24.9744 10.1975 24.9801 10.2099 24.9857C10.2106 24.986 10.2149 24.987 10.2156 24.987V24.987C10.2157 24.987 10.216 24.9871 10.2161 24.9871C10.2484 24.9993 10.2839 25.0115 10.3162 25.0206C10.4704 25.06 10.6405 25.0392 10.8108 24.9731C10.813 24.9722 10.8166 24.9715 10.8186 24.9703V24.9703C10.8207 24.969 10.8218 24.9683 10.824 24.9674C12.7952 24.1768 14.6241 23.0601 16.227 21.7208C17.8438 20.3685 19.2697 18.7232 20.1234 16.8398C20.5631 15.866 20.8541 14.8587 20.9511 13.8025C21.0029 13.2378 20.9835 12.667 20.9835 12.0992V5.52116C20.9835 5.51937 20.9849 5.51793 20.9867 5.51793V5.51793ZM16.2367 9.26645C15.9683 9.51981 15.7 9.77317 15.4316 10.0265C14.2675 11.1254 13.1067 12.2213 11.9427 13.3202C11.2087 14.0132 10.4714 14.7091 9.73744 15.4021C9.36559 15.7531 8.73506 15.7531 8.36644 15.4021C8.2177 15.2616 8.06896 15.1212 7.92022 14.9808C6.87904 13.9979 5.83786 13.015 4.79345 12.029C4.40867 11.6657 4.43777 11.101 4.79345 10.7347C5.14913 10.3715 5.80553 10.3959 6.16445 10.7347C6.31319 10.8751 6.46193 11.0186 6.61067 11.159C7.38132 11.8866 8.15197 12.6196 8.92263 13.3477C8.99158 13.4128 9.09937 13.4128 9.16835 13.3477V13.3477C10.3324 12.2488 11.4932 11.1499 12.6573 10.051C13.3913 9.35802 14.1285 8.66205 14.8625 7.96912C15.2473 7.60587 15.8487 7.63334 16.2335 7.96912C16.6215 8.3049 16.5956 8.92762 16.2367 9.26645Z" fill="#FFEC3E"></path>
              </svg>
            </span>
          </div>
          <p class="text-lg text-white font-heading">Security in saving</p>
        </li>
        <li class="flex items-center">
          <div class="relative h-24 w-24 flex items-center justify-center">
            <img class="absolute h-full w-full top-0 left-0" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="inline-block">
              <svg class="h-6" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.62503 2.56262C-0.0273523 5.21233 -0.0273523 9.54019 2.62503 12.1899C4.51116 14.0741 7.34036 14.6924 9.81592 13.7503L11.4958 15.4284C11.6431 15.5756 11.8494 15.664 12.0557 15.664H13.765V17.3715C13.765 17.5776 13.8534 17.7837 14.0008 17.9309L14.826 18.7553C14.9733 18.9025 15.1796 18.9908 15.3859 18.9908H17.0952V20.6984C17.0952 20.9045 17.1836 21.1106 17.331 21.2578L18.333 22.2588C18.4804 22.406 18.6866 22.4943 18.8635 22.4943L21.7811 22.5826C21.9874 22.5826 22.2232 22.5238 22.4 22.3471C22.5473 22.1999 22.6357 21.9644 22.6357 21.7288L22.5473 18.8142C22.5473 18.6081 22.4294 18.4314 22.3116 18.2842L13.7945 9.80516C14.7081 7.30266 14.1187 4.50574 12.2325 2.62151C9.60962 -0.087085 5.2774 -0.0870852 2.62503 2.56262ZM10.9948 6.4783L7.63507 10.0112C7.45825 10.2173 7.19301 10.3351 6.8983 10.3351C6.60359 10.3351 6.36783 10.2173 6.16153 10.0112L4.30486 8.03869C3.92174 7.62651 3.95121 7.00825 4.33434 6.62551C4.74693 6.24277 5.36582 6.27222 5.74894 6.65495L6.8983 7.86204L9.55068 5.09457C9.9338 4.68239 10.5822 4.68239 10.9653 5.06513C11.3484 5.44786 11.3779 6.06613 10.9948 6.4783Z" fill="#FFEC3E"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #56

Tailwind CSS

BoldUI

<section class="relative py-24 bg-black overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <img class="absolute top-0 left-1/2 transform -translate-x-1/2" src="boldui-assets/elements/shadow-team-light-blue.svg" alt="">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap justify-center items-center mb-24">
      <div class="flex-shrink-0 w-1/2 md:w-auto order-first">
        <div class="inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
          <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null">
            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99 3.13846H16V5.23077H3.99V8.36923L0 4.18462L3.99 0V3.13846Z" fill="#FFEC3E"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="w-full lg:w-auto max-w-xl text-center mx-auto">
        <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
        <h2 class="mt-6 text-2xl sm:text-3xl text-white uppercase font-heading">Phasellus tincidunt augue sit amet placerat</h2>
      </div>
      <div class="flex-shrink-0 w-1/2 md:w-auto order-first lg:order-last">
        <div class="inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
          <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1">
            <svg width="17" height="9" viewBox="0 0 17 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.9902 3.70731H0.980225V5.79962H12.9902V8.93808L16.9802 4.75346L12.9902 0.568848V3.70731Z" fill="#FFEC3E"></path>
            </svg>
          </button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #57

Tailwind CSS

BoldUI

<section class="py-20 bg-black overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 1, slideCount: 3 }" x-init="slideWidth = $refs.slide1.offsetWidth">
  <div class="container mx-auto px-4 mb-20 xl:mb-0">
    <div class="relative z-10 flex flex-wrap xl:flex-nowrap justify-center items-center mb-12">
      <div class="flex-shrink-0 order-first inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null">
          <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.99 3.13846H16V5.23077H3.99V8.36923L0 4.18462L3.99 0V3.13846Z" fill="#FFEC3E"></path>
          </svg>
        </button>
      </div>
      <div class="w-full xl:w-auto text-center mx-auto">
        <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
        <h2 class="mt-6 text-2xl text-white uppercase font-heading max-w-2xl mx-auto">Curabitur vehicula purus sit amet facilisis</h2>
      </div>
      <div class="flex-shrink-0 order-first xl:order-last inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1">
          <svg width="17" height="9" viewBox="0 0 17 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.9902 3.70731H0.980225V5.79962H12.9902V8.93808L16.9802 4.75346L12.9902 0.568848V3.70731Z" fill="#FFEC3E"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="mx-auto max-w-xl w-full">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #58

Tailwind CSS

BoldUI

<section class="relative bg-black overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex px-16 justify-between bg-transparent border-b">
    <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>
    <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:flex items-center pl-16 py-8 border-l">
      <div class="flex">
        <a class="inline-block text-white hover:underline font-heading" href="#">Sign In</a>
        <span class="mx-2 text-white">/</span>
        <a class="inline-block text-white hover:underline font-heading" href="#">Support</a>
      </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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #59

Tailwind CSS

BoldUI

<section class="py-24 bg-black overflow-hidden" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto text-center">
      <span class="text-lg text-blue-500 font-medium">Lorem ipsum</span>
      <h2 class="mt-6 mb-20 text-2xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full px-4 mb-6">
        <a class="block group" href="#">
          <div class="h-full px-8 md:px-24 py-32 md:py-52 bg-cover bg-center bg-no-repeat" style="background-image: url('boldui-assets/images/men4-light.png');">
            <div class="max-w-xl mb-6 lg:mb-0">
              <span class="font-semibold text-xs text-blue-500">10 jun 2021 | 19:40</span>
              <h2 class="mt-2 text-2xl text-white font-heading group-hover:underline">Take quick action that increases your brand's regular profit.</h2>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <a class="block group" href="#">
          <img class="h-80 md:h-112 w-full object-cover" src="boldui-assets/images/men2.png" alt="">
          <div class="relative -mt-20 px-10">
            <img class="absolute top-0 left-0 transform -mt-12 h-64" src="boldui-assets/elements/ellipse-dark.svg" alt="">
            <div class="relative">
              <div class="max-w-xs mb-5">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #60

Tailwind CSS

BoldUI

<section class="relative pt-24 bg-black overflow-hidden">
  <div class="container mx-auto px-4 mb-12 md:mb-24">
    <div class="max-w-2xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
          <h2 class="text-2xl text-white uppercase font-heading">Increase your brand's regular profit</h2>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <p class="text-xl 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>
    </div>
  </div>
  <div class="flex flex-wrap">
    <div class="relative w-full lg:w-1/2">
      <img class="absolute top-0 left-0 transform md:-mt-40" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
      <div class="py-12 md:py-24 px-6 md:px-20 border-t border-r">
        <div class="flex flex-wrap mb-10">
          <div class="w-full md:w-1/2 mb-6 md:mb-0">
            <h2 class="mb-10 text-5xl text-yellow-400 font-heading">Pro</h2>
            <ul>
              <li class="flex items-center mb-4">
                <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

UI Components – Boldui Library

Framework

UI Library

Components

Tailwind Component #41

Get the code for 13,400+ components

Split-screen feature section with eye photo, numbered steps, and CTA buttons

Tailwind Component #42

Get the code for 13,400+ components

Hero Banner with Three-Card Article Grid

Tailwind Component #43

Get the code for 13,400+ components

Dark Testimonial Carousel with Circular Avatars and Prev/Next Arrows

Tailwind Component #44

Get the code for 13,400+ components

Dark App Showcase Section with Phone Mockups and App Store Badges

Tailwind Component #45

Get the code for 13,400+ components

Dark Confirmation Dialog for Account Deletion

Tailwind Component #46

Get the code for 13,400+ components

Dark Blog Article Layout with Author Byline and Next Article Link

Tailwind Component #47

Get the code for 13,400+ components

Tilted Oval Logo Strip with Slack, Spotify, Dropbox, and Stripe

Tailwind Component #48

Get the code for 13,400+ components

Three-Item Feature Row with Yellow Icons and Tilted Image Ellipses

Tailwind Component #49

Get the code for 13,400+ components

Tailwind Component #50

Get the code for 13,400+ components

Tailwind Component #51

Get the code for 13,400+ components

Tailwind Component #52

Get the code for 13,400+ components

Tailwind Component #53

Get the code for 13,400+ components

Tailwind Component #54

Get the code for 13,400+ components

Tailwind Component #55

Get the code for 13,400+ components

Tailwind Component #56

Get the code for 13,400+ components

Tailwind Component #57

Get the code for 13,400+ components

Tailwind Component #58

Get the code for 13,400+ components

Tailwind Component #59

Get the code for 13,400+ components

Tailwind Component #60

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support