UI Components in Bendis library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #41

Tailwind CSS

Bendis

<section class="bg-blue-900 overflow-x-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="flex flex-wrap items-center -mx-4">
    <div class="w-full lg:w-2/5 px-4">
      <div class="hidden lg:flex relative">
        <img class="w-1/2 h-96 object-cover clip-path-right-top" src="https://images.unsplash.com/photo-1541855492-581f618f69a0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        <img class="w-1/2 h-96 object-cover clip-path-left-top -ml-12 xl:-ml-16" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        <div class="hidden lg:block absolute left-1/2 bottom-0 mb-8">
          <svg idth="74" height="56" viewBox="0 0 74 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M43.2468 56V33.1017L63.6688 0H74L60.5455 29.3051L70.9967 29.8983V56H43.2468ZM0 56V33.1017L20.5422 0H30.8734L17.4188 29.3051L27.75 29.8983V56H0Z" fill="white"></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-2/5 px-4">
      <div class="max-w-md px-4 lg:px-0 py-10 lg:py-0">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                    <h2 class="mb-8 text-3xl font-medium text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</h2>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
                    <h2 class="mb-8 text-3xl font-medium text-white">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</h2>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-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

Testimonial Carousel with Three Portraits and Navy Background

A horizontal testimonial section with three angled portrait photos on the left and right edges and a central navy panel containing a quote, previous/next arrow controls in a gold outline, and an attributed name and role for Sara Harris, UI Designer.

Testimonials generator

Tailwind Component #42

Tailwind CSS

Bendis

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/stripe.svg" alt="">
        </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

Customer logo strip with Slack, Dropbox, Spotify, and Stripe

A horizontal row of four grayscale company logos on a white background, typically used as social proof on a marketing page. No headings, text content, or controls are present beyond the logos themselves.

Logo clouds generator

Tailwind Component #43

Tailwind CSS

Bendis

<div class="fixed bottom-0 inset-x-0 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="p-8 bg-blue-900">
    <div class="container px-4 mx-auto">
      <h3 class="mb-2 text-2xl font-bold text-white">Cookie Policy</h3>
      <p class="mb-4 text-sm text-blue-200 leading-loose">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>
      <a x-on:click.prevent="open=false" class="inline-block px-8 py-5 mr-2 text-sm leading-normal bg-yellow-500 hover:bg-yellow-400 uppercase text-blue-900 font-bold border-2 border-transparent" href="#">Allow</a>
      <a x-on:click.prevent="open=false" class="inline-block px-8 py-5 text-sm leading-normal bg-transparent text-gray-50 hover:text-blue-100 uppercase font-bold border-2 border-white" href="#">Decline</a>
    </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

Thin blue horizontal divider line

The image shows only a single thin blue horizontal line across a white background, with no discernible UI content. It appears to be a divider or separator element, but no other components are visible.

Cookies generator

Tailwind Component #44

Tailwind CSS

Bendis

<section class="py-8 px-4 lg:px-10 bg-blue-800" x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
      </button>
    </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-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>

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

Bendis Blue Top Navigation Bar with Hamburger Menu

A slim, full-width blue navigation bar displaying the Bendis logo and wordmark on the left and a hamburger menu icon on the right. The bar contains no visible links or call-to-action buttons, suggesting a collapsed mobile-style navigation header.

Navigation (horizontal) generator

Tailwind Component #45

Tailwind CSS

Bendis

<section class="relative py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-20">
      <div class="w-full lg:w-2/3 px-4 mb-20">
        <div class="relative flex h-96 mb-8 overflow-hidden">
          <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
        </div>
        <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">Quick problem-solving contact</h2>
        <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        <a class="text-sm uppercase font-bold text-blue-800 hover:underline" href="#">
          <span>Read more</span>
          <span class="inline-block ml-2">
            <svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
            </svg>
          </span>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20">
        <a class="hover:underline" href="#">
          <div class="relative flex h-96 mb-8 overflow-hidden">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
            <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>

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

Blog post card grid with image headers, dates, and read more links

A multi-column grid of blog or article cards, each with a photo header, a date badge, a bold blue heading, lorem-style excerpt text, and in the top-left card a READ MORE link. The layout uses a mixed grid with one wide card on top and three equal cards below.

Blog generator

Tailwind Component #46

Tailwind CSS

Bendis

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="bg-blue-50 p-8 lg:px-16 lg:py-20">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-3/5 px-4 mb-6 md:mb-0">
          <h3 class="mb-2 text-2xl font-bold font-heading text-blue-800">Sign up to our newsletter</h3>
          <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="w-full md:w-2/5 px-4">
          <form action="#">
            <div class="flex flex-wrap lg:flex-nowrap">
              <input class="w-full mb-4 lg:mb-0 py-5 pl-4 bg-white text-sm text-gray-500 bg-transparent border border-blue-300" type="text" placeholder="Type your e-mail">
              <button class="w-full lg:w-auto py-5 px-6 text-sm text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200">Sign&nbsp;up</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

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

