Tailwind CSS Components

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

Tailwind CSS

Atis

<section x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-purple-600 radius-for-skewed">
    <div class="border-b border-purple-500">
      <div class="mb-16 max-w-xl mx-auto px-4 text-center">
        <span class="text-pink-400 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-white text-4xl lg:text-5xl font-bold">Frequently Asked Questions</h2>
      </div>
      <div class="max-w-3xl mx-auto">
        <div class="flex flex-wrap px-4 text-center lg:-mx-4 lg:space-x-4 text-base lg:text-xl">
          <button x-ref="tab1" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-pink-400 border-b-2 border-pink-400 transition duration-150" :class="{'text-pink-400 border-b-2 border-pink-400': $refs.tab1.textContent == tab, 'text-purple-500 hover:text-pink-400 border-b-2 border-transparent hover:border-pink-400': $refs.tab1.textContent != tab}" x-on:click="tab = $refs.tab1.textContent">General</button>
          <button x-ref="tab2" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-purple-500 hover:text-pink-400 border-b-2 border-transparent hover:border-pink-400 transition duration-150" :class="{'text-pink-400 border-b-2 border-pink-400': $refs.tab2.textContent == tab }" x-on:click="tab = $refs.tab2.textContent">Payments</button>
          <button x-ref="tab3" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-purple-500 hover:text-pink-400 border-b-2 border-transparent hover:border-pink-400 transition duration-150" :class="{'text-pink-400 border-b-2 border-pink-400': $refs.tab3.textContent == tab }" x-on:click="tab = $refs.tab3.textContent">Returns</button>
          <button x-ref="tab4" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-purple-500 hover:text-pink-400 border-b-2 border-transparent hover:border-pink-400 transition duration-150" :class="{'text-pink-400 border-b-2 border-pink-400': $refs.tab4.textContent == tab }" x-on:click="tab = $refs.tab4.textContent">Refunds</button>
        </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

AI FAQ Component Generator

Tailwind Component #7122

Tailwind CSS

Atis

<section x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="border-b border-gray-800">
      <div class="mb-16 max-w-xl mx-auto px-4 text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-white text-4xl lg:text-5xl font-bold">Frequently Asked Questions</h2>
      </div>
      <div class="max-w-3xl mx-auto">
        <div class="flex flex-wrap px-4 text-center lg:-mx-4 lg:space-x-4 text-base lg:text-xl">
          <button x-ref="tab1" class="px-4 py-4 w-full md:w-1/2 lg:w-auto outline-none font-bold text-green-600 border-b-2 border-green-600 transition duration-150" :class="{'text-green-600 border-b-2 border-green-600': $refs.tab1.textContent == tab, 'text-gray-400 hover:text-green-600 border-b-2 border-transparent hover:border-green-600': $refs.tab1.textContent != tab }" x-on:click="tab = $refs.tab1.textContent">General</button>
          <button x-ref="tab2" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-green-600 border-b-2 border-transparent hover:border-green-600 transition duration-150" :class="{'text-green-600 border-b-2 border-green-600': $refs.tab2.textContent == tab}" x-on:click="tab = $refs.tab2.textContent">Payments</button>
          <button x-ref="tab3" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-green-600 border-b-2 border-transparent hover:border-green-600 transition duration-150" :class="{'text-green-600 border-b-2 border-green-600': $refs.tab3.textContent == tab}" x-on:click="tab = $refs.tab3.textContent">Returns</button>
          <button x-ref="tab4" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-green-600 border-b-2 border-transparent hover:border-green-600 transition duration-150" :class="{'text-green-600 border-b-2 border-green-600': $refs.tab4.textContent == tab}" x-on:click="tab = $refs.tab4.textContent">Refunds</button>
        </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

AI FAQ Component Generator

Tailwind Component #7123

Tailwind CSS

Atis

<section class="bg-gray-900" x-data="{ activeSlide: 1 }">
  <div class="flex flex-wrap">
    <div class="pt-6 lg:pt-16 pb-6 w-full lg:w-1/2">
      <div class="max-w-md mx-auto">
        <div class="mb-6 lg:mb-20 w-full px-3 flex items-center justify-between">
          <a class="text-white text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
          </a>
          <a class="py-2 px-6 text-xs rounded-l-xl rounded-t-xl bg-purple-600 hover:bg-purple-700 text-white font-bold transition duration-200" href="#">Sign In</a>
        </div>
        <div>
          <div class="mb-6 px-3">
            <span class="text-gray-500">Sign Up</span>
            <h3 class="text-2xl font-bold text-white">Create an account</h3>
          </div>
          <form action="">
            <div class="flex flex-wrap">
              <div class="mb-3 w-full lg:w-1/2 px-2">
                <input class="w-full p-4 text-xs text-gray-50 bg-gray-800 outline-none rounded" type="text" placeholder="First Name">
              </div>
              <div class="mb-3 w-full lg:w-1/2 px-2">
                <input class="w-full p-4 text-xs text-gray-50 bg-gray-800 outline-none rounded" type="text" placeholder="Last Name">
              </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

