Tailwind CSS Components

<section class="py-20 2xl:py-40">
  <div class="container mx-auto px-4 mb-12 md:mb-20">
    <div class="max-w-4xl mx-auto text-center">
      <a class="inline-block mb-20 text-gray-900 text-xl font-bold" href="#">
        <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
      </a>
      <ul class="mb-12 md:mb-20 flex flex-wrap items-center justify-center space-x-6 md:justify-between text-lg">
        <li class="mb-4 md:mb-0"><a class="font-bold hover:underline" href="#">Home</a></li>
        <li class="mb-4 md:mb-0"><a class="font-bold hover:underline" href="#">Product</a></li>
        <li class="mb-4 md:mb-0"><a class="font-bold hover:underline" href="#">Pricing</a></li>
        <li class="mb-4 md:mb-0"><a class="font-bold hover:underline" href="#">Story</a></li>
        <li class="mb-4 md:mb-0"><a class="font-bold hover:underline" href="#">Features</a></li>
        <li class="mb-4 md:mb-0"><a class="font-bold hover:underline" href="#">Contact</a></li>
      </ul>
      <div class="flex justify-center">
        <a class="flex justify-center items-center w-12 h-12 mr-4 bg-gray-500 rounded-full" href="#">
          <svg class="h-4 w-4 text-white" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0)">
              <path d="M17.0064 3.181e-08H0.992752C0.444397 0.00027469 -0.000137297 0.445084 3.181e-08 0.993576V17.0072C0.00027469 17.5556 0.445084 18.0001 0.993576 18H17.0064C17.5551 18.0001 17.9999 17.5555 18 17.0068C18 17.0067 18 17.0066 18 17.0064V0.992752C17.9997 0.444397 17.5549 -0.000137297 17.0064 3.181e-08Z" fill="white"></path>
              <path d="M12.4277 18.0001V11.0391H14.7744L15.126 8.31453H12.4277V6.57924C12.4277 5.79221 12.6462 5.25594 13.7748 5.25594H15.2051V2.82562C14.9562 2.79253 14.1025 2.71851 13.109 2.71851C11.0348 2.71851 9.61523 3.98413 9.61523 6.30939V8.31453H7.27734V11.0391H9.61523V18.0001H12.4277Z" fill="#2D2D33"></path>
            </g>
          </svg>
        </a>
        <a class="flex justify-center items-center w-12 h-12 mr-4 bg-gray-500 rounded-full" 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2822

<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <img class="hidden lg:block absolute top-0 left-0 mt-144 -ml-24 w-96 h-96" src="zospace-assets/lines/full-circle.svg" alt="">
  <img class="hidden lg:block absolute top-0 left-0 mt-144 -ml-24 w-96 h-96" src="zospace-assets/lines/circle.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl mb-16 md:mb-24 mx-auto text-center">
      <span class="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-yellow-200 to-orange-600">Two ways to start!</span>
      <h2 class="mt-7 text-6xl 2xl:text-7xl text-white font-bold font-heading">Collaborate with your teams!</h2>
    </div>
    <div class="flex flex-wrap -m-8 mb-8 md:mb-20">
      <div class="w-full lg:w-2/3 h-96 p-8">
        <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1517171771326-cbc7f641008a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 h-96 p-8">
        <img class="w-full h-full object-cover" src="https://images.pexels.com/photos/7193529/pexels-photo-7193529.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=740&amp;w=740" alt="">
      </div>
    </div>
    <div class="max-w-xl mx-auto text-center">
      <p class="mb-14 text-3xl text-gray-200">This morning, platea dictumst nec nunc. In hac habitasse, general, dignissim accumsan just. Suspendisse vitae ligula convallis, porta tortor et, finibus neque.</p>
      <div class="inline-flex pt-14 mb-14 items-center border-t border-gray-500">
        <img class="mr-8 w-20 lg:w-24 h-20 lg:h-24 rounded-full" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="">
        <div class="text-left">
          <h4 class="mb-1 text-2xl font-bold text-gray-50">Harry Douglas</h4>
          <p class="text-white">20 april, 8:30 am</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2823