Newsletter Signup Banner with Email Input

A light blue banner with a bold blue heading and supporting text on the left, and an email input field with a yellow SIGN UP button on the right. It collects an email address for a newsletter subscription in a single horizontal row.

Newsletter generator

Tailwind Component #47

Tailwind CSS

Bendis

<section class="relative py-24 bg-blue-50">
  <img class="hidden lg:block absolute top-0 right-0 w-2/5 h-full object-cover clip-path-left" src="https://images.unsplash.com/photo-1544159465-672a2b0d5f2c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg">
          <h2 class="mb-10 text-4xl font-bold font-heading text-blue-800">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>
      <div class="w-full lg:w-1/2 px-4">
        <div class="p-6 lg:p-16 bg-white">
          <form action="#">
            <span class="inline-block uppercase text-blue-400 font-semibold tracking-widest">Sign Up</span>
            <h3 class="mb-4 text-2xl font-bold font-heading text-blue-800">Create new account</h3>
            <input class="block w-full py-4 pl-6 mb-2 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="email" placeholder="E-mail address">
            <input class="block w-full py-4 pl-6 mb-2 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="password" placeholder="Password">
            <input class="block w-full py-4 pl-6 mb-6 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="password" placeholder="Repeat password">
            <label class="inline-flex mb-4 text-left">
              <input class="mr-2" type="checkbox" name="terms" value="1">
              <span class="-mt-1 inline-block text-sm text-gray-500">By signing up, you agree to our <a class="text-blue-400 hover:underline" href="#">Terms, Data Policy</a> and <a class="text-blue-400 hover:underline" href="#">Cookies Policy</a>.</span>
            </label>
            <button class="w-full inline-block mb-4 py-5 text-sm text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200">Sign Up</button>
          </form>

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 sign up form with marketing headline and red brush background

A split-screen sign-up section with a bold blue marketing headline and paragraph on the left and a white registration card on the right containing email, password, repeat password fields, a terms checkbox, and a yellow SIGN UP button. The right side is backed by a red painterly image.

Tailwind Component #48

Tailwind CSS

Bendis

<section class="relative py-24 overflow-hidden">
  <div class="absolute inset-0">
    <svg class="mx-auto mt-10" width="718" height="718" viewBox="0 0 718 718" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.15">
        <path d="M0.170839 1.36658L89.3443 90.5401C61.3281 127.952 44.7576 174.418 44.7576 224.642C44.7575 319.965 104.548 401.622 188.426 434.251L0.170776 716.633C-6.09455e-05 716.975 -6.09754e-05 717.317 0.170776 717.488C0.170776 717.829 0.512451 718 0.854126 718L717.146 718C717.488 718 717.829 717.829 717.829 717.488C717.829 717.146 718 716.975 717.829 716.633L557.078 475.421L717.829 314.84C718 314.67 718 314.499 718 314.157C718 313.815 718 313.645 717.829 313.474C717.658 313.303 717.488 313.303 717.146 313.303C716.804 313.303 716.633 313.303 716.463 313.474L556.053 473.883L464.317 336.194C483.279 303.395 494.212 265.3 494.212 224.642C494.212 100.79 393.422 3.26597e-05 269.4 2.18173e-05C196.455 1.54402e-05 131.369 35.0202 90.3693 89.1734L1.53748 0.341612C1.3667 0.170775 1.19586 0.170775 0.854189 0.170775C0.512514 0.170775 0.341677 0.170775 0.170839 0.341612C1.6896e-06 0.512449 6.27098e-05 0.683287 6.268e-05 1.0249C6.26501e-05 1.36658 1.62986e-06 1.1958 0.170839 1.36658ZM554.857 475.25L492.675 537.432C492.504 537.603 492.504 537.774 492.504 538.116C492.504 538.457 492.504 538.628 492.675 538.799C493.016 539.141 493.529 539.141 493.871 538.799L555.882 476.788L715.608 716.292L2.3916 716.292L189.963 434.934C214.734 444.33 241.383 449.455 269.229 449.455C351.911 449.455 424.172 404.697 463.292 338.073L554.857 475.25ZM190.988 433.397L359.085 181.422L462.438 336.365C423.83 402.818 351.74 447.576 269.57 447.576C241.896 447.746 215.417 442.621 190.988 433.397ZM269.4 1.70833C392.397 1.70835 492.504 101.815 492.504 224.642C492.504 264.616 481.912 302.199 463.292 334.828L359.769 179.543C359.598 179.372 359.427 179.201 359.085 179.201C358.744 179.201 358.573 179.372 358.402 179.543L189.451 432.713C105.915 400.426 46.4659 319.282 46.4659 224.471C46.4659 174.759 62.8656 128.635 90.5402 91.565L179.372 180.397C179.714 180.738 180.226 180.738 180.568 180.397C180.739 180.226 180.739 180.055 180.739 179.714C180.739 179.372 180.739 179.201 180.568 179.03L91.5651 90.0275C132.223 36.5577 196.797 1.70833 269.4 1.70833Z" fill="#A0CDFA"></path>
        <path d="M560.494 203.117L717.146 203.117C717.658 203.117 718 202.776 718 202.263L718 45.6119C718 45.0994 717.658 44.7578 717.146 44.7578L560.494 44.7577C559.982 44.7577 559.64 45.0994 559.64 45.6119L559.64 202.263C559.64 202.776 559.982 203.117 560.494 203.117ZM561.349 46.466L716.292 46.466L716.292 201.409L561.349 201.409L561.349 46.466Z" fill="#A0CDFA"></path>
        <path d="M303.565 514.883C303.394 514.712 303.223 514.712 303.053 514.712C302.882 514.712 302.711 514.712 302.54 514.883L201.75 582.019C201.579 582.19 201.409 582.361 201.409 582.702C201.409 583.044 201.579 583.215 201.75 583.386L302.54 650.522C302.882 650.693 303.223 650.693 303.565 650.522L404.355 583.386C404.526 583.215 404.697 583.044 404.697 582.702C404.697 582.361 404.526 582.19 404.355 582.019L303.565 514.883ZM303.053 648.985L203.8 582.873L303.053 516.762L402.305 582.873L303.053 648.985Z" fill="#A0CDFA"></path>
      </g>
    </svg>
  </div>
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-14 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-4 mb-6 text-4xl font-bold font-heading text-blue-800">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-7">
      <div class="w-full md:w-1/2 lg:w-1/3 px-7 mb-8 lg:mb-16">
        <div class="relative">
          <div class="absolute top-0 left-0 h-full w-full bg-blue-50 clip-path-right-top"></div>
          <div class="relative flex items-center">
            <img class="h-39 w-39 object-cover" src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=801&amp;q=80" alt="">
            <div class="pl-4 lg:pl-10">
              <h3 class="text-2xl font-semibold font-heading text-blue-800 font-semibold">Peter Prada</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