AI Sign in / Sign up Component Generator

Tailwind Component #7124

Tailwind CSS

Atis

<section x-data="{ activeSlide: 1 }">
  <div class="flex flex-wrap">
    <div class="pt-6 lg:pt-16 pb-6 w-full lg:w-1/2">
      <div class="max-w-md mx-auto">
        <div class="mb-6 lg:mb-20 w-full px-3 flex items-center justify-between">
          <a class="text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-color-black.svg" alt="" width="auto">
          </a>
          <a class="py-2 px-6 text-xs rounded-l-xl rounded-t-xl bg-purple-600 hover:bg-purple-700 text-white font-bold transition duration-200" href="#">Sign In</a>
        </div>
        <div>
          <div class="mb-6 px-3">
            <span class="text-gray-500">Sign Up</span>
            <h3 class="text-2xl font-bold">Create an account</h3>
          </div>
          <form action="">
            <div class="flex flex-wrap">
              <div class="mb-3 w-full lg:w-1/2 px-2">
                <input class="w-full p-4 text-xs bg-gray-50 outline-none rounded" type="text" placeholder="First Name">
              </div>
              <div class="mb-3 w-full lg:w-1/2 px-2">
                <input class="w-full p-4 text-xs bg-gray-50 outline-none rounded" type="text" placeholder="Last Name">
              </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

AI Sign in / Sign up Component Generator

Tailwind Component #7125

Tailwind CSS

Atis

<div class="fixed bottom-0 z-50" x-data="{ open: true }" x-show="open">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center mb-6 p-6 bg-gray-800 text-white rounded-lg">
      <div class="w-full lg:w-3/4 px-4">
        <p class="font-bold font-heading">Cookie Policy</p>
        <p class="mt-3 mb-6 text-gray-400 text-sm">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 lg:w-1/4 px-4 lg:text-right"><a class="inline-block mr-4 py-2 px-4 rounded-l-xl rounded-t-xl border-2 border-green-600 hover:border-green-700 bg-green-600 hover:bg-green-700 transition duration-200" href="#" x-on:click.prevent="open=false">Allow</a><a class="inline-block py-2 px-4 rounded-r-xl rounded-t-xl border-2 border-gray-400 hover:bg-gray-700 transition duration-200" href="#" x-on:click.prevent="open=false">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

Dark Cookie Policy Consent Banner with Allow and Decline Buttons

A dark full-width notification banner displaying a cookie policy heading, explanatory body text, and two action buttons, Allow (filled green) and Decline (outlined). It is positioned as a single contained strip with text on the left and buttons aligned to the right.

AI Cookies Component Generator

Tailwind Component #7126

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center">
        <div class="mb-4 w-full lg:w-auto lg:mr-8 text-center">
          <div class="flex justify-center items-center p-5 mx-auto w-16 h-16 bg-white rounded">
            <img class="h-8" src="atis-assets/logo/atis/atis-mono-sign.svg" alt="">
          </div>
        </div>
        <div class="mb-6 w-full lg:w-auto max-w-lg mx-auto lg:ml-0 mr-auto text-center lg:text-left">
          <h2 class="text-4xl font-bold">Stay updated with our</h2>
          <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="w-full lg:w-2/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

AI Newsletter Component Generator

Tailwind Component #7127

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="max-w-md mx-auto text-center">
      <a class="inline-block mb-6 mx-auto text-white text-3xl font-bold leading-none" href="#">
        <img class="h-12" src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
      </a>
      <p class="mb-6 text-sm font-semibold text-gray-400">© 2021. All rights reserved.</p>
      <div class="flex space-x-2 lg:space-x-4 justify-center">
        <a href="#">
          <img src="atis-assets/social/facebook-purple.svg" alt="">
        </a>
        <a href="#">
          <img src="atis-assets/social/twitter-purple.svg" alt="">
        </a>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #7128

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container px-4 mx-auto">
      <div class="mb-16 flex flex-wrap justify-center md:justify-between items-center">
        <div class="text-center lg:text-left">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Featured Projects</h2>
        </div>
        <a class="hidden md:inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Projects</a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-4">
        <div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
          <a href="#">
            <img class="h-80 w-full mx-auto object-cover rounded" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Portfolio Component Generator