<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <img class="hidden lg:block absolute top-0 left-0 -ml-64 mt-24" src="zospace-assets/lines/circle.svg" alt="">
  <img class="hidden lg:block absolute top-0 left-0 -ml-12" src="zospace-assets/lines/blue-half-circle.svg" alt="">
  <img class="hidden lg:block absolute top-0 right-0 w-96 h-96 -mt-40 -mr-32" src="zospace-assets/lines/circle.svg" alt="">
  <img class="hidden lg:block absolute top-0 right-0" src="zospace-assets/images/stars.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap items-center -m-4">
      <div class="w-full lg:w-2/5 p-4">
        <h3 class="mb-10 text-5xl text-white font-bold font-heading">Subscribe now!</h3>
        <p class="text-xl text-gray-200">Winter is comming, dignissim and accumsan, lacus semper, ipsum fermentum.</p>
      </div>
      <div class="w-full lg:w-3/5 p-4">
        <div class="lg:max-w-xl mx-auto">
          <div class="mb-8 sm:flex sm:items-center sm:bg-white sm:rounded-full">
            <span class="hidden sm:inline-block pl-6 lg:pl-10">
              <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18.5" cy="18.5" r="9.5" fill="#1F40FF" fill-opacity="0.15"></circle><circle cx="18.5" cy="18.5" r="18.5" fill="#1F40FF" fill-opacity="0.06"></circle><circle cx="18.5" cy="18.5" r="2.5" fill="#282C36"></circle></svg>
            </span>
            <input class="w-full sm:w-auto mb-4 sm:mb-0 pl-8 sm:pl-4 py-5 rounded-full placeholder-gray-900 font-bold focus:outline-none" type="email" placeholder="Drop your Email">
            <button class="w-full sm:w-auto ml-auto px-10 py-5 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200">Subscribe</button>
          </div>
          <p class="text-gray-300">
            <span>The brown fox jumps over</span>
            <span class="text-white">the lazy dog.</span>
          </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2824

<section class="py-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-10 max-w-xl mx-auto mb-24 text-center">
      <span class="text-lg font-bold text-blue-500">How it works</span>
      <h2 class="mt-12 text-5xl lg:text-6xl text-white font-bold font-heading">Build and launch without problems</h2>
    </div>
    <div class="relative px-8 lg:pr-0 lg:pl-12 2xl:pl-24 mb-14 lg:mb-40 bg-gray-600 rounded-xl overflow-hidden">
      <div class="w-full lg:w-1/3 pt-12 lg:py-12">
        <h3 class="mb-4 text-xl font-bold text-white">How it work? Steps</h3>
        <p class="text-xl text-gray-300">Over general, dignissim accumsan, lacus vel dictum semper, agittis sollicitudin.</p>
      </div>
      <img class="lg:absolute top-0 right-0 bottom-0 h-full w-full lg:w-1/3 object-cover" src="zospace-assets/images/illustration-men-phone.svg" alt="">
    </div>
    <div class="relative flex flex-wrap justify-center -mx-10 mb-20">
      <img class="hidden lg:block absolute inset-y-0 -mr-80 -mt-16" src="zospace-assets/lines/dots-gray.svg" alt="">
      <div class="w-full lg:w-1/3 px-10 mb-20 lg:mb-0">
        <div class="relative flex">
          <img class="hidden lg:block absolute top-0 right-0 -mr-20 -mt-16" src="zospace-assets/lines/dots-gray.svg" alt="">
          <div class="mr-8">
            <span class="flex justify-center items-center w-14 h-14 text-white bg-blue-500 text-lg font-bold rounded-full">1</span>
          </div>
          <div class="max-w-xs">
            <h3 class="mb-6 text-lg font-bold font-heading text-white">Register account</h3>
            <p class="text-lg text-gray-200">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2825

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex justify-between items-center">
    <a class="text-2xl text-gray-900 font-bold" href="#">
      <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
    </a>
    <button class="flex items-center p-3 hover:bg-gray-50 text-gray-900 rounded" x-on:click="mobileNavOpen = !mobileNavOpen">
      <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="39" height="2" rx="1" fill="currentColor"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="currentColor"></rect>
        <title>Mobile menu</title>
      </svg>
    </button>
  </nav>
  <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50 hidden">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-600 opacity-80"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-gray-800 overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-10 text-2xl text-white font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-white hover:bg-gray-500 rounded-xl" href="#">Product</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-white hover:bg-gray-500 rounded-xl" href="#">Story</a></li>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2826

