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 #81

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 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-6 py-5 text-sm text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200">Sign Up</button>
            <p class="text-center text-sm text-gray-500">
              <span>Already have an account?</span>
              <a class="text-blue-500 hover:underline" href="#">Sign in</a>
            </p>
          </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

Tailwind Component #82

Tailwind CSS

Bendis

<section class="py-24">
  <div class="container px-4 mx-auto mb-12 lg:mb-24">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="flex items-center mb-6 text-xs text-blue-500 font-semibold uppercase">
          <a href="#">Home</a>
          <span class="inline-block mx-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 href="#">Blog</a>
          <span class="inline-block mx-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 href="#">Article</a>
        </div>
        <h2 class="mb-6 text-5xl text-blue-800 font-bold font-heading">Lorem ipsum dolor sit amet consectutar</h2>
        <div class="flex items-center">
          <div class="mr-6">
            <img class="w-14 h-14 object-cover" src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" 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

Content generator

Tailwind Component #83

Tailwind CSS

Bendis

<section class="py-24 bg-blue-800">
  <div class="container mx-auto px-4">
    <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-md">
          <span class="uppercase text-blue-400 font-semibold tracking-widest">Sign Up</span>
          <h2 class="mt-4 mb-8 text-3xl lg:text-4xl text-white font-bold font-heading">Take quick action that increases your brand's regular profit.</h2>
          <p class="text-lg text-gray-50">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="md:max-w-md lg:ml-auto p-6 lg:p-12 bg-white">
          <form action="#">
            <span class="uppercase text-blue-400 font-semibold tracking-widest">Sign Up</span>
            <h3 class="mt-2 mb-2 text-2xl font-bold font-heading text-blue-800">Sign up to our newsletter</h3>
            <p class="mb-4 text-base text-gray-500 leading-loose">Amet minim mollit non deserunt est dolor do amet sint.</p>
            <input class="block w-full py-5 pl-6 mb-2 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="email" placeholder="E-mail address">
            <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>
          </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 generator

Tailwind Component #84

Tailwind CSS

Bendis

<section class="py-24 bg-blue-50">
  <div class="container mx-auto px-4">
    <div class="pb-10 mb-8 border-b border-gray-100">
      <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-blue-800 text-lg font-semibold" href="#">
            <img class="h-7" src="bendis-assets/logos/bendis-blue.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-blue-500 hover:text-blue-600" href="#">Company</a></li>
            <li class="mb-2 md:mb-0"><a class="text-sm text-blue-500 hover:text-blue-600" href="#">Pages</a></li>
            <li class="mb-2 md:mb-0"><a class="text-sm text-blue-500 hover:text-blue-600" href="#">Legal</a></li>
            <li class="mb-2 md:mb-0"><a class="text-sm text-blue-500 hover:text-blue-600" href="#">Resources</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div>
      <div class="flex flex-wrap justify-between items-center">
        <p class="text-sm text-gray-500">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-white" 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 #85

Tailwind CSS

Bendis

<section class="pb-20 bg-blue-50">
  <div class="h-64 md:h-96">
    <img class="h-full w-full object-cover" src="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" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <div class="pt-24 text-center">
      <span class="font-semibold text-blue-400 uppercase">Error 404</span>
      <h2 class="mt-4 mb-4 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 #86

Tailwind CSS

Bendis

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

Cookies generator

Tailwind Component #87

Tailwind CSS

Bendis

<section class="relative py-24 bg-blue-50 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="absolute inset-0">
    <svg class="mx-auto mt-10" width="736" height="736" viewBox="0 0 736 736" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.1">
        <path d="M0.175052 1.40088L91.5841 92.8099C62.8655 131.16 45.8796 178.79 45.8796 230.274C45.8796 327.987 107.169 411.691 193.15 445.137L0.174988 734.599C-0.000121978 734.949 -0.000122009 735.299 0.174988 735.475C0.174988 735.825 0.525269 736 0.875488 736L735.124 736C735.475 736 735.825 735.825 735.825 735.475C735.825 735.124 736 734.949 735.825 734.599L571.044 487.34L735.825 322.733C736 322.558 736 322.383 736 322.033C736 321.683 736 321.508 735.825 321.332C735.65 321.157 735.475 321.157 735.124 321.157C734.774 321.157 734.599 321.157 734.424 321.332L569.993 485.764L475.957 344.622C495.395 311.001 506.602 271.951 506.602 230.274C506.602 103.317 403.285 3.19483e-05 276.153 2.08341e-05C201.38 1.42972e-05 134.662 35.8981 92.6348 91.4089L1.57599 0.350156C1.40088 0.175046 1.22577 0.175046 0.875553 0.175046C0.525333 0.175046 0.350162 0.175046 0.175052 0.350155C-5.77731e-05 0.525265 3.24677e-06 0.700375 3.21616e-06 1.05059C3.18554e-06 1.40081 -5.78343e-05 1.22577 0.175052 1.40088ZM568.767 487.164L505.026 550.906C504.851 551.081 504.851 551.256 504.851 551.606C504.851 551.956 504.851 552.131 505.026 552.306C505.376 552.657 505.901 552.657 506.252 552.306L569.818 488.74L733.548 734.249L2.45154 734.249L194.726 445.838C220.117 455.469 247.435 460.722 275.978 460.722C360.733 460.722 434.806 414.843 474.906 346.549L568.767 487.164ZM195.776 444.262L368.088 185.97L474.031 344.798C434.455 412.916 360.558 458.796 276.328 458.796C247.96 458.971 220.817 453.718 195.776 444.262ZM276.153 1.75112C402.235 1.75113 504.851 104.367 504.851 230.274C504.851 271.25 493.994 309.775 474.906 343.222L368.788 184.044C368.613 183.869 368.438 183.694 368.088 183.694C367.737 183.694 367.562 183.869 367.387 184.044L194.2 443.561C108.57 410.465 47.6307 327.286 47.6307 230.098C47.6307 179.141 64.4416 131.86 92.8099 93.8605L183.869 184.919C184.219 185.269 184.744 185.269 185.094 184.919C185.27 184.744 185.27 184.569 185.27 184.219C185.27 183.869 185.27 183.693 185.094 183.518L93.8605 92.2845C135.537 37.4741 201.73 1.75111 276.153 1.75112Z" fill="#6CA2FA"></path>
        <path d="M574.546 208.209L735.124 208.209C735.65 208.209 736 207.859 736 207.334L736 46.7553C736 46.23 735.65 45.8798 735.124 45.8798L574.546 45.8797C574.02 45.8797 573.67 46.23 573.67 46.7553L573.67 207.334C573.67 207.859 574.02 208.209 574.546 208.209ZM575.421 47.6309L734.249 47.6309L734.249 206.458L575.421 206.458L575.421 47.6309Z" fill="#6CA2FA"></path>
        <path d="M311.175 527.791C311 527.615 310.825 527.615 310.65 527.615C310.475 527.615 310.3 527.615 310.125 527.791L206.808 596.61C206.633 596.785 206.458 596.96 206.458 597.31C206.458 597.661 206.633 597.836 206.808 598.011L310.125 666.83C310.475 667.005 310.825 667.005 311.175 666.83L414.492 598.011C414.667 597.836 414.842 597.661 414.842 597.31C414.842 596.96 414.667 596.785 414.492 596.61L311.175 527.791ZM310.65 665.254L208.909 597.486L310.65 529.717L412.391 597.486L310.65 665.254Z" fill="#6CA2FA"></path>
      </g>
    </svg>
  </div>
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-12 md:mb-20 text-center">
      <span class="text-blue-400 uppercase font-semibold uppercase">New feature</span>
      <h2 class="mt-4 mb-6 text-4xl font-bold text-blue-800 font-heading">Take quick action that increases your brand's regular profit.</h2>
      <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="relative max-w-5xl mx-auto mb-20">
        <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">
                    <div class="bg-white md:clip-path-right-top-sm">
                      <div class="flex flex-wrap items-center">
                        <img class="w-full md:w-80 h-72 object-cover md:clip-path-right-top" src="https://images.unsplash.com/photo-1612282131240-6e878907d0f6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1008&amp;q=80" alt="">
                        <div class="max-w-sm pl-8 py-10 lg:py-0">

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 #88

Tailwind CSS

Bendis

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <ul>
        <li class="px-10 py-8 mb-2 bg-blue-50" :xclass="{ 'bg-blue-100': accordion, 'bg-blue-50': !accordion }" x-data="{ accordion: false }">
          <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700" :class="{ 'text-blue-800 hover:text-blue-700': !accordion, 'text-blue-500': accordion }" x-on:click="accordion = !accordion">
            <span class="font-heading" :class="{ 'text-base': !accordion, 'text-lg font-semibold': accordion }">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0 w-4 h-4" :class="{ 'text-blue-500': !accordion, 'text-blue-800': accordion }" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
          </div>
        </li>
        <li class="px-10 py-8 mb-2 bg-blue-50" :class="{ 'bg-blue-100': accordion, 'bg-blue-50': !accordion }" x-data="{ accordion: false }">
            <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700" :class="{ 'text-blue-800 hover:text-blue-700': !accordion, 'text-blue-500': accordion }" x-on:click="accordion = !accordion">
              <span class="font-heading" :class="{ 'text-base': !accordion, 'text-lg font-semibold': accordion }">Donec sed leo sit amet ante ornare laoreet in quis est?</span>
              <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                  <svg class="flex-shrink-0 w-4 h-4" :class="{ 'text-blue-500': !accordion, 'text-blue-800': accordion }" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></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

FAQ generator

Tailwind Component #89

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-10 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-4 mb-6 max-w-2xl mx-auto text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="text-xl 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="bg-blue-800 mb-8 lg:mb-2">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-2/3 px-4 mb-4 lg:mb-0">
          <div class="pt-6 md:pt-16 px-4 md:px-16">
            <div class="max-w-md lg:pr-8">
              <h2 class="mb-4 text-3xl md:text-4xl font-bold font-heading text-white">Premium Membership</h2>
              <p class="mb-5 text-base text-gray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
              <ul class="flex flex-wrap text-left text-base lg:text-lg">
                <li class="w-full lg:w-1/2 mb-4 flex items-center">
                  <svg class="flex-shrink-0 text-blue-300 h-5 w-5 mr-4" 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>
                  <p class="text-sm text-white font-semibold">Complete documentation</p>
                </li>
                <li class="w-full lg:w-1/2 mb-4 flex items-center">
                  <svg class="flex-shrink-0 text-blue-300 h-5 w-5 mr-4" 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>

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 #90

Tailwind CSS

Bendis

<section class="py-24">
  <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-16">
      <div class="w-full md:w-1/2 px-4 mb-16">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
            <div class="h-80 lg:h-40">
              <img class="mt-2 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="">
            </div>
          </div>
          <div class="w-full lg:w-2/3 px-4">
            <h2 class="mb-2 text-2xl font-semibold font-heading text-blue-800">Vestibulum sapien diam, fermentum</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>

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 #91

Tailwind CSS

Bendis

<section class="bg-blue-800 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="max-w-4xl px-4 mx-auto py-24">
    <div class="flex flex-wrap items-end mb-12 -mx-4">
      <div class="w-full lg:w-3/5 px-4 mb-10 lg:mb-0">
        <span class="text-base uppercase text-blue-200 font-semibold tracking-widest">Lorem ipsum</span>
        <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="mt-3 sm:mb-2 lg:mb-0 text-4xl font-bold text-white font-heading">Lorem ispum dolor sit amet consectutar</h2>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
                    <h2 class="mt-3 sm:mb-2 lg:mb-0 text-4xl font-bold text-white font-heading">Vivamus Efficitur Euismod Dui</h2>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-5">
                    <h2 class="mt-3 sm:mb-2 lg:mb-0 text-4xl font-bold text-white font-heading">Proin Tristique Ipsum Velit</h2>
                </div>
            </div>
        </div>
    </div>
      <div class="w-full lg:w-2/5 px-4 flex justify-end">
        <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="w-16 h-16 border-2 border-yellow-300 hover:bg-blue-900">
          <svg class="mx-auto text-yellow-500" width="12" height="16" viewBox="0 0 12 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.75 0L11.25 2.5L5.75 8L11.25 13.5L8.75 16L0.75 8L8.75 0Z"></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

Portfolio generator

Tailwind Component #92

Tailwind CSS

Bendis

<section class="py-24 bg-blue-50">
  <div class="container px-4 mx-auto text-center">
    <div class="max-w-3xl mx-auto">
      <span class="uppercase text-blue-400 font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-5 mb-8 text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="mb-10 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <form action="#">
        <div class="flex flex-wrap items-start md:flex-nowrap">
          <div class="w-full lg:w-2/5 mb-2 md:mb-0 md:mr-4">
            <input class="block w-full py-5 pl-8 mb-2 text-sm text-gray-500 bg-white border border-blue-400" type="email" placeholder="Type your e-mail">
          </div>
          <div class="w-full lg:w-2/5 mb-2 md:mb-0 md:mr-4">
            <input class="block w-full py-5 pl-8 mb-2 text-sm text-gray-500 bg-white border border-blue-400" type="email" placeholder="Type your phone number">
          </div>
          <button class="w-full lg:w-1/5 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>
        </div>
      </form>
    </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 generator

Tailwind Component #93

Tailwind CSS

Bendis

<section class="pt-20 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="pb-24 text-center">
      <span class="font-semibold text-blue-400 uppercase">Error 404</span>
      <h2 class="mt-4 mb-4 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>
  <div class="h-64 md:h-96">
    <img class="h-full w-full object-cover" src="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" alt="">
  </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 #94

Tailwind CSS

Bendis

<section class="relative py-24 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap items-center -mx-4">
      <div class="relative w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="relative lg:pl-10 max-w-lg">
          <h2 class="mb-8 text-4xl font-bold 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">
        <img class="clip-path-left-top" src="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" alt="">
      </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

Call to action generator

Tailwind Component #95

Tailwind CSS

Bendis

<section class="py-24 bg-blue-50">
  <div class="relative container px-4 mx-auto mb-12 lg:mb-16">
    <div class="absolute top-0 right-0">
      <svg width="798" height="798" viewBox="0 0 798 798" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g opacity="0.1">
          <path d="M797.81 796.481L698.701 697.372C729.839 655.792 748.256 604.148 748.256 548.328C748.256 442.384 681.803 351.629 588.58 315.365L797.81 1.51892C798 1.13919 798 0.759458 797.81 0.569593C797.81 0.189864 797.43 0 797.051 0H0.949322C0.569593 0 0.189864 0.189864 0.189864 0.569593C0.189864 0.949322 0 1.13919 0.189864 1.51892L178.852 269.607L0.189864 448.08C0 448.27 0 448.46 0 448.839C0 449.219 0 449.409 0.189864 449.599C0.379729 449.789 0.569593 449.789 0.949322 449.789C1.32905 449.789 1.51892 449.789 1.70878 449.599L179.991 271.316L281.949 424.347C260.874 460.801 248.722 503.141 248.722 548.328C248.722 685.98 360.742 798 498.584 798C579.656 798 651.994 759.078 697.562 698.891L796.291 797.62C796.481 797.81 796.671 797.81 797.051 797.81C797.43 797.81 797.62 797.81 797.81 797.62C798 797.43 798 797.241 798 796.861C798 796.481 798 796.671 797.81 796.481ZM181.32 269.797L250.431 200.687C250.621 200.497 250.621 200.307 250.621 199.927C250.621 199.547 250.621 199.358 250.431 199.168C250.051 198.788 249.482 198.788 249.102 199.168L180.181 268.089L2.6581 1.89864H795.342L586.871 314.605C559.341 304.163 529.722 298.467 498.774 298.467C406.879 298.467 326.567 348.211 283.088 422.258L181.32 269.797ZM585.732 316.314L398.905 596.364L284.037 424.157C326.946 350.3 407.069 300.555 498.394 300.555C529.152 300.365 558.581 306.061 585.732 316.314ZM498.584 796.101C361.882 796.101 250.621 684.841 250.621 548.328C250.621 503.9 262.393 462.13 283.088 425.866L398.146 598.453C398.335 598.642 398.525 598.832 398.905 598.832C399.285 598.832 399.475 598.642 399.665 598.453L587.44 317.074C680.284 352.958 746.357 443.143 746.357 548.518C746.357 603.769 728.13 655.032 697.372 696.233L598.642 597.503C598.263 597.124 597.693 597.124 597.313 597.503C597.123 597.693 597.123 597.883 597.123 598.263C597.123 598.642 597.123 598.832 597.313 599.022L696.233 697.941C651.045 757.369 579.276 796.101 498.584 796.101Z" fill="#A0CDFA"></path>
          <path d="M175.055 572.251H0.949322C0.379729 572.251 0 572.631 0 573.201V747.306C0 747.876 0.379729 748.255 0.949322 748.255H175.055C175.625 748.255 176.004 747.876 176.004 747.306V573.201C176.004 572.631 175.625 572.251 175.055 572.251ZM174.106 746.357H1.89864V574.15H174.106V746.357Z" fill="#A0CDFA"></path>
          <path d="M460.612 225.749C460.801 225.939 460.991 225.939 461.181 225.939C461.371 225.939 461.561 225.939 461.751 225.749L573.771 151.132C573.961 150.942 574.15 150.752 574.15 150.373C574.15 149.993 573.961 149.803 573.771 149.613L461.751 74.9964C461.371 74.8065 460.991 74.8065 460.612 74.9964L348.592 149.613C348.402 149.803 348.212 149.993 348.212 150.373C348.212 150.752 348.402 150.942 348.592 151.132L460.612 225.749ZM461.181 76.7052L571.492 150.183L461.181 223.66L350.87 150.183L461.181 76.7052Z" fill="#A0CDFA"></path>
        </g>
      </svg>
    </div>
    <div class="max-w-xl mb-16">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-4 text-4xl font-bold text-blue-800 font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
    </div>
    <div class="flex flex-wrap items-center lg:-mx-10 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/3 lg:px-10 mb-8">
        <span class="flex-shrink-0 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="max-w-xs text-base text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 lg:px-10 mb-8">
        <span class="flex-shrink-0 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="max-w-xs text-base text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</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

How it works generator

Tailwind Component #96

Tailwind CSS

Bendis

<section class="py-14">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-px">
      <div class="w-full md:w-1/2 lg:w-1/4 mb-8 lg:mb-0 px-px">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-50 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 mb-8 lg:mb-0 px-px">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-50 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 mb-8 md:mb-0 px-px">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-50 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 mb-8 md:mb-0 px-px">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-50 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/stripe-color.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

Logo clouds generator

Tailwind Component #97

Tailwind CSS

Bendis

<div class="fixed bottom-0 inset-x-0 max-w-2xl mx-auto z-50 p-6" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="p-10 bg-white border">
    <div class="flex flex-wrap items-center">
      <div class="mb-6">
        <h3 class="mb-2 text-2xl font-bold font-heading text-blue-800">Cookie Policy</h3>
        <p class="text-sm text-gray-500 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>
      </div>
      <div class="w-full">
        <a x-on:click.prevent="open=false" class="w-full text-center md:w-auto inline-block px-8 py-5 mb-2 lg:mb-0 md:mr-2 text-sm leading-normal uppercase bg-yellow-500 hover:bg-yellow-400 text-blue-900 font-bold border-2 border-transparent" href="#">Yes, I accept</a>
        <a class="w-full text-center md:w-auto inline-block px-8 py-5 text-sm leading-normal uppercase text-blue-800 hover:text-blue-900 bg-transparent font-bold border-2 border-blue-800" href="#">View more informations</a>
    </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

Cookies generator

Tailwind Component #98

Tailwind CSS

Bendis

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="h-64 lg:h-144 mb-12 lg:mb-16">
      <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
    </div>
    <div class="max-w-2xl mb-12 mx-auto text-center">
      <div class="flex items-center justify-center mb-6 text-xs text-blue-500 font-semibold uppercase">
        <a href="#">Home</a>
        <span class="inline-block mx-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 href="#">Blog</a>
        <span class="inline-block mx-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 href="#">Article</a>
      </div>
      <h2 class="mb-6 text-5xl text-blue-800 font-bold font-heading">Lorem ipsum dolor sit amet consectutar</h2>
      <div class="flex items-center justify-center">
        <div class="mr-6">

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

Content generator

Tailwind Component #99

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">
      <div class="w-full lg:w-1/2 px-4 pb-12 lg:pb-0">
        <div class="max-w-md">
          <h2 class="mb-8 text-4xl font-bold font-heading text-blue-800">Lorem ipsum</h2>
          <div class="flex items-start mb-8">
            <div class="mr-4">
              <svg class="text-blue-500 h-6 w-6" viewBox="0 0 26 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.8075 15.5254L23.3675 0.965393L26 3.59789L8.8075 20.8229L0 12.0479L2.665 9.38289L8.8075 15.5254Z"></path>
              </svg>
            </div>
            <div>
              <h3 class="mb-2 text-lg font-semibold font-heading text-blue-800">Quick problem-solving contact</h3>
              <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>
          <div class="flex items-start mb-8">
            <div class="mr-4">
              <svg class="text-blue-500 h-6 w-6" viewBox="0 0 26 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.8075 15.5254L23.3675 0.965393L26 3.59789L8.8075 20.8229L0 12.0479L2.665 9.38289L8.8075 15.5254Z"></path>
              </svg>
            </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

Features generator

Tailwind Component #100

Tailwind CSS

Bendis

<section class="relative pt-40 pb-24 bg-blue-50" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="absolute inset-0">
    <svg class="mt-20 mx-auto" width="236" height="179" viewBox="0 0 236 179" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M137.922 179V105.807L203.052 0H236L193.091 93.6716L226.422 95.5678V179H137.922ZM0 179V105.807L65.513 0H98.461L55.5519 93.6716L88.5 95.5678V179H0Z" fill="white"></path>
    </svg>
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="flex items-center justify-between">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="hidden lg:block w-14 h-14 mr-5 border-2 border-blue-800 hover:bg-blue-100 text-blue-800">
        <svg class="mx-auto" width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8.75 0L11.25 2.5L5.75 8L11.25 13.5L8.75 16L0.75 8L8.75 0Z" fill="currentColor"></path>
        </svg>
      </button>
      <div class="max-w-3xl w-full mx-auto mt-10 text-center">
        <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 max-w-2xl mx-auto text-4xl font-semibold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
                    <p class="mb-12 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim quam ultricies, placerat tellus sed, laoreet orci. Duis luctus quam ac metus gravida sodales. Sed a ex accumsan, pellentesque sem eget, scelerisque dolor.</p>
                    <img class="mb-6 mx-auto h-20 w-20 object-cover object-top" 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="">
                    <p class="mb-1 text-lg font-semibold font-heading text-blue-500">Tom Harris</p>
                    <p class="text-sm text-gray-500">UI Designer</p>
                </div>
                <div x-ref="slide2" 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

Testimonials 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 #81

Get the code for 13,400+ components

Tailwind Component #82

Get the code for 13,400+ components

Tailwind Component #83

Get the code for 13,400+ components

Tailwind Component #84

Get the code for 13,400+ components

Tailwind Component #85

Get the code for 13,400+ components

Tailwind Component #86

Get the code for 13,400+ components

Tailwind Component #87

Get the code for 13,400+ components

Tailwind Component #88

Get the code for 13,400+ components

Tailwind Component #89

Get the code for 13,400+ components

Tailwind Component #90

Get the code for 13,400+ components

Tailwind Component #91

Get the code for 13,400+ components

Tailwind Component #92

Get the code for 13,400+ components

Tailwind Component #93

Get the code for 13,400+ components

Tailwind Component #94

Get the code for 13,400+ components

Tailwind Component #95

Get the code for 13,400+ components

Tailwind Component #96

Get the code for 13,400+ components

Tailwind Component #97

Get the code for 13,400+ components

Tailwind Component #98

Get the code for 13,400+ components

Tailwind Component #99

Get the code for 13,400+ components

Tailwind Component #100

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