Tailwind Component #7129

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-purple-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center">
        <div class="mb-4 w-full lg:w-auto lg:mr-8 text-center">
          <div class="flex justify-center items-center p-5 mx-auto w-16 h-16 bg-purple-400 rounded">
            <img class="h-8" src="atis-assets/logo/atis/atis-color-sign.svg" alt="">
          </div>
        </div>
        <div class="mb-6 w-full lg:w-auto max-w-lg mx-auto lg:ml-0 mr-auto text-center lg:text-left">
          <h2 class="text-white text-4xl font-bold font-heading">Stay updated with our tool</h2>
          <p class="text-gray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="w-full lg:w-2/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

AI Newsletter Component Generator

Tailwind Component #7130

Tailwind CSS

Atis

<section class="py-20">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-2">
      <div class="mb-4 w-full md:w-1/3 lg:w-1/6 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-6" src="atis-assets/logo/brands/slack.png" alt="">
          </a>
        </div>
      </div>
      <div class="mb-4 w-full md:w-1/3 lg:w-1/6 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-6" src="atis-assets/logo/brands/dropbox.png" alt="">
          </a>
        </div>
      </div>
      <div class="mb-4 w-full md:w-1/3 lg:w-1/6 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-6" src="atis-assets/logo/brands/spotify.png" alt="">
          </a>
        </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

Six-Logo Customer Trust Strip

A horizontal row of six equal-sized light gray tiles, each containing a company logo (Slack, Dropbox, Spotify, Amazon, Netflix, Stripe). It functions as a social proof section that builds trust by displaying recognizable customer or partner brands.

AI Logo clouds Component Generator

Tailwind Component #7131

Tailwind CSS

Atis

<section x-data="{ current: 0 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mx-auto py-10 bg-white shadow rounded">
        <div class="max-w-5xl p-4 flex flex-wrap justify-center items-center">
          <div class="mb-6 w-full lg:w-1/3 text-center">
            <img class="mb-6 mx-auto w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80" alt="">
            <h4 class="text-xl">Ian Brown</h4>
            <p class="text-green-600">Head of Development</p>
          </div>
          <div class="w-full lg:w-2/3">
            <svg class="mb-4 text-green-600 h-10" viewBox="0 0 32 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.2418 12.749C9.45369 12.522 8.66554 12.4069 7.89887 12.4069C6.71496 12.4069 5.72709 12.6775 4.96109 13.0088C5.69957 10.3053 7.47358 5.6405 11.0075 5.11517C11.3348 5.0665 11.603 4.82986 11.6923 4.51131L12.4646 1.74875C12.5298 1.51512 12.4912 1.26505 12.3579 1.06231C12.2246 0.859563 12.0105 0.724288 11.7705 0.691393C11.5097 0.655812 11.2438 0.637686 10.9803 0.637686C6.73846 0.637686 2.53756 5.06516 0.764895 11.4046C-0.275679 15.1238 -0.580802 20.7154 1.98237 24.2349C3.41668 26.2043 5.50924 27.2559 8.20198 27.361C8.21305 27.3613 8.2238 27.3616 8.23487 27.3616C11.5573 27.3616 14.5035 25.1241 15.3997 21.9208C15.9351 20.0058 15.6931 17.9975 14.7176 16.2644C13.7526 14.5508 12.1632 13.3018 10.2418 12.749Z" fill="currentColor"></path>
              <path d="M31.0396 16.2648C30.0746 14.5508 28.4852 13.3018 26.5638 12.749C25.7757 12.522 24.9875 12.4069 24.2212 12.4069C23.0373 12.4069 22.0491 12.6775 21.2831 13.0088C22.0215 10.3053 23.7955 5.6405 27.3298 5.11517C27.6571 5.0665 27.9249 4.82986 28.0146 4.51131L28.7869 1.74875C28.8521 1.51512 28.8135 1.26505 28.6802 1.06231C28.5473 0.859563 28.3331 0.724288 28.0928 0.691393C27.8323 0.655812 27.5664 0.637686 27.3026 0.637686C23.0608 0.637686 18.8599 5.06516 17.0869 11.4046C16.0466 15.1238 15.7415 20.7154 18.305 24.2356C19.739 26.2046 21.8319 27.2566 24.5243 27.3613C24.5354 27.3616 24.5461 27.362 24.5575 27.362C27.8796 27.362 30.8261 25.1244 31.7224 21.9211C32.2571 20.0061 32.0147 17.9975 31.0396 16.2648Z" fill="currentColor"></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