<div class="fixed bottom-0 right-0 z-50 px-10 pb-16" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="w-full p-14 bg-white shadow-lg rounded-xl">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-auto px-4 mb-4 lg:mb-0">
        <h3 class="mb-2 text-2xl font-bold font-heading">Cookie Policy</h3>
        <p class="max-w-xs text-gray-500 leading-loose">By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation...</p>
      </div>
      <div class="w-full md:w-1/3 px-4 flex">
        <a class="inline-flex ml-auto items-center px-8 py-4 mr-2 text-lg hover:underline font-bold" href="#">
          <span>More</span>
          <svg class="ml-3 w-6 h-4" width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M26.0851 7.66795L19.398 14.3551L18.5621 13.5192L24.242 7.8393L0.590432 7.84348L0.590431 6.66488L24.242 6.6607L18.98 1.39877L19.8159 0.562874L26.0851 6.83205C26.3159 7.06289 26.3159 7.43711 26.0851 7.66795Z" fill="#161617"></path>
          </svg>
        </a>
        <a x-on:click.prevent="open = false" class="inline-block px-12 py-4 text-lg bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-full transition duration-200" href="#">Accept</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2827

<section class="py-20 2xl:py-40" x-data="{ tab: '', showContent: false }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <div class="max-w-4xl mx-auto">
      <div class="max-w-xl mx-auto mb-12 lg:mb-16 text-center">
        <span class="text-lg text-blue-500 font-bold">Our Works</span>
        <h2 class="mt-8 mb-16 text-5xl font-bold font-heading">Lorem ispum dolor sit amet consectutar</h2>
      </div>
      <div class="lg:flex justify-center mb-16 mx-auto pb-6 border-b border-gray-50">
        <button x-ref="tab1" class="w-full md:w-auto px-8 py-4 text-lg rounded-lg font-bold shadow" :class="{ 'font-bold shadow': tab == $refs.tab1.textContent }" x-on:click="tab = $refs.tab1.textContent">Abstraction 3D</button>
        <button x-ref="tab2" class="w-full md:w-auto px-8 py-4 text-lg rounded-lg" :class="{ 'font-bold shadow': tab == $refs.tab2.textContent }" x-on:click="tab = $refs.tab2.textContent">Commercial</button>
        <button x-ref="tab3" class="w-full md:w-auto px-8 py-4 text-lg rounded-lg" :class="{ 'font-bold shadow': tab == $refs.tab3.textContent }" x-on:click="tab = $refs.tab3.textContent">Photography &amp; Film</button>
        <button x-ref="tab4" class="w-full md:w-auto px-8 py-4 text-lg rounded-lg" :class="{ 'font-bold shadow': tab == $refs.tab4.textContent }" x-on:click="tab = $refs.tab4.textContent">All projects</button>
      </div>
      <div class="flex flex-wrap mb-12 lg:mb-16 -m-6">
        <div class="w-full md:w-1/2 p-6">
          <div class="flex flex-wrap -m-6">
            <div class="w-full lg:w-1/2 p-6">
              <img class="w-full h-64 object-cover object-top" src="https://images.unsplash.com/photo-1618005198920-f0cb6201c115?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            </div>
            <div class="w-full lg:w-1/2 p-6">
              <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1618172193622-ae2d025f4032?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=959&amp;q=80" alt="">
            </div>
            <div class="w-full p-6">
              <img class="w-full h-112 object-cover" src="https://images.unsplash.com/photo-1617791160505-6f00504e3519?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1100&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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2828

<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <img class="absolute top-0 right-0 h-24 lg:h-32 lg:mr-24 mt-12" src="zospace-assets/images/stars.svg" alt="">
  <img class="absolute bottom-0 right-0 -mr-64 -mb-64" src="zospace-assets/lines/circle.svg" alt="">
  <img class="absolute bottom-0 left-0 w-64 lg:w-112" src="zospace-assets/lines/circle-gray-half.svg" alt="">
  <img class="absolute bottom-0 left-0 w-128 h-128 -mb-72" src="zospace-assets/lines/circle.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="text-center mb-12">
      <span class="text-lg font-bold text-blue-400">Contact</span>
      <h2 class="mt-12 mb-10 text-5xl text-white font-bold font-heading">Connect with our team</h2>
      <p class="max-w-md mx-auto text-lg text-gray-300">A short message that will bring your customers into the world of your imagination.</p>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="py-10 px-12 h-full bg-gray-500 rounded-lg">
          <div class="flex flex-wrap -mx-2">
            <div class="w-full md:w-auto lg:w-1/3 px-2">
              <span class="flex-shrink-0 flex items-center justify-center w-12 h-12 mr-8 bg-blue-500 rounded-full">
                <svg class="w-5 h-5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.5 11C16.0185 11 14 13.0962 14 15.6729C14 19.2285 17.8951 22.6871 18.0612 22.8339C18.3123 23.0554 18.6877 23.0554 18.9388 22.8339C19.1049 22.6885 23 19.2298 23 15.6729C23 13.0962 20.9815 11 18.5 11ZM18.5 17.4618C17.5077 17.4618 16.7003 16.6338 16.7003 15.6161C16.7003 14.5985 17.5077 13.7705 18.5 13.7705C19.4923 13.7705 20.2997 14.5985 20.2997 15.6161C20.2997 16.6338 19.4923 17.4618 18.5 17.4618Z" fill="white"></path>
                  <path d="M9.01758 0C4.04824 0 0 4.04035 0 9C0 13.9597 4.04824 18 9.01758 18C9.90081 18 10.7583 17.8745 11.5604 17.6315C10.1794 14.5374 10.8571 11.7539 12.7236 9.9193C12.6912 9.9193 12.2597 9.73436 12.2272 9.72086C8.69567 8.37903 5.3927 12.6232 8.35888 16.156C6.02299 15.94 4.00361 14.6171 2.84987 12.7096C4.09829 12.4153 5.00721 11.3057 5.02344 9.9922C5.04373 9.16199 5.60505 8.59232 6.30433 8.43573C9.41794 7.77021 9.7128 3.90535 8.51307 1.83051C9.34355 1.78461 10.0442 1.80756 11.0383 2.10049C10.7881 4.61407 12.1501 7.66087 15.1596 7.37468L16.0158 7.27614C16.0875 7.57312 16.1335 7.87011 16.1605 8.18464C16.7272 8.08745 17.4468 8.06855 18 8.17519C17.5739 3.60027 13.7056 0 9.01758 0Z" fill="white"></path>
                </svg>
              </span>
            </div>
            <div class="w-full md:w-auto lg:w-2/3 px-2 mt-4 lg:mt-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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2829

<section class="py-20 bg-white overflow-hidden" x-data="{ pagination: '1' }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-5">
      <div class="w-full md:w-1/2 lg:w-1/4 p-5 lg:mb-12">
        <div class="relative h-52">
          <a href="">
            <img class="w-full h-full object-cover object-top" src="https://images.pexels.com/photos/6822288/pexels-photo-6822288.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=450&amp;w=940" alt="">
          </a>
          <div class="absolute bottom-0 left-0 ml-8 mb-6 px-3 pb-3 pt-1 inline-block bg-white rounded-b-2xl border-t-4 border-blue-500">
            <p class="text-xl font-bold">30</p>
            <p class="text-xs uppercase text-gray-300">Feb</p>
          </div>
        </div>
        <div class="pt-10 pb-14 px-5 lg:px-10 bg-blue-50 rounded-b-lg">
          <a class="inline-block mb-6 py-1 px-3 text-white font-bold rounded-xl bg-blue-500" href="#">Music</a>
          <a href="#">
            <h3 class="mb-4 text-2xl font-bold">New: Is remote work working? A one year check-in</h3>
            <p class="text-lg text-gray-300">This morning, platea lorem dictumst nec nunc in.</p>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-5 lg:mb-12">
        <div class="relative h-52">
          <a 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2830

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex justify-between items-center">
    <a class="text-2xl text-gray-900 font-bold" href="#">
      <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 text-gray-900 rounded">
        <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="39" height="2" rx="1" fill="currentColor"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="currentColor"></rect>
          <title>Mobile menu</title>
        </svg>
      </button>
    </div>
    <div class="hidden lg:block absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
      <ul class="flex items-center space-x-16 text-lg font-bold">
        <li><a class="hover:underline" href="#">Product</a></li>
        <li><a class="hover:underline" href="#">Story</a></li>
        <li><a class="hover:underline" href="#">Features</a></li>
        <li><a class="hover:underline" href="#">Contact</a></li>
      </ul>
    </div>
    <div class="hidden lg:block"><a class="inline-block px-12 py-4 text-white font-bold bg-black border border-black hover:bg-white hover:text-black rounded-full transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50 hidden">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2831

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mb-20">
      <span class="text-lg font-bold text-blue-500">Clouds</span>
      <h2 class="mt-8 text-6xl font-bold font-heading">Trusted by brands all over the world</h2>
    </div>
    <div class="flex flex-wrap justify-center -m-4">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4">
        <div class="flex w-40 h-40 2xl:w-48 2xl:h-48 mx-auto items-center justify-center border border-gray-50 rounded-full">
          <img class="h-16" src="zospace-assets/logos/spotify-box-light.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4">
        <div class="flex w-40 h-40 2xl:w-48 2xl:h-48 mx-auto items-center justify-center border border-gray-50 rounded-full">
          <img class="h-6" src="zospace-assets/logos/we-box-light.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4">
        <div class="flex w-40 h-40 2xl:w-48 2xl:h-48 mx-auto items-center justify-center border border-gray-50 rounded-full">
          <img class="h-6" src="zospace-assets/logos/slack-box-light.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 p-4">
        <div class="flex w-40 h-40 2xl:w-48 2xl:h-48 mx-auto items-center justify-center border border-gray-50 rounded-full">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2832

<section class="py-20 bg-blue-50 overflow-hidden" x-data="{ pagination: 1 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap mb-16 bg-gray-700 rounded-lg overflow-hidden">
      <div class="w-full md:w-1/2 relative">
        <a href="#">
          <img class="w-full h-full object-cover object-top" src="https://images.pexels.com/photos/6822288/pexels-photo-6822288.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=450&amp;w=940" alt="">
        </a>
        <div class="absolute bottom-0 left-0 ml-8 mb-6 px-3 pb-3 pt-1 inline-block bg-white rounded-b-2xl border-t-4 border-blue-500">
          <p class="text-xl text-center font-bold">1</p>
          <p class="text-xs uppercase text-gray-300">Feb</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 pt-16 px-8 lg:px-14 pb-14">
        <div class="pb-8 border-b border-gray-400">
          <h3 class="text-5xl"><a class="inline-block text-white font-bold" href="#">This morning, platea dictumst nec nunc in hac habitasse dignissim accumsan.</a></h3>
        </div>
        <a class="flex items-center mt-8" href="#">
          <img class="h-8 w-8 mr-4 rounded-full" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
          <span class="text-lg text-gray-200">Joanna Kowalska</span>
        </a>
      </div>
    </div>
    <div class="flex flex-wrap mb-16 bg-gray-700 rounded-lg overflow-hidden">
      <div class="w-full md:w-1/2 relative">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2833

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex justify-between items-center">
    <a class="text-2xl text-gray-900 font-bold" href="#">
      <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 text-gray-900 rounded">
        <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="39" height="2" rx="1" fill="currentColor"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="currentColor"></rect>
          <title>Mobile menu</title>
        </svg>
      </button>
    </div>
    <div class="hidden lg:block ml-auto mr-16">
      <ul class="flex items-center space-x-16 text-lg font-bold">
        <li><a class="hover:underline" href="#">Product</a></li>
        <li><a class="hover:underline" href="#">Story</a></li>
        <li><a class="hover:underline" href="#">Features</a></li>
        <li><a class="hover:underline" href="#">Contact</a></li>
      </ul>
    </div>
    <div class="hidden lg:block"><a class="inline-block px-12 py-4 text-white font-bold bg-black border border-black hover:bg-white hover:text-black rounded-full transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50 hidden">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2834

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex justify-between items-center">
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 text-gray-900 rounded">
      <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="39" height="2" rx="1" fill="currentColor"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="currentColor"></rect>
        <title>Mobile menu</title>
      </svg>
    </button>
    <div class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
      <a class="text-2xl text-gray-900 font-bold" href="#">
        <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
      </a>
    </div>
    <div class="hidden lg:block"><a class="inline-block mr-10 text-lg text-gray-800 font-bold border-b border-gray-200 hover:border-transparent" href="#">Try for free!</a><a class="inline-block px-12 py-4 text-white font-bold bg-gray-800 border border-black hover:bg-white hover:text-gray-800 rounded-full transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50 hidden">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-600 opacity-80"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-gray-800 overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-10 text-2xl text-white font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
        </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2835

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex justify-between items-center">
    <a class="text-2xl text-gray-900 font-bold" href="#">
      <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 text-gray-900 rounded">
        <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="39" height="2" rx="1" fill="currentColor"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="currentColor"></rect>
          <title>Mobile menu</title>
        </svg>
      </button>
    </div>
    <div class="hidden lg:block absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
      <ul class="flex items-center space-x-16 text-lg font-bold">
        <li><a class="hover:underline" href="#">Product</a></li>
        <li><a class="hover:underline" href="#">Story</a></li>
        <li><a class="hover:underline" href="#">Features</a></li>
        <li><a class="hover:underline" href="#">Contact</a></li>
      </ul>
    </div>
    <div class="hidden lg:block">
      <div class="max-w-sm flex items-center bg-blue-50 rounded-full">
        <input class="hidden xl:block pl-6 py-5 rounded-full bg-transparent placeholder-gray-200 font-bold outline-none" type="search" placeholder="Search Now...">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2836

<section class="py-8 px-4 lg:px-10 bg-white" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex items-center">
    <a class="text-2xl text-gray-900 font-bold" href="#">
      <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
    </a>
    <div class="hidden lg:block ml-auto">
      <div class="max-w-sm flex items-center bg-blue-50 rounded-full">
        <input class="pl-6 py-5 rounded-full bg-transparent placeholder-gray-200 font-bold outline-none" type="search" placeholder="Search Now...">
        <button class="ml-auto px-4 lg:px-10 py-5 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0)">
              <path d="M10.5691 0C4.74145 0 0 4.74145 0 10.5691C0 16.3971 4.74145 21.1382 10.5691 21.1382C16.3971 21.1382 21.1382 16.3971 21.1382 10.5691C21.1382 4.74145 16.3971 0 10.5691 0ZM10.5691 19.187C5.81723 19.187 1.95122 15.321 1.95122 10.5691C1.95122 5.81728 5.81723 1.95122 10.5691 1.95122C15.321 1.95122 19.187 5.81723 19.187 10.5691C19.187 15.321 15.321 19.187 10.5691 19.187Z" fill="white"></path>
              <path d="M23.712 22.3346L18.1185 16.7411C17.7374 16.36 17.1201 16.36 16.739 16.7411C16.3578 17.1219 16.3578 17.7398 16.739 18.1207L22.3325 23.7142C22.523 23.9047 22.7725 24 23.0223 24C23.2717 24 23.5214 23.9047 23.712 23.7142C24.0932 23.3334 24.0932 22.7154 23.712 22.3346Z" fill="white"></path>
            </g>
            <defs><clipPath id="clip0"><rect width="24" height="24" fill="white"></rect></clipPath></defs>
          </svg>
        </button>
      </div>
    </div>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="ml-auto lg:ml-12 flex items-center p-3 hover:bg-gray-50 text-gray-900 rounded">
      <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="39" height="2" rx="1" fill="currentColor"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="currentColor"></rect>
        <title>Mobile menu</title>
      </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2837

<section class="pb-64 bg-gray-100 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <nav class="relative bg-gray-900 px-6 sm:px-12 pt-4">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
      <a class="inline-block" href="#">
        <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
      </a>
    </div>
    <div class="3xl:hidden pb-4">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
        <svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
      </button>
    </div>
    <div class="hidden 3xl:block">
      <div class="pb-2"><a class="inline-block mr-6 text-xs text-gray-400 hover:text-gray-300" href="#">Account</a><a class="inline-block text-xs text-gray-400 hover:text-gray-300" href="#">Saved</a></div>
      <div>
        <div class="flex relative">
          <div class="w-5/12 mr-auto">
            <div class="pt-5 pr-24 border-t border-gray-100 border-opacity-10">
              <ul class="flex items-center justify-end">
                <li class="mr-6">
                  <a class="inline-flex items-center pb-5 pr-8 text-sm text-white hover:text-gray-200" href="#">
                    <span class="mr-4">Collection</span>
                    <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Split-screen furniture hero with product card

A split-screen hero section with a photo of two people on the left and a dark panel on the right containing a large heading "Find your editor and create your home." A purple Discover Now button and a floating white product card for the Kirk Oak armchair overlap the image.

Tailwind Component #2838

<section class="pb-40 bg-gray-100" x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-gray-900 px-6 sm:px-12 py-4">
    <div class="hidden 3xl:block absolute bottom-0 left-1/2 transform -translate-x-1/2">
      <ul class="flex items-end">
        <li class="mr-5">
          <a class="inline-flex items-center pr-8 pb-5 text-sm text-white hover:text-gray-200" href="#">
            <span class="mr-4">Collection</span>
            <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="border-b-4 border-lime-900"></div>
        </li>
        <li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Projects</a></li>
        <li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">About</a></li>
        <li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">How to Start</a></li>
        <li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Your Design</a></li>
      </ul>
    </div>
    <div class="flex items-center 3xl:hidden">
      <a class="inline-block self-center" href="#">
        <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Real estate hero with photo background, headline, and promo email card

A full-width hero section with a large photograph of two people behind white headline text reading "Find your editor and create your home." A purple promo card on the lower left contains an email input, an Accept button, and a discount code, while a dark header bar with logo and menu toggle sits above.

Tailwind Component #2839

<section class="pb-26 bg-gray-100 relative" x-data="{ mobileNavOpen: false }">
  <div class="absolute bottom-0 left-1/2 h-26 w-26 bg-white z-10 transform -translate-x-1/2">
    <div class="absolute bottom-0 left-1/2 mb-8">
      <div class="h-26 w-px bg-white"></div>
      <div class="h-18 w-px bg-gray-800"></div>
    </div>
  </div>
  <div class="bg-gray-900">
    <nav class="mr-12 py-8 px-8 bg-gray-200 overflow-hidden">
      <div class="flex w-full items-center">
        <a class="inline-block 3xl:mr-52 self-center" href="#">
          <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="3xl:hidden flex ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-100">
          <svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
        </button>
        <ul class="hidden 3xl:flex mr-auto items-center">
          <li class="mr-14">
            <a class="inline-flex items-center text-sm text-gray-900 hover:text-gray-700" href="#">
              <span class="mr-4">Collection</span>
              <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 2L6 6L2 2" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg>
            </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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #2840