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

Tailwind CSS

Atis

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative py-6 bg-white">
    <div class="container mx-auto px-4 flex justify-between items-center">
      <a class="text-3xl font-bold leading-none" href="#">
        <img class="h-12" src="atis-assets/logo/atis/atis-mono-black.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center text-green-600 p-3">
          <svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
        <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Start</a></li>
        <li class="text-gray-300">
          <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
          </svg>
        </li>
        <li><a class="text-sm text-green-600 font-bold" href="#">About Us</a></li>
        <li class="text-gray-300">
          <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

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 Navigation (horizontal) Component Generator

Tailwind Component #7162

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-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="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-purple-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 #7163

Tailwind CSS

Atis

<section x-data="{ pricing: 'Monthly' }" x-init="pricing = $refs.pricing1.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="container px-4 mx-auto">
      <div class="mb-16 max-w-2xl mx-auto text-center">
        <div class="max-w-lg mx-auto">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">All the tools you need in one workspace.</h2>
          <p class="mb-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="inline-block py-1 px-1 bg-gray-800 rounded-lg">
          <button x-ref="pricing1" class="mr-1 text-sm py-2 px-4 text-white bg-green-600 rounded-lg shadow-md font-bold" :class="{'text-white bg-green-600 rounded-lg shadow-md': $refs.pricing1.textContent == pricing, 'text-gray-500 hover:text-gray-400': $refs.pricing1.textContent != pricing}" x-on:click="pricing = $refs.pricing1.textContent">Monthly</button>
          <button x-ref="pricing2" class="text-sm py-2 px-4 text-gray-500 hover:text-gray-400 font-bold" :class="{'text-white bg-green-600 rounded-lg shadow-md': $refs.pricing2.textContent == pricing, 'text-gray-500 hover:text-gray-400': $refs.pricing2.textContent != pricing}" x-on:click="pricing = $refs.pricing2.textContent">Yearly</button>
        </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 Pricing Component Generator

Tailwind Component #7164

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-purple-200 rounded">
              <svg class="w-6 h-6 text-purple-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

Tailwind Component #7165

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-mono-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.svg" alt="">
        </a>
        <a href="#">
          <img src="atis-assets/social/twitter.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 #7166

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="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-gray-800 rounded">
            <img class="h-12" 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-500">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 #7167

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-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="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 #7168

Tailwind CSS

Atis

<section x-data="{ pricing: 'Monthly' }" x-init="pricing = $refs.pricing1.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="container px-4 mx-auto">
      <div class="mb-16 max-w-2xl mx-auto text-center">
        <div class="max-w-lg mx-auto">
          <span class="text-purple-400 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">All the tools you need in one workspace.</h2>
          <p class="mb-6 text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="inline-block py-1 px-1 bg-purple-500 rounded-lg">
          <button x-ref="pricing1" class="mr-1 text-sm py-2 px-4 text-white bg-purple-600 rounded-lg shadow-md font-bold" :class="{'text-white bg-purple-600 rounded-lg shadow-md': $refs.pricing1.textContent == pricing, 'text-white hover:text-gray-200': $refs.pricing1.textContent != pricing}" x-on:click="pricing = $refs.pricing1.textContent">Monthly</button>
          <button x-ref="pricing2" class="text-sm py-2 px-4 text-white hover:text-gray-200 font-bold" :class="{'text-white bg-purple-600 rounded-lg shadow-md': $refs.pricing2.textContent == pricing, 'text-white hover:text-gray-200': $refs.pricing2.textContent != pricing}" x-on:click="pricing = $refs.pricing2.textContent">Yearly</button>
        </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 Pricing Component Generator

Tailwind Component #7169

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 max-w-md mx-auto text-center">
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Contact</h2>
        <p class="text-gray-500">Got any question? Let’s talk about it.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-8 lg:mb-0 w-full lg:w-1/3 px-4">
          <div class="py-12 lg:py-20 rounded bg-gray-800 shadow-md text-center">
            <h3 class="mb-8 lg:mb-20 text-3xl font-bold font-heading text-white">Office</h3>
            <p class="text-gray-400">359 Hidden</p>
            <p class="text-gray-400">Valley Road, NY</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 Contact Component Generator

Tailwind Component #7170

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="max-w-md mx-auto text-center">
      <a class="inline-block mb-6 mx-auto text-3xl font-bold leading-none" href="#">
        <img class="h-12" src="atis-assets/logo/atis/atis-mono-black.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.svg" alt="">
        </a>
        <a href="#">
          <img src="atis-assets/social/twitter.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 #7171

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 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-400 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-white hover:bg-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 #7172

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-green-500 rounded">
              <svg class="w-6 h-6 text-green-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-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 #7173

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="mb-6 flex flex-wrap justify-center">
        <div class="mb-16 w-full 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">Our Blog</h2>
        </div>
        <div class="flex flex-wrap -mx-3 mb-16">
          <div class="mb-6 lg:mb-0 w-full lg:w-1/2 px-3">
            <div class="h-full flex flex-col rounded shadow">
              <img class="rounded-t object-cover h-80 lg:h-full w-full" src="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=968&amp;q=80" alt="">
              <div class="mt-auto p-6 rounded-b bg-white">
                <span class="text-sm text-gray-400">24 Jan, 2021</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 Article Card Grid with Featured Post