AI Testimonials Component Generator

Tailwind Component #7132

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 mx-auto max-w-md text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-8 lg:mb-0 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="py-10 px-6 bg-white shadow rounded text-center">
            <span class="mb-6 w-16 h-16 inline-flex justify-center items-center bg-green-100 rounded text-2xl text-green-600 font-bold">1</span>
            <h3 class="mb-4 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet</h3>
            <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus.</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

AI How it works Component Generator

Tailwind Component #7133

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/2 mb-12 lg:mb-0">
          <div class="max-w-md lg:mx-auto">
            <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
            <h2 class="my-2 text-4xl lg:text-5xl font-bold font-heading text-white">Build &amp; Launch without problems</h2>
            <p class="mb-6 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
            <ul class="text-gray-500 font-bold">
              <li class="flex mb-4">
                <svg class="mr-2 w-6 h-6 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></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

AI Features Component Generator

Tailwind Component #7134

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-green-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center">
        <div class="mb-4 w-full lg:w-auto lg:mr-8 text-center">
          <div class="flex justify-center items-center p-5 mx-auto w-16 h-16 bg-white rounded">
            <img class="h-8" src="atis-assets/logo/atis/atis-mono-sign.svg" alt="">
          </div>
        </div>
        <div class="mb-8 lg:mb-0 w-full lg:w-auto max-w-lg mx-auto lg:ml-0 mr-auto text-center lg:text-left">
          <h2 class="text-white text-4xl font-bold font-heading">Stay updated with our tool</h2>
          <p class="text-gray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="w-full lg:w-2/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

AI Newsletter Component Generator

Tailwind Component #7135

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 mx-auto max-w-md text-center">
        <span class="text-yellow-500 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-8 lg:mb-0 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="py-10 px-6 bg-white shadow rounded text-center">
            <span class="mb-6 w-16 h-16 inline-flex justify-center items-center bg-blue-100 rounded text-2xl text-blue-600 font-bold">1</span>
            <h3 class="mb-4 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet</h3>
            <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus.</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

AI How it works Component Generator

Tailwind Component #7136

Tailwind CSS

Atis

<section class="skewed-top-left skewed-bottom-right">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-purple-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap">
        <div class="w-full lg:w-1/2 px-12 lg:px-24 mb-16 lg:mb-0">
          <div class="text-center">
            <span class="mb-6 inline-block p-3 bg-pink-400 rounded">
              <svg class="w-6 h-6 text-pink-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"></path>
              </svg>
            </span>
            <h3 class="mb-2 text-4xl text-white font-bold font-heading">Many useful features</h3>
            <p class="mb-6 text-gray-50 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>

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

AI Call to action Component Generator

Tailwind Component #7137

Tailwind CSS

Atis