Team generator

Tailwind Component #49

Tailwind CSS

Bendis

<section class="bg-blue-800 py-24" x-data="{ activeTab: '' }" x-init="activeTab = $refs.tab1.textContent">
  <div class="relative container mx-auto px-4">
    <div class="absolute inset-0">
      <svg width="728" height="804" viewBox="0 0 728 804" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g opacity="0.1">
          <path d="M325.785 784.903C325.976 784.903 326.167 784.903 326.358 784.712L651.187 593.738L651.378 593.547L651.57 593.356L727.809 479.154L728 478.963V478.772V478.581V478.39V478.199L651.57 134.446C651.57 134.255 651.378 134.064 651.187 133.873C650.996 133.873 650.805 133.682 650.614 133.682H650.423L477.117 182.189C476.544 182.38 476.353 182.953 476.544 183.335C476.735 183.908 477.117 184.099 477.499 184.099H477.69L649.85 135.783L725.707 476.862L513.23 396.271L389.604 220.766C389.413 220.384 389.031 220.384 388.84 220.384C388.649 220.384 388.458 220.384 388.267 220.575C387.885 220.957 387.693 221.53 388.076 221.912L510.173 395.125L301.518 316.062L297.123 234.707L422.469 199.568C422.851 199.568 423.043 199.186 423.043 199.186C423.043 198.995 423.234 198.804 423.043 198.422C422.851 197.849 422.469 197.658 422.087 197.658H421.896L296.932 232.606L288.716 80.5911L355.21 175.123C355.402 175.505 355.784 175.505 355.975 175.505C356.166 175.505 356.357 175.505 356.548 175.314C356.93 174.932 357.121 174.359 356.739 173.977L288.334 76.7716C288.143 76.5806 287.952 76.3896 287.57 76.3896C287.378 76.3896 287.378 76.3896 287.187 76.3896C286.805 76.5806 286.614 76.9626 286.614 77.3445L295.022 233.179L172.924 267.364L172.542 267.555H172.351L172.16 267.745L171.969 267.936L19.1076 592.592C18.9166 592.974 18.9166 593.165 19.1076 593.547C19.2987 593.738 19.4897 593.929 19.8719 593.929H234.259C234.833 593.929 235.215 593.547 235.215 592.974C235.215 592.401 234.833 592.019 234.259 592.019H21.5916L173.497 269.464L299.607 317.208L311.072 530.716C311.072 531.289 311.454 531.671 312.027 531.671C312.601 531.671 312.983 531.098 312.983 530.716L301.518 318.163L512.084 397.99L648.703 592.019H316.231L316.04 588.009C316.04 587.436 315.658 587.054 315.085 587.054C314.511 587.054 314.129 587.627 314.129 588.009L314.32 592.019H291.582C291.009 592.019 290.627 592.401 290.627 592.974C290.627 593.547 291.009 593.929 291.582 593.929H314.511L324.829 783.948C324.829 784.33 325.02 784.521 325.403 784.712C325.594 784.903 325.594 784.903 325.785 784.903ZM326.74 782.42L316.613 593.929H647.175L326.74 782.42ZM725.516 478.772L650.614 591.255L515.332 399.135L725.516 478.772ZM299.416 315.298L175.981 268.509L295.213 235.089L299.416 315.298Z" fill="white"></path>
          <path d="M39.1706 804C60.7622 804 78.3412 786.43 78.3412 764.85C78.3412 743.27 60.7622 725.701 39.1706 725.701C17.579 725.701 0 743.27 0 764.85C0 786.43 17.579 804 39.1706 804ZM39.1706 727.61C59.8068 727.61 76.4304 744.225 76.4304 764.85C76.4304 785.476 59.8068 802.09 39.1706 802.09C18.5344 802.09 1.91076 785.476 1.91076 764.85C1.91076 744.225 18.7255 727.61 39.1706 727.61Z" fill="white"></path>
          <path d="M497.753 78.2993C519.345 78.2993 536.924 60.7297 536.924 39.1496C536.924 17.5696 519.345 0 497.753 0C476.162 0 458.583 17.5696 458.583 39.1496C458.583 60.7297 476.162 78.2993 497.753 78.2993ZM497.753 1.90974C518.389 1.90974 535.013 18.5245 535.013 39.1496C535.013 59.7748 518.389 76.3895 497.753 76.3895C477.117 76.3895 460.493 59.7748 460.493 39.1496C460.493 18.5245 477.308 1.90974 497.753 1.90974Z" fill="white"></path>
          <path d="M134.709 536.637C134.9 536.637 135.282 536.446 135.473 536.255C135.664 536.064 135.664 535.873 135.664 535.682C135.664 535.491 135.473 535.109 135.473 534.918C135.282 534.727 135.091 534.727 134.709 534.727C134.518 534.727 134.135 534.727 133.944 534.918C133.753 535.109 133.562 535.3 133.562 535.682C133.562 535.873 133.753 536.255 133.753 536.255C134.327 536.446 134.518 536.637 134.709 536.637Z" fill="white"></path>
          <path d="M192.031 536.637C192.223 536.637 192.605 536.446 192.605 536.255C192.796 536.064 192.987 535.873 192.987 535.682C192.987 535.491 192.796 535.109 192.796 535.109C192.605 534.918 192.414 534.918 192.031 534.918C191.84 534.918 191.458 534.918 191.267 535.109C191.076 535.3 190.885 535.491 190.885 535.873C190.885 536.064 191.076 536.446 191.076 536.446C191.458 536.446 191.84 536.637 192.031 536.637Z" fill="white"></path>
          <path d="M249.354 536.637C249.545 536.637 249.928 536.446 250.119 536.255C250.31 536.064 250.31 535.873 250.31 535.682C250.31 535.491 250.119 535.109 249.928 534.918C249.736 534.727 249.545 534.727 249.354 534.727C249.163 534.727 248.781 534.727 248.59 534.918C248.399 535.109 248.208 535.3 248.208 535.682C248.208 535.873 248.399 536.255 248.399 536.255C248.781 536.446 249.163 536.637 249.354 536.637Z" fill="white"></path>
          <path d="M249.354 479.344C249.545 479.344 249.928 479.153 250.119 478.962C250.31 478.772 250.31 478.581 250.31 478.39C250.31 478.199 250.119 477.817 249.928 477.626C249.736 477.435 249.545 477.435 249.354 477.435C249.163 477.435 248.781 477.435 248.59 477.626C248.399 477.817 248.208 478.008 248.208 478.39C248.208 478.581 248.399 478.962 248.399 478.962C248.972 479.153 249.163 479.344 249.354 479.344Z" fill="white"></path>
          <path d="M249.354 422.052C249.545 422.052 249.928 421.861 249.928 421.67C250.119 421.479 250.31 421.288 250.31 421.097C250.31 420.906 250.119 420.525 249.928 420.334C249.736 420.143 249.545 420.143 249.354 420.143C249.163 420.143 248.781 420.143 248.59 420.334C248.399 420.525 248.208 420.715 248.208 421.097C248.208 421.288 248.399 421.67 248.399 421.67C248.781 421.861 249.163 422.052 249.354 422.052Z" fill="white"></path>
        </g>
      </svg>
    </div>
    <div class="relative flex flex-wrap -mx-3">
      <div class="w-full lg:w-2/5 px-3 pb-10">
        <ul>
          <li class="mr-4 md:mr-0 mb-4 mb-6"><a x-ref="tab1" x-on:click.prevent="activeTab = $refs.tab1.textContent" class="inline-block text-4xl font-semibold text-white" :class="{ 'text-white': activeTab==$refs.tab1.textContent, 'text-blue-500 hover:text-blue-600': activeTab!=$refs.tab1.textContent }" href="#">Lorem ipsum</a></li>
          <li class="mr-4 md:mr-0 mb-4 mb-6"><a x-ref="tab2" x-on:click.prevent="activeTab = $refs.tab2.textContent" class="inline-block text-4xl font-semibold text-blue-500 hover:text-blue-600" :class="{ 'text-white': activeTab==$refs.tab2.textContent, 'text-blue-500 hover:text-blue-600': activeTab!=$refs.tab2.textContent }" href="#">Dolor sit</a></li>
          <li class="mr-4 md:mr-0 mb-4 mb-6"><a x-ref="tab3" x-on:click.prevent="activeTab = $refs.tab3.textContent" class="inline-block text-4xl font-semibold text-blue-500 hover:text-blue-600" :class="{ 'text-white': activeTab==$refs.tab3.textContent, 'text-blue-500 hover:text-blue-600': activeTab!=$refs.tab3.textContent }" href="#">Amet consectutar</a></li>
          <li><a x-ref="tab4" x-on:click.prevent="activeTab = $refs.tab4.textContent" class="inline-block text-4xl font-semibold" :class="{ 'text-white': activeTab==$refs.tab4.textContent, 'text-blue-500 hover:text-blue-600': activeTab!=$refs.tab4.textContent }" href="#">Domor at elis</a></li>
        </ul>

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