A blog section with a centered eyebrow label and 'Our Blog' heading above a grid of article cards, where one large featured card spans the left column and four smaller cards sit in a 2x2 grid to the right. Each card shows a landscape image, date, bold headline, and green 'Learn More' link, with a 'View More Articles' button centered below.

AI Blog Component Generator

Tailwind Component #7174

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-pink-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-pink-600 hover:bg-pink-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 #7175

Tailwind CSS

Atis

<section x-data="{ pricing: 'Monthly' }" x-init="pricing = $refs.pricing1.textContent">
  <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 max-w-2xl mx-auto text-center">
        <div class="max-w-lg mx-auto">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading">All the tools you need in one workspace.</h2>
          <p class="mb-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="inline-block py-1 px-1 bg-white rounded-lg">
          <button x-ref="pricing1" class="mr-1 text-sm py-2 px-4 text-gray-900 bg-gray-50 rounded-lg shadow font-bold" :class="{'text-gray-900 bg-gray-50 rounded-lg shadow': $refs.pricing1.textContent == pricing, 'text-gray-500 hover:text-gray-900': $refs.pricing1.textContent != pricing}" x-on:click="pricing = $refs.pricing1.textContent">Monthly</button>
          <button x-ref="pricing2" class="text-sm py-2 px-4 text-gray-500 hover:text-gray-900 font-bold" :class="{'text-gray-900 bg-gray-50 rounded-lg shadow': $refs.pricing2.textContent == pricing, 'text-gray-500 hover:text-gray-900': $refs.pricing2.textContent != pricing}" x-on:click="pricing = $refs.pricing2.textContent">Yearly</button>
        </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 Pricing Component Generator

Tailwind Component #7176

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="mb-16 mx-auto max-w-md text-center">
        <span class="text-purple-400 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 #7177

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="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">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 #7178

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-green-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 #7179

Tailwind CSS

Atis

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative py-6 bg-gray-900">
    <div class="container mx-auto px-4 flex justify-between items-center">
      <a class="text-white text-3xl font-bold leading-none" href="#">
        <img class="h-12" src="atis-assets/logo/atis/atis-mono-white.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center text-white p-3">
          <svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
        <li><a class="text-sm text-gray-300 hover:text-white" href="#">Start</a></li>
        <li class="text-gray-800">
          <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
          </svg>
        </li>
        <li><a class="text-sm text-white font-bold" href="#">About Us</a></li>
        <li class="text-gray-800">
          <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

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 Navigation (horizontal) Component Generator

Tailwind Component #7180

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="mb-16 max-w-md mx-auto text-center">
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Contact</h2>
        <p class="text-gray-50">Got any question? Let’s talk about it.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-8 lg:mb-0 w-full lg:w-1/3 px-4">
          <div class="py-12 lg:py-20 rounded bg-white shadow-md text-center">
            <h3 class="mb-8 lg:mb-20 text-3xl font-bold font-heading">Office</h3>
            <p class="text-gray-400">359 Hidden</p>
            <p class="text-gray-400">Valley Road, NY</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 Contact 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 #7161

Get the code for 13,400+ components

Tailwind Component #7162

Get the code for 13,400+ components

Tailwind Component #7163

Get the code for 13,400+ components

Tailwind Component #7164

Get the code for 13,400+ components

Tailwind Component #7165

Get the code for 13,400+ components

Tailwind Component #7166

Get the code for 13,400+ components

Tailwind Component #7167

Get the code for 13,400+ components

Tailwind Component #7168

Get the code for 13,400+ components

Tailwind Component #7169

Get the code for 13,400+ components

Tailwind Component #7170

Get the code for 13,400+ components

Tailwind Component #7171

Get the code for 13,400+ components

Tailwind Component #7172

Get the code for 13,400+ components

Tailwind Component #7173

Get the code for 13,400+ components

Blog Article Card Grid with Featured Post

Tailwind Component #7174

Get the code for 13,400+ components

Tailwind Component #7175

Get the code for 13,400+ components

Tailwind Component #7176

Get the code for 13,400+ components

Tailwind Component #7177

Get the code for 13,400+ components

Tailwind Component #7178

Get the code for 13,400+ components

Tailwind Component #7179

Get the code for 13,400+ components

Tailwind Component #7180

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