<section x-data="{ current: 0 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-green-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mx-auto py-10 bg-white shadow rounded">
        <div class="max-w-5xl p-4 flex flex-wrap justify-center items-center">
          <div class="mb-6 w-full lg:w-1/3 text-center">
            <img class="mb-6 mx-auto w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80" alt="">
            <h4 class="text-xl">Ian Brown</h4>
            <p class="text-green-600">Head of Development</p>
          </div>
          <div class="w-full lg:w-2/3">
            <svg class="mb-4 text-green-600 h-10" viewBox="0 0 32 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.2418 12.749C9.45369 12.522 8.66554 12.4069 7.89887 12.4069C6.71496 12.4069 5.72709 12.6775 4.96109 13.0088C5.69957 10.3053 7.47358 5.6405 11.0075 5.11517C11.3348 5.0665 11.603 4.82986 11.6923 4.51131L12.4646 1.74875C12.5298 1.51512 12.4912 1.26505 12.3579 1.06231C12.2246 0.859563 12.0105 0.724288 11.7705 0.691393C11.5097 0.655812 11.2438 0.637686 10.9803 0.637686C6.73846 0.637686 2.53756 5.06516 0.764895 11.4046C-0.275679 15.1238 -0.580802 20.7154 1.98237 24.2349C3.41668 26.2043 5.50924 27.2559 8.20198 27.361C8.21305 27.3613 8.2238 27.3616 8.23487 27.3616C11.5573 27.3616 14.5035 25.1241 15.3997 21.9208C15.9351 20.0058 15.6931 17.9975 14.7176 16.2644C13.7526 14.5508 12.1632 13.3018 10.2418 12.749Z" fill="currentColor"></path>
              <path d="M31.0396 16.2648C30.0746 14.5508 28.4852 13.3018 26.5638 12.749C25.7757 12.522 24.9875 12.4069 24.2212 12.4069C23.0373 12.4069 22.0491 12.6775 21.2831 13.0088C22.0215 10.3053 23.7955 5.6405 27.3298 5.11517C27.6571 5.0665 27.9249 4.82986 28.0146 4.51131L28.7869 1.74875C28.8521 1.51512 28.8135 1.26505 28.6802 1.06231C28.5473 0.859563 28.3331 0.724288 28.0928 0.691393C27.8323 0.655812 27.5664 0.637686 27.3026 0.637686C23.0608 0.637686 18.8599 5.06516 17.0869 11.4046C16.0466 15.1238 15.7415 20.7154 18.305 24.2356C19.739 26.2046 21.8319 27.2566 24.5243 27.3613C24.5354 27.3616 24.5461 27.362 24.5575 27.362C27.8796 27.362 30.8261 25.1244 31.7224 21.9211C32.2571 20.0061 32.0147 17.9975 31.0396 16.2648Z" fill="currentColor"></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

AI Testimonials Component Generator

Tailwind Component #7138

Tailwind CSS

Atis

<section class="skewed-top-left skewed-bottom-right">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap">
        <div class="w-full lg:w-1/2 px-12 lg:px-24 mb-16 lg:mb-0">
          <div class="text-center">
            <span class="mb-6 inline-block p-3 bg-gray-800 rounded">
              <svg class="w-6 h-6 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"></path>
              </svg>
            </span>
            <h3 class="mb-2 text-4xl text-white font-bold font-heading">Many useful features</h3>
            <p class="mb-6 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>

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

AI Call to action Component Generator

Tailwind Component #7139

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container px-4 mx-auto">
      <div class="mb-16 flex flex-wrap justify-center md:justify-between items-center">
        <div class="text-center lg:text-left">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="text-4xl lg:text-5xl font-bold font-heading">Featured Projects</h2>
        </div>
        <a class="hidden md:inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Projects</a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-4">
        <div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
          <a href="#">
            <img class="h-80 w-full mx-auto object-cover rounded" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Portfolio Component Generator

Tailwind Component #7140

Tailwind CSS

Atis

<section class="skewed-top-left skewed-bottom-right">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap">
        <div class="w-full lg:w-1/2 px-12 lg:px-24 mb-16 lg:mb-0">
          <div class="text-center">
            <span class="mb-6 inline-block p-3 bg-green-200 rounded">
              <svg class="w-6 h-6 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"></path>
              </svg>
            </span>
            <h3 class="mb-2 text-4xl font-bold font-heading">Many useful features</h3>
            <p class="mb-6 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>

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

AI Call to action Component 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

Framework

UI Library

Components

Tailwind Component #7121

Get the code for 13,400+ components

Tailwind Component #7122

Get the code for 13,400+ components

Tailwind Component #7123

Get the code for 13,400+ components

Tailwind Component #7124

Get the code for 13,400+ components

Tailwind Component #7125

Get the code for 13,400+ components

Dark Cookie Policy Consent Banner with Allow and Decline Buttons

Tailwind Component #7126

Get the code for 13,400+ components

Tailwind Component #7127

Get the code for 13,400+ components

Tailwind Component #7128

Get the code for 13,400+ components

Tailwind Component #7129

Get the code for 13,400+ components

Tailwind Component #7130

Get the code for 13,400+ components

Six-Logo Customer Trust Strip

Tailwind Component #7131

Get the code for 13,400+ components

Tailwind Component #7132

Get the code for 13,400+ components

Tailwind Component #7133

Get the code for 13,400+ components

Tailwind Component #7134

Get the code for 13,400+ components

Tailwind Component #7135

Get the code for 13,400+ components

Tailwind Component #7136

Get the code for 13,400+ components

Tailwind Component #7137

Get the code for 13,400+ components

Tailwind Component #7138

Get the code for 13,400+ components

Tailwind Component #7139

Get the code for 13,400+ components

Tailwind Component #7140

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