Portfolio generator

Tailwind Component #50

Tailwind CSS

Bendis

<section class="relative py-24 bg-blue-50" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-12 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-6 mb-8 text-4xl font-bold font-heading text-blue-800">Take quick action that increases your brand's regular profit.</h2>
      <div class="max-w-max mx-auto flex flex-row">
        <button x-ref="tab1" x-on:click="tab = $refs.tab1.textContent" class="px-8 py-2 leading-8 bg-blue-800 font-semibold text-white" :class="{ 'bg-blue-800 font-semibold text-white': tab == $refs.tab1.textContent, 'bg-blue-100 text-blue-800 hover:text-blue-700': tab != $refs.tab1.textContent }">Monthly</button>
        <button x-ref="tab2" x-on:click="tab = $refs.tab2.textContent" class="px-8 py-2 leading-8 bg-blue-100 text-blue-800 hover:text-blue-700" :class="{ 'bg-blue-800 font-semibold text-white': tab == $refs.tab2.textContent, 'bg-blue-100 text-blue-800 hover:text-blue-700': tab != $refs.tab2.textContent }">Yearly</button>
      </div>
    </div>
    <div class="flex flex-wrap items-center -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-white lg:text-center">
          <h3 class="mb-8 text-sm leading-normal font-medium uppercase text-blue-500 tracking-widest">Starter</h3>
          <img class="lg:mx-auto mb-8" src="bendis-assets/images/pyramid-last.svg" alt="">
          <div class="flex lg:justify-center mt-6 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-blue-800">$34</span>
            <p class="self-start text-4xl font-semibold font-heading text-blue-800">99</p>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></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

Pricing generator

Tailwind Component #51

Tailwind CSS

Bendis

<section class="py-24 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-16 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="my-5 text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8 md:-mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4">
        <div class="pb-8 md:pb-12 mb-8 md:mb-12 border-b border-gray-100">
          <h2 class="mb-2 text-2xl font-semibold font-heading text-blue-800">Curabitur tortor erat, blandit sed tellus sed</h2>
          <span class="text-xs text-blue-400 font-semibold">10 JUN 2021 | 19:40</span>
          <p class="my-2 text-base leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <a class="text-sm uppercase font-bold text-blue-800 hover:underline" href="#">
            <span>Read more</span>
            <span class="inline-block ml-2">
              <svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4">

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

Blog generator

Tailwind Component #52

Tailwind CSS

Bendis

<section class="py-24 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-16 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">New feature</span>
      <h2 class="mt-6 text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor</h2>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative p-10 bg-white">
          <span class="absolute top-0 left-0 flex w-20 h-12 pl-6 items-center clip-path-right-top bg-blue-100">
            <svg class="-ml-1 text-blue-500 h-6 w-6" viewBox="0 0 26 26" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 -0.043335L0 12.7833L13 25.61L26 12.7833L13 -0.043335ZM3.06377 12.7833L13 2.97959L17.2022 7.12581L15.6702 8.63743L13 6.00348L6.12852 12.7833L8.79775 15.4179L7.2657 16.9296L3.06377 12.7833ZM16.8087 12.7833L13 16.5422L9.1923 12.7833L13 9.0264L16.8087 12.7833ZM8.79775 18.4412L10.3298 16.9296L13 19.5632L19.8725 12.7833L17.2022 10.1487L18.7343 8.63711L22.9362 12.7833L13 22.5871L8.79775 18.4412Z"></path>
            </svg>
          </span>
          <h3 class="mt-6 mb-2 text-lg font-semibold font-heading text-blue-800">Mauris vitae ex ut lectus cursus ornare?</h3>
          <ul class="list-inside list-disc text-gray-500">
            <li class="mb-2">Etiam pellentesque non nibh</li>
            <li class="mb-2">Mauris posuere</li>
            <li class="mb-2">Tellus sit amet tempus vestibulum</li>
            <li>Erat augue imperdiet neque</li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">

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

FAQ generator

Tailwind Component #53

Tailwind CSS

Bendis

<section class="relative py-48 bg-center bg-cover bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1036&amp;q=80');">
  <div class="relative container px-4 mx-auto text-center">
    <div class="bg-white px-12 py-24 max-w-3xl mx-auto">
      <span class="font-semibold text-blue-400 uppercase">Error 404</span>
      <h2 class="mb-3 text-4xl font-bold font-heading text-blue-800">Page not found</h2>
      <p class="max-w-sm mx-auto mb-5 text-lg text-gray-500 leading-loose">Sorry! We are unable to find the page you are looking for</p>
      <div class="flex flex-wrap items-center justify-center text-center"><a class="w-full md:w-auto px-8 py-5 mb-4 md:mb-0 md:mr-6 border-2 border-transparent bg-yellow-500 hover:bg-yellow-400 text-sm uppercase text-blue-800 font-bold leading-normal" href="#">Go back to Homepage</a><a class="w-full md:w-auto px-8 py-5 border-2 border-blue-800 hover:border-blue-900 text-sm text-blue-800 uppercase font-bold leading-normal" href="#">Try Again</a></div>
    </div>
  </div>
</section>

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

HTTP codes generator

Tailwind Component #54

Tailwind CSS

Bendis

<section class="relative lg:pb-48 bg-blue-800 lg:bg-blue-50">
  <div class="hidden lg:block absolute top-0 bottom-0 mb-24 inset-x-0 z-10 triangle-bottom bg-blue-800"></div>
  <div class="relative z-10 pt-12 lg:pt-20">
    <div class="px-4 text-center mb-16">
      <div class="w-full lg:w-9/12 mx-auto">
        <div class="max-w-4xl mx-auto">
          <h2 class="mt-8 mb-6 text-4xl lg:text-5xl font-bold text-white">Take quick action that increases your brand's regular profit.</h2>
          <p class="max-w-xl mx-auto mb-10 text-lg text-white">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>
          <a class="inline-block w-full md:w-auto py-5 px-8 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 text-blue-800 transition duration-200" href="#">Try Demo</a>
        </div>
      </div>
    </div>
    <div class="max-w-5xl mx-auto bg-white border border-blue-100">
      <div class="flex flex-wrap">
        <div class="w-full lg:w-1/3 py-10 px-8 text-center border-b lg:border-b-0 lg:border-r border-blue-100">
          <svg class="mx-auto mb-4 text-blue-500 w-8 h-8" viewBox="0 0 32 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0)">
              <path d="M16 0.585571L0 16.3722L16 32.1589L32 16.3722L16 0.585571ZM3.7708 16.3722L16 4.30609L21.172 9.40913L19.2864 11.2696L16 8.0278L7.5428 16.3722L10.828 19.6148L8.9424 21.4753L3.7708 16.3722ZM20.6876 16.3722L16 20.9985L11.3136 16.3722L16 11.7483L20.6876 16.3722ZM10.828 23.3357L12.7136 21.4753L16 24.7167L24.4584 16.3722L21.172 13.1297L23.0576 11.2692L28.2292 16.3722L16 28.4384L10.828 23.3357Z"></path>
            </g>
            <defs><clipPath id="clip0"><rect width="32" height="32" fill="white" transform="translate(0 0.638916)"></rect></clipPath></defs>
          </svg>
          <h3 class="mb-1 text-lg text-blue-800 font-semibold uppercase">Spectacular team plan</h3>
          <p class="text-gray-500">Fairly assigning daily tasks to your employees</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

Call to action generator

Tailwind Component #55

Tailwind CSS

Bendis

<section class="py-24 bg-blue-800">
  <div class="container mx-auto px-4">
    <div class="pb-10 mb-8 border-b border-blue-500">
      <div class="flex flex-wrap items-start justify-between">
        <div class="w-full lg:w-1/5 mb-6 lg:mb-0">
          <a class="inline-block mb-5 text-white text-lg font-semibold" href="#">
            <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
          </a>
        </div>
        <div class="w-full lg:w-auto">
          <ul class="flex flex-wrap space-x-4 lg:space-x-10 items-center text-sm">
            <li class="mb-2 md:mb-0"><a class="text-sm text-white hover:text-blue-100" href="#">Company</a></li>
            <li class="mb-2 md:mb-0"><a class="text-sm text-white hover:text-blue-100" href="#">Pages</a></li>
            <li class="mb-2 md:mb-0"><a class="text-sm text-white hover:text-blue-100" href="#">Legal</a></li>
            <li class="mb-2 md:mb-0"><a class="text-sm text-white hover:text-blue-100" href="#">Resources</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div>
      <div class="flex flex-wrap justify-between items-center">
        <p class="text-sm text-blue-300">All rights reserved © Wireframes Corporation 2021</p>
        <div class="flex order-first sm:order-last mb-6 lg:mb-0">
          <a class="inline-flex items-center w-12 h-12 mr-4 bg-blue-900" href="#">

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

Footers generator

Tailwind Component #56

Tailwind CSS

Bendis

<section class="relative py-20 lg:py-40 bg-blue-800 overflow-hidden">
  <div class="absolute top-0 bottom-0 -left-1/4 -right-1/4 flex items-center justify-center">
    <h2 class="stroke-light opacity-75">CONTACTS</h2>
  </div>
  <img class="hidden lg:block absolute w-1/2 top-0 right-0 h-full object-cover clip-path-left-top" src="bendis-assets/images/map1.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-md mb-10">
      <h2 class="mb-4 text-4xl font-bold text-white">Got questions?</h2>
      <p class="text-lg text-gray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
    </div>
    <div class="max-w-3xl flex flex-wrap justify-between -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-0">
        <div class="py-16 bg-white text-center">
          <h3 class="mb-4 text-lg font-semibold text-blue-800">Visit Us</h3>
          <p class="text-gray-500">1686 Geraldine Lane</p>
          <p class="text-gray-500">New York, NY 10013</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="py-16 bg-white text-center">
          <h3 class="mb-4 text-lg font-semibold text-blue-800">Contacts</h3>
          <p class="text-gray-500">hello@wireframes.org</p>
          <p class="text-gray-500">+7 843 672 431</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

Contact generator

Tailwind Component #57

Tailwind CSS

Bendis

<section class="relative py-24">
  <div class="hidden md:block absolute top-0 right-0 w-1/3 lg:w-3/5 h-full clip-path-left">
    <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1613946642700-36bde627698e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-sm mx-auto md:mx-0">
          <form action="#">
            <span class="inline-block uppercase text-blue-400 font-semibold tracking-widest">Sign In</span>
            <h3 class="mb-4 text-2xl font-bold font-heading text-blue-800">Join our community</h3>
            <input class="block w-full py-4 pl-6 mb-2 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="email" placeholder="E-mail address">
            <input class="block w-full py-4 pl-6 mb-6 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="password" placeholder="Password">
            <label class="inline-flex mb-4 text-left">
              <input class="mr-2" type="checkbox" name="terms" value="1">
              <span class="-mt-1 inline-block text-sm text-gray-500">By signing up, you agree to our <a class="text-blue-400 hover:underline" href="#">Terms, Data Policy</a> and <a class="text-blue-400 hover:underline" href="#">Cookies Policy</a>.</span>
            </label>
            <button class="w-full inline-block mb-4 py-5 text-sm text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200">Sign In</button>
            <a class="block mb-4 text-center text-sm text-blue-500 hover:text-blue-600" href="#">Forgot password?</a>
            <a class="flex items-center justify-center mb-4 py-5 border-2 border-blue-800 hover:bg-blue-50" href="#">
              <span class="inline-block mr-4">
                <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63483 17.7272V9.766H9.35819L9.76678 6.66243H6.63483V4.68126C6.63483 3.78299 6.8881 3.17083 8.20287 3.17083L9.87701 3.17015V0.394215C9.58749 0.357312 8.59367 0.272705 7.43697 0.272705C5.0216 0.272705 3.36799 1.71878 3.36799 4.37389V6.66243H0.636368V9.766H3.36799V17.7272H6.63483Z" fill="#3C74F9"></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 #58

Tailwind CSS

Bendis

<section class="relative py-24 bg-blue-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
        <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
        <h2 class="mt-4 mb-8 text-4xl text-blue-800 font-bold font-heading">Lorem ipsum dolor sit amet consectetur</h2>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full lg:w-1/2 px-4 mb-8">
            <span class="flex justify-center items-center mb-4 w-20 h-12 clip-path-both bg-yellow-500 text-2xl text-blue-800 font-bold">1</span>
            <p class="text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
          <div class="w-full lg:w-1/2 px-4 mb-8">
            <span class="flex justify-center items-center mb-4 w-20 h-12 clip-path-both bg-yellow-500 text-2xl text-blue-800 font-bold">2</span>
            <p class="text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
          <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
            <span class="flex justify-center items-center mb-4 w-20 h-12 clip-path-both bg-yellow-500 text-2xl text-blue-800 font-bold">3</span>
            <p class="text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
          <div class="w-full lg:w-1/2 px-4">
            <span class="flex justify-center items-center mb-4 w-20 h-12 clip-path-both bg-yellow-500 text-2xl text-blue-800 font-bold">4</span>
            <p class="text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </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

How it works generator

Tailwind Component #59

Tailwind CSS

Bendis

<section class="py-24 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -px-4">
      <div class="w-full md:w-3/5 px-4 mb-6 md:mb-0">
        <div class="flex mb-2">
          <span>
            <svg class="mr-4 h-7 w-7 text-blue-500" width="30" height="30" viewBox="0 0 30 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M22.5292 7.64546L21.3926 17.2153C21.3076 17.8887 21.2656 18.5333 21.2656 19.1503C21.2656 20.0688 21.5974 20.5247 22.261 20.5247C23.3201 20.5247 24.3369 19.8028 25.311 18.3583C26.2851 16.9138 26.7649 15.161 26.7649 13.1073C26.7649 10.1414 25.692 7.72271 23.5318 5.8721C21.3716 4.01367 18.7595 3.08869 15.6813 3.08869C12.3068 3.08869 9.46855 4.23856 7.17412 6.53796C4.87247 8.8377 3.72903 11.6703 3.72903 15.0423C3.72903 18.1901 4.80946 20.9243 6.96243 23.2446C9.12263 25.5655 12.1512 26.7294 16.0555 26.7294C19.091 26.7294 22.1836 25.9231 25.3392 24.3035L26.5604 27.1006C23.1859 28.8111 19.6771 29.6666 16.0558 29.6666C11.2411 29.6666 7.42191 28.2225 4.58366 25.341C1.75262 22.4598 0.333496 19.0173 0.333496 15.0208C0.333496 10.8425 1.82351 7.35115 4.80257 4.54688C7.78129 1.73545 11.3819 0.333313 15.5967 0.333313C19.5715 0.333313 22.9105 1.54608 25.6073 3.95793C28.3114 6.37663 29.6668 9.42665 29.6668 13.1073C29.6668 15.7783 28.9044 18.1618 27.3865 20.251C25.8686 22.3333 24.0261 23.3779 21.8446 23.3779C20.1501 23.3779 18.9784 22.67 18.3286 21.2467C17.1425 22.7257 15.6954 23.462 13.9869 23.462C12.2362 23.462 10.7324 22.7401 9.48956 21.2819C8.24011 19.8305 7.61883 17.9235 7.61883 15.5541C7.61883 13.1142 8.31789 11.1371 9.72291 9.60851C11.1348 8.08025 12.808 7.31595 14.7493 7.31595C16.6272 7.31595 17.9754 7.9049 18.8015 9.08247L18.9712 7.64514H22.5292V7.64546ZM14.2556 20.118C15.3567 20.118 16.3522 19.5854 17.2419 18.5197C18.1313 17.461 18.5764 16.0798 18.5764 14.383C18.5764 13.4225 18.2373 12.5676 17.5527 11.8033C16.8747 11.0462 16.0348 10.6674 15.0394 10.6674C13.9662 10.6674 13.0764 11.1371 12.3705 12.0767C11.6714 13.0092 11.3186 14.2292 11.3186 15.7226C11.3186 16.9914 11.5871 18.0428 12.1378 18.8703C12.681 19.6972 13.3869 20.118 14.2556 20.118Z"></path>
            </svg>
          </span>
          <h3 class="text-2xl font-bold font-heading text-blue-800">Sign up to our newsletter</h3>
        </div>
        <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="w-full md:w-2/5 px-4">
        <form action="#">
          <div class="flex flex-wrap lg:flex-nowrap">
            <input class="w-full mb-4 lg:mb-0 py-5 pl-4 bg-white text-sm text-gray-500 bg-transparent border border-blue-300" type="text" placeholder="Type your e-mail">
            <button class="w-full lg:w-auto py-5 px-6 text-sm text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200">Sign&nbsp;up</button>
          </div>
        </form>
      </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

Newsletter generator

Tailwind Component #60

Tailwind CSS

Bendis

<section class="py-24 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12 text-center">
        <h3 class="mb-4 text-5xl font-bold font-heading text-blue-800">4,536</h3>
        <p class="text-sm uppercase text-gray-500">Dolor sit amet consectutar</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12 text-center">
        <h3 class="mb-4 text-5xl font-bold font-heading text-blue-800">356</h3>
        <p class="text-sm uppercase text-gray-500">Dolor sit amet consectutar</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12 text-center">
        <h3 class="mb-4 text-5xl font-bold font-heading text-blue-800">1,053</h3>
        <p class="text-sm uppercase text-gray-500">Dolor sit amet consectutar</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12 text-center">
        <h3 class="mb-4 text-5xl font-bold font-heading text-blue-800">4,431</h3>
        <p class="text-sm uppercase text-gray-500">Dolor sit amet consectutar</p>
      </div>
    </div>
  </div>
</section>

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

Stats generator

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 – Bendis Library

Framework

UI Library

Components

Tailwind Component #41

Get the code for 13,400+ components

Testimonial Carousel with Three Portraits and Navy Background

Tailwind Component #42

Get the code for 13,400+ components

Customer logo strip with Slack, Dropbox, Spotify, and Stripe

Tailwind Component #43

Get the code for 13,400+ components

Thin blue horizontal divider line

Tailwind Component #44

Get the code for 13,400+ components

Bendis Blue Top Navigation Bar with Hamburger Menu

Tailwind Component #45

Get the code for 13,400+ components

Blog post card grid with image headers, dates, and read more links

Tailwind Component #46

Get the code for 13,400+ components

Newsletter Signup Banner with Email Input

Tailwind Component #47

Get the code for 13,400+ components

Split-screen sign up form with marketing headline and red brush background

Tailwind Component #48

Get the code for 13,400+ components

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

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support