Tailwind CSS Components

Framework

UI Library

Components

Tailwind Component #6121

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-indigo-left.svg" alt="">
  <img class="absolute top-0 right-0 md:h-full w-2/3" src="nigodo-assets/background-elements/pattern-dots-indigo-right.svg" alt="">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 w-1/2 xl:w-2/5" src="nigodo-assets/apps/laptop-half-left.svg" alt="">
    <div class="container px-4 mx-auto mb-16 lg:mb-0">
      <div class="flex flex-wrap -mx-4 lg:py-24">
        <div class="w-full lg:w-1/2 ml-auto px-4">
          <div class="max-w-xl mx-auto">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Application</span>
            <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-8">Great work starts with your app</h1>
            <p class="text-xl font-extrabold leading-7 mb-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
                <p class="text-lg font-bold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
            <div class="md:flex mb-12">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-orange-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-orange-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center mb-16">
      <span class="text-lg font-extrabold text-orange-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Flexible pricing plan for your startup</h1>
      <p class="text-xl font-extrabold leading-8">Pricing that scales with your business immediately.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="max-w-md mx-auto px-6 py-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <h2 class="text-3xl md:text-4xl font-extrabold mb-6">Small</h2>
          <p class="text-lg font-extrabold">For Individual Users</p>
          <div class="flex justify-center items-start mb-8">
            <span class="pr-1 text-lg font-extrabold">$</span>
            <span class="text-4xl md:text-5xl font-extrabold">10</span>
            <span class="pl-1 text-lg font-extrabold self-end">/mo</span>
          </div>
          <a class="inline-block w-full py-4 px-6 mb-12 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Get Started</a>
          <div class="text-left">
            <div class="flex mb-4 items-center">
              <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-orange.svg" alt="">
              <span class="text-lg font-extrabold">Access to all features</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

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

Tailwind Component #6123

Tailwind CSS

Nigodo

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <span class="text-lg font-extrabold text-purple-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Send us message</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="flex mb-14">
          <div class="flex-shrink-0 -mt-4 inline-flex items-center justify-center w-16 h-16 mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.88 15.3333C23.5867 15.3333 23.28 15.24 22.9867 15.1733C22.3931 15.0406 21.8095 14.8668 21.24 14.6533C20.6214 14.4283 19.9415 14.44 19.3311 14.6861C18.7206 14.9323 18.2228 15.3955 17.9333 15.9866L17.64 16.6C16.3451 15.8656 15.1488 14.9695 14.08 13.9333C13.0438 12.8645 12.1477 11.6682 11.4133 10.3733L12.0267 10.0933C12.6178 9.80385 13.081 9.306 13.3272 8.69555C13.5733 8.0851 13.585 7.40518 13.36 6.78663C13.1482 6.212 12.9745 5.62406 12.84 5.02663C12.7733 4.73329 12.72 4.42663 12.68 4.13329C12.5181 3.19412 12.0262 2.34362 11.2928 1.73495C10.5595 1.12627 9.63291 0.799438 8.67999 0.813293H4.66665C4.10298 0.812554 3.54552 0.930957 3.03081 1.16074C2.5161 1.39052 2.05577 1.72649 1.67999 2.14663C1.29641 2.57816 1.01081 3.08763 0.842789 3.64001C0.674774 4.19239 0.628331 4.7746 0.706652 5.34663C1.43143 10.8961 3.96693 16.0515 7.91999 20.0133C11.8818 23.9663 17.0371 26.5018 22.5867 27.2266C22.7597 27.2398 22.9336 27.2398 23.1067 27.2266C24.0899 27.2281 25.0392 26.8673 25.7733 26.2133C26.1935 25.8375 26.5294 25.3772 26.7592 24.8625C26.989 24.3478 27.1074 23.7903 27.1067 23.2266V19.2266C27.0995 18.3053 26.7745 17.4148 26.1866 16.7054C25.5987 15.9961 24.7839 15.5114 23.88 15.3333ZM24.5333 23.3333C24.5329 23.5194 24.4935 23.7033 24.4177 23.8732C24.3419 24.0431 24.2314 24.1953 24.0933 24.32C23.9472 24.4531 23.7733 24.5521 23.5842 24.6097C23.3951 24.6674 23.1955 24.6823 23 24.6533C18.0244 24.0035 13.4003 21.736 9.83999 18.2C6.27661 14.6366 3.98936 9.99645 3.33332 4.99996C3.30435 4.80441 3.31923 4.60486 3.37688 4.41576C3.43454 4.22667 3.53351 4.05276 3.66665 3.90663C3.79281 3.76683 3.94716 3.65534 4.11952 3.5795C4.29188 3.50366 4.47835 3.46519 4.66665 3.46663H8.66665C8.97487 3.45909 9.27617 3.55861 9.51927 3.74822C9.76237 3.93784 9.93225 4.20585 9.99999 4.50663C9.99999 4.86663 10.12 5.23996 10.2 5.59996C10.3541 6.29844 10.5591 6.98472 10.8133 7.65329L8.94665 8.53329C8.6258 8.68058 8.37647 8.9491 8.25332 9.27996C8.11996 9.60457 8.11996 9.96868 8.25332 10.2933C10.1723 14.4036 13.4763 17.7077 17.5867 19.6266C17.9113 19.76 18.2754 19.76 18.6 19.6266C18.9308 19.5035 19.1994 19.2541 19.3467 18.9333L20.1867 17.0666C20.8745 17.3175 21.5783 17.5224 22.2933 17.68C22.64 17.76 23.0133 17.8266 23.3733 17.88C23.6741 17.9477 23.9421 18.1176 24.1317 18.3607C24.3213 18.6038 24.4209 18.9051 24.4133 19.2133L24.5333 23.3333ZM16.6667 0.666626C16.36 0.666626 16.04 0.666626 15.7333 0.666626C15.3797 0.696684 15.0525 0.865986 14.8237 1.13729C14.5949 1.40859 14.4833 1.75967 14.5133 2.11329C14.5434 2.46691 14.7127 2.79411 14.984 3.02291C15.2553 3.2517 15.6064 3.36335 15.96 3.33329H16.6667C18.7884 3.33329 20.8232 4.17615 22.3235 5.67644C23.8238 7.17673 24.6667 9.21156 24.6667 11.3333C24.6667 11.5733 24.6667 11.8 24.6667 12.04C24.6371 12.3917 24.7482 12.7408 24.9757 13.0108C25.2031 13.2807 25.5283 13.4494 25.88 13.48H25.9867C26.3204 13.4813 26.6426 13.3574 26.8895 13.1328C27.1363 12.9081 27.2899 12.5991 27.32 12.2666C27.32 11.96 27.32 11.64 27.32 11.3333C27.32 8.50663 26.198 5.79554 24.2005 3.79553C22.203 1.79553 19.4933 0.670159 16.6667 0.666626V0.666626ZM19.3333 11.3333C19.3333 11.6869 19.4738 12.0261 19.7238 12.2761C19.9739 12.5262 20.313 12.6666 20.6667 12.6666C21.0203 12.6666 21.3594 12.5262 21.6095 12.2761C21.8595 12.0261 22 11.6869 22 11.3333C22 9.9188 21.4381 8.56225 20.4379 7.56206C19.4377 6.56186 18.0811 5.99996 16.6667 5.99996C16.313 5.99996 15.9739 6.14044 15.7238 6.39048C15.4738 6.64053 15.3333 6.97967 15.3333 7.33329C15.3333 7.68691 15.4738 8.02605 15.7238 8.2761C15.9739 8.52615 16.313 8.66663 16.6667 8.66663C17.3739 8.66663 18.0522 8.94758 18.5523 9.44768C19.0524 9.94777 19.3333 10.626 19.3333 11.3333Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-2xl font-extrabold mb-3">Phone</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #6124

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-gray-left.svg" alt="">
  <img class="absolute top-0 right-0 md:h-full w-2/3" src="nigodo-assets/background-elements/pattern-dots-gray-right.svg" alt="">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 w-1/2 xl:w-2/5" src="nigodo-assets/apps/laptop-half-left.svg" alt="">
    <div class="container px-4 mx-auto mb-16 lg:mb-0">
      <div class="flex flex-wrap -mx-4 lg:py-24">
        <div class="w-full lg:w-1/2 ml-auto px-4">
          <div class="max-w-xl mx-auto">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Application</span>
            <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-8">Great work starts with your app</h1>
            <p class="text-xl font-extrabold leading-7 mb-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
                <p class="text-lg font-bold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
            <div class="md:flex mb-12">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <span class="text-lg font-extrabold text-green-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Send us message</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="flex mb-14">
          <div class="flex-shrink-0 -mt-4 inline-flex items-center justify-center w-16 h-16 mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.88 15.3333C23.5867 15.3333 23.28 15.24 22.9867 15.1733C22.3931 15.0406 21.8095 14.8668 21.24 14.6533C20.6214 14.4283 19.9415 14.44 19.3311 14.6861C18.7206 14.9323 18.2228 15.3955 17.9333 15.9866L17.64 16.6C16.3451 15.8656 15.1488 14.9695 14.08 13.9333C13.0438 12.8645 12.1477 11.6682 11.4133 10.3733L12.0267 10.0933C12.6178 9.80385 13.081 9.306 13.3272 8.69555C13.5733 8.0851 13.585 7.40518 13.36 6.78663C13.1482 6.212 12.9745 5.62406 12.84 5.02663C12.7733 4.73329 12.72 4.42663 12.68 4.13329C12.5181 3.19412 12.0262 2.34362 11.2928 1.73495C10.5595 1.12627 9.63291 0.799438 8.67999 0.813293H4.66665C4.10298 0.812554 3.54552 0.930957 3.03081 1.16074C2.5161 1.39052 2.05577 1.72649 1.67999 2.14663C1.29641 2.57816 1.01081 3.08763 0.842789 3.64001C0.674774 4.19239 0.628331 4.7746 0.706652 5.34663C1.43143 10.8961 3.96693 16.0515 7.91999 20.0133C11.8818 23.9663 17.0371 26.5018 22.5867 27.2266C22.7597 27.2398 22.9336 27.2398 23.1067 27.2266C24.0899 27.2281 25.0392 26.8673 25.7733 26.2133C26.1935 25.8375 26.5294 25.3772 26.7592 24.8625C26.989 24.3478 27.1074 23.7903 27.1067 23.2266V19.2266C27.0995 18.3053 26.7745 17.4148 26.1866 16.7054C25.5987 15.9961 24.7839 15.5114 23.88 15.3333ZM24.5333 23.3333C24.5329 23.5194 24.4935 23.7033 24.4177 23.8732C24.3419 24.0431 24.2314 24.1953 24.0933 24.32C23.9472 24.4531 23.7733 24.5521 23.5842 24.6097C23.3951 24.6674 23.1955 24.6823 23 24.6533C18.0244 24.0035 13.4003 21.736 9.83999 18.2C6.27661 14.6366 3.98936 9.99645 3.33332 4.99996C3.30435 4.80441 3.31923 4.60486 3.37688 4.41576C3.43454 4.22667 3.53351 4.05276 3.66665 3.90663C3.79281 3.76683 3.94716 3.65534 4.11952 3.5795C4.29188 3.50366 4.47835 3.46519 4.66665 3.46663H8.66665C8.97487 3.45909 9.27617 3.55861 9.51927 3.74822C9.76237 3.93784 9.93225 4.20585 9.99999 4.50663C9.99999 4.86663 10.12 5.23996 10.2 5.59996C10.3541 6.29844 10.5591 6.98472 10.8133 7.65329L8.94665 8.53329C8.6258 8.68058 8.37647 8.9491 8.25332 9.27996C8.11996 9.60457 8.11996 9.96868 8.25332 10.2933C10.1723 14.4036 13.4763 17.7077 17.5867 19.6266C17.9113 19.76 18.2754 19.76 18.6 19.6266C18.9308 19.5035 19.1994 19.2541 19.3467 18.9333L20.1867 17.0666C20.8745 17.3175 21.5783 17.5224 22.2933 17.68C22.64 17.76 23.0133 17.8266 23.3733 17.88C23.6741 17.9477 23.9421 18.1176 24.1317 18.3607C24.3213 18.6038 24.4209 18.9051 24.4133 19.2133L24.5333 23.3333ZM16.6667 0.666626C16.36 0.666626 16.04 0.666626 15.7333 0.666626C15.3797 0.696684 15.0525 0.865986 14.8237 1.13729C14.5949 1.40859 14.4833 1.75967 14.5133 2.11329C14.5434 2.46691 14.7127 2.79411 14.984 3.02291C15.2553 3.2517 15.6064 3.36335 15.96 3.33329H16.6667C18.7884 3.33329 20.8232 4.17615 22.3235 5.67644C23.8238 7.17673 24.6667 9.21156 24.6667 11.3333C24.6667 11.5733 24.6667 11.8 24.6667 12.04C24.6371 12.3917 24.7482 12.7408 24.9757 13.0108C25.2031 13.2807 25.5283 13.4494 25.88 13.48H25.9867C26.3204 13.4813 26.6426 13.3574 26.8895 13.1328C27.1363 12.9081 27.2899 12.5991 27.32 12.2666C27.32 11.96 27.32 11.64 27.32 11.3333C27.32 8.50663 26.198 5.79554 24.2005 3.79553C22.203 1.79553 19.4933 0.670159 16.6667 0.666626V0.666626ZM19.3333 11.3333C19.3333 11.6869 19.4738 12.0261 19.7238 12.2761C19.9739 12.5262 20.313 12.6666 20.6667 12.6666C21.0203 12.6666 21.3594 12.5262 21.6095 12.2761C21.8595 12.0261 22 11.6869 22 11.3333C22 9.9188 21.4381 8.56225 20.4379 7.56206C19.4377 6.56186 18.0811 5.99996 16.6667 5.99996C16.313 5.99996 15.9739 6.14044 15.7238 6.39048C15.4738 6.64053 15.3333 6.97967 15.3333 7.33329C15.3333 7.68691 15.4738 8.02605 15.7238 8.2761C15.9739 8.52615 16.313 8.66663 16.6667 8.66663C17.3739 8.66663 18.0522 8.94758 18.5523 9.44768C19.0524 9.94777 19.3333 10.626 19.3333 11.3333Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-2xl font-extrabold mb-3">Phone</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #6126

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden" x-data="{ category: '', start: 3, max: 9, current: 3, pagination: 1 }" x-init="category = $refs.category1.textContent, pagination = $refs.pagination1.textContent">
  <img class="absolute top-0 left-0 w-1/2 mt-4 md:mt-16" src="nigodo-assets/background-elements/pattern-dots-2-indigo-light-left.svg" alt="">
  <img class="absolute bottom-0 right-0 mb-20" src="nigodo-assets/background-elements/pattern-smash-rotate-indigo-light-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
    </div>
    <div class="mb-10">
      <div class="lg:flex items-center -mb-4">
        <a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category!= $refs.category1.textContent }" href="#">All Categories</a>
        <a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category!= $refs.category2.textContent}" href="#">Technology</a>
        <a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category!= $refs.category3.textContent }" href="#">Development</a>
        <a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category!= $refs.category4.textContent }" href="#">Marketing</a>
        <a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="inline-block mb-4 text-xl text-gray-400 hover:text-gray-500 font-extrabold" :class="{ 'text-gray-400 hover:text-gray-500': category!= $refs.category5.textContent }" href="#">Startup</a>
    </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="md:flex bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <div class="w-full md:w-1/2">
            <img class="h-72 lg:h-full w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #6127

Tailwind CSS

Nigodo

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <span class="text-lg font-extrabold text-indigo-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Send us message</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="flex mb-14">
          <div class="flex-shrink-0 -mt-4 inline-flex items-center justify-center w-16 h-16 mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.88 15.3333C23.5867 15.3333 23.28 15.24 22.9867 15.1733C22.3931 15.0406 21.8095 14.8668 21.24 14.6533C20.6214 14.4283 19.9415 14.44 19.3311 14.6861C18.7206 14.9323 18.2228 15.3955 17.9333 15.9866L17.64 16.6C16.3451 15.8656 15.1488 14.9695 14.08 13.9333C13.0438 12.8645 12.1477 11.6682 11.4133 10.3733L12.0267 10.0933C12.6178 9.80385 13.081 9.306 13.3272 8.69555C13.5733 8.0851 13.585 7.40518 13.36 6.78663C13.1482 6.212 12.9745 5.62406 12.84 5.02663C12.7733 4.73329 12.72 4.42663 12.68 4.13329C12.5181 3.19412 12.0262 2.34362 11.2928 1.73495C10.5595 1.12627 9.63291 0.799438 8.67999 0.813293H4.66665C4.10298 0.812554 3.54552 0.930957 3.03081 1.16074C2.5161 1.39052 2.05577 1.72649 1.67999 2.14663C1.29641 2.57816 1.01081 3.08763 0.842789 3.64001C0.674774 4.19239 0.628331 4.7746 0.706652 5.34663C1.43143 10.8961 3.96693 16.0515 7.91999 20.0133C11.8818 23.9663 17.0371 26.5018 22.5867 27.2266C22.7597 27.2398 22.9336 27.2398 23.1067 27.2266C24.0899 27.2281 25.0392 26.8673 25.7733 26.2133C26.1935 25.8375 26.5294 25.3772 26.7592 24.8625C26.989 24.3478 27.1074 23.7903 27.1067 23.2266V19.2266C27.0995 18.3053 26.7745 17.4148 26.1866 16.7054C25.5987 15.9961 24.7839 15.5114 23.88 15.3333ZM24.5333 23.3333C24.5329 23.5194 24.4935 23.7033 24.4177 23.8732C24.3419 24.0431 24.2314 24.1953 24.0933 24.32C23.9472 24.4531 23.7733 24.5521 23.5842 24.6097C23.3951 24.6674 23.1955 24.6823 23 24.6533C18.0244 24.0035 13.4003 21.736 9.83999 18.2C6.27661 14.6366 3.98936 9.99645 3.33332 4.99996C3.30435 4.80441 3.31923 4.60486 3.37688 4.41576C3.43454 4.22667 3.53351 4.05276 3.66665 3.90663C3.79281 3.76683 3.94716 3.65534 4.11952 3.5795C4.29188 3.50366 4.47835 3.46519 4.66665 3.46663H8.66665C8.97487 3.45909 9.27617 3.55861 9.51927 3.74822C9.76237 3.93784 9.93225 4.20585 9.99999 4.50663C9.99999 4.86663 10.12 5.23996 10.2 5.59996C10.3541 6.29844 10.5591 6.98472 10.8133 7.65329L8.94665 8.53329C8.6258 8.68058 8.37647 8.9491 8.25332 9.27996C8.11996 9.60457 8.11996 9.96868 8.25332 10.2933C10.1723 14.4036 13.4763 17.7077 17.5867 19.6266C17.9113 19.76 18.2754 19.76 18.6 19.6266C18.9308 19.5035 19.1994 19.2541 19.3467 18.9333L20.1867 17.0666C20.8745 17.3175 21.5783 17.5224 22.2933 17.68C22.64 17.76 23.0133 17.8266 23.3733 17.88C23.6741 17.9477 23.9421 18.1176 24.1317 18.3607C24.3213 18.6038 24.4209 18.9051 24.4133 19.2133L24.5333 23.3333ZM16.6667 0.666626C16.36 0.666626 16.04 0.666626 15.7333 0.666626C15.3797 0.696684 15.0525 0.865986 14.8237 1.13729C14.5949 1.40859 14.4833 1.75967 14.5133 2.11329C14.5434 2.46691 14.7127 2.79411 14.984 3.02291C15.2553 3.2517 15.6064 3.36335 15.96 3.33329H16.6667C18.7884 3.33329 20.8232 4.17615 22.3235 5.67644C23.8238 7.17673 24.6667 9.21156 24.6667 11.3333C24.6667 11.5733 24.6667 11.8 24.6667 12.04C24.6371 12.3917 24.7482 12.7408 24.9757 13.0108C25.2031 13.2807 25.5283 13.4494 25.88 13.48H25.9867C26.3204 13.4813 26.6426 13.3574 26.8895 13.1328C27.1363 12.9081 27.2899 12.5991 27.32 12.2666C27.32 11.96 27.32 11.64 27.32 11.3333C27.32 8.50663 26.198 5.79554 24.2005 3.79553C22.203 1.79553 19.4933 0.670159 16.6667 0.666626V0.666626ZM19.3333 11.3333C19.3333 11.6869 19.4738 12.0261 19.7238 12.2761C19.9739 12.5262 20.313 12.6666 20.6667 12.6666C21.0203 12.6666 21.3594 12.5262 21.6095 12.2761C21.8595 12.0261 22 11.6869 22 11.3333C22 9.9188 21.4381 8.56225 20.4379 7.56206C19.4377 6.56186 18.0811 5.99996 16.6667 5.99996C16.313 5.99996 15.9739 6.14044 15.7238 6.39048C15.4738 6.64053 15.3333 6.97967 15.3333 7.33329C15.3333 7.68691 15.4738 8.02605 15.7238 8.2761C15.9739 8.52615 16.313 8.66663 16.6667 8.66663C17.3739 8.66663 18.0522 8.94758 18.5523 9.44768C19.0524 9.94777 19.3333 10.626 19.3333 11.3333Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-2xl font-extrabold mb-3">Phone</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #6128

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-green-left.svg" alt="">
  <img class="absolute top-0 right-0 md:h-full w-2/3" src="nigodo-assets/background-elements/pattern-dots-green-right.svg" alt="">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 w-1/2 xl:w-2/5" src="nigodo-assets/apps/laptop-half-left.svg" alt="">
    <div class="container px-4 mx-auto mb-16 lg:mb-0">
      <div class="flex flex-wrap -mx-4 lg:py-24">
        <div class="w-full lg:w-1/2 ml-auto px-4">
          <div class="max-w-xl mx-auto">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Application</span>
            <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-8">Great work starts with your app</h1>
            <p class="text-xl font-extrabold leading-7 mb-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
                <p class="text-lg font-bold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
            <div class="md:flex mb-12">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-purple-left.svg" alt="">
  <img class="absolute top-0 right-0 md:h-full w-2/3" src="nigodo-assets/background-elements/pattern-dots-purple-right.svg" alt="">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 w-1/2 xl:w-2/5" src="nigodo-assets/apps/laptop-half-left.svg" alt="">
    <div class="container px-4 mx-auto mb-16 lg:mb-0">
      <div class="flex flex-wrap -mx-4 lg:py-24">
        <div class="w-full lg:w-1/2 ml-auto px-4">
          <div class="max-w-xl mx-auto">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Application</span>
            <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-8">Great work starts with your app</h1>
            <p class="text-xl font-extrabold leading-7 mb-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
                <p class="text-lg font-bold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
            <div class="md:flex mb-12">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <span class="text-lg font-extrabold text-orange-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Send us message</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="flex mb-14">
          <div class="flex-shrink-0 -mt-4 inline-flex items-center justify-center w-16 h-16 mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.88 15.3333C23.5867 15.3333 23.28 15.24 22.9867 15.1733C22.3931 15.0406 21.8095 14.8668 21.24 14.6533C20.6214 14.4283 19.9415 14.44 19.3311 14.6861C18.7206 14.9323 18.2228 15.3955 17.9333 15.9866L17.64 16.6C16.3451 15.8656 15.1488 14.9695 14.08 13.9333C13.0438 12.8645 12.1477 11.6682 11.4133 10.3733L12.0267 10.0933C12.6178 9.80385 13.081 9.306 13.3272 8.69555C13.5733 8.0851 13.585 7.40518 13.36 6.78663C13.1482 6.212 12.9745 5.62406 12.84 5.02663C12.7733 4.73329 12.72 4.42663 12.68 4.13329C12.5181 3.19412 12.0262 2.34362 11.2928 1.73495C10.5595 1.12627 9.63291 0.799438 8.67999 0.813293H4.66665C4.10298 0.812554 3.54552 0.930957 3.03081 1.16074C2.5161 1.39052 2.05577 1.72649 1.67999 2.14663C1.29641 2.57816 1.01081 3.08763 0.842789 3.64001C0.674774 4.19239 0.628331 4.7746 0.706652 5.34663C1.43143 10.8961 3.96693 16.0515 7.91999 20.0133C11.8818 23.9663 17.0371 26.5018 22.5867 27.2266C22.7597 27.2398 22.9336 27.2398 23.1067 27.2266C24.0899 27.2281 25.0392 26.8673 25.7733 26.2133C26.1935 25.8375 26.5294 25.3772 26.7592 24.8625C26.989 24.3478 27.1074 23.7903 27.1067 23.2266V19.2266C27.0995 18.3053 26.7745 17.4148 26.1866 16.7054C25.5987 15.9961 24.7839 15.5114 23.88 15.3333ZM24.5333 23.3333C24.5329 23.5194 24.4935 23.7033 24.4177 23.8732C24.3419 24.0431 24.2314 24.1953 24.0933 24.32C23.9472 24.4531 23.7733 24.5521 23.5842 24.6097C23.3951 24.6674 23.1955 24.6823 23 24.6533C18.0244 24.0035 13.4003 21.736 9.83999 18.2C6.27661 14.6366 3.98936 9.99645 3.33332 4.99996C3.30435 4.80441 3.31923 4.60486 3.37688 4.41576C3.43454 4.22667 3.53351 4.05276 3.66665 3.90663C3.79281 3.76683 3.94716 3.65534 4.11952 3.5795C4.29188 3.50366 4.47835 3.46519 4.66665 3.46663H8.66665C8.97487 3.45909 9.27617 3.55861 9.51927 3.74822C9.76237 3.93784 9.93225 4.20585 9.99999 4.50663C9.99999 4.86663 10.12 5.23996 10.2 5.59996C10.3541 6.29844 10.5591 6.98472 10.8133 7.65329L8.94665 8.53329C8.6258 8.68058 8.37647 8.9491 8.25332 9.27996C8.11996 9.60457 8.11996 9.96868 8.25332 10.2933C10.1723 14.4036 13.4763 17.7077 17.5867 19.6266C17.9113 19.76 18.2754 19.76 18.6 19.6266C18.9308 19.5035 19.1994 19.2541 19.3467 18.9333L20.1867 17.0666C20.8745 17.3175 21.5783 17.5224 22.2933 17.68C22.64 17.76 23.0133 17.8266 23.3733 17.88C23.6741 17.9477 23.9421 18.1176 24.1317 18.3607C24.3213 18.6038 24.4209 18.9051 24.4133 19.2133L24.5333 23.3333ZM16.6667 0.666626C16.36 0.666626 16.04 0.666626 15.7333 0.666626C15.3797 0.696684 15.0525 0.865986 14.8237 1.13729C14.5949 1.40859 14.4833 1.75967 14.5133 2.11329C14.5434 2.46691 14.7127 2.79411 14.984 3.02291C15.2553 3.2517 15.6064 3.36335 15.96 3.33329H16.6667C18.7884 3.33329 20.8232 4.17615 22.3235 5.67644C23.8238 7.17673 24.6667 9.21156 24.6667 11.3333C24.6667 11.5733 24.6667 11.8 24.6667 12.04C24.6371 12.3917 24.7482 12.7408 24.9757 13.0108C25.2031 13.2807 25.5283 13.4494 25.88 13.48H25.9867C26.3204 13.4813 26.6426 13.3574 26.8895 13.1328C27.1363 12.9081 27.2899 12.5991 27.32 12.2666C27.32 11.96 27.32 11.64 27.32 11.3333C27.32 8.50663 26.198 5.79554 24.2005 3.79553C22.203 1.79553 19.4933 0.670159 16.6667 0.666626V0.666626ZM19.3333 11.3333C19.3333 11.6869 19.4738 12.0261 19.7238 12.2761C19.9739 12.5262 20.313 12.6666 20.6667 12.6666C21.0203 12.6666 21.3594 12.5262 21.6095 12.2761C21.8595 12.0261 22 11.6869 22 11.3333C22 9.9188 21.4381 8.56225 20.4379 7.56206C19.4377 6.56186 18.0811 5.99996 16.6667 5.99996C16.313 5.99996 15.9739 6.14044 15.7238 6.39048C15.4738 6.64053 15.3333 6.97967 15.3333 7.33329C15.3333 7.68691 15.4738 8.02605 15.7238 8.2761C15.9739 8.52615 16.313 8.66663 16.6667 8.66663C17.3739 8.66663 18.0522 8.94758 18.5523 9.44768C19.0524 9.94777 19.3333 10.626 19.3333 11.3333Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-2xl font-extrabold mb-3">Phone</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #6131

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-pink-left.svg" alt="">
  <img class="absolute top-0 right-0 md:h-full w-2/3" src="nigodo-assets/background-elements/pattern-dots-pink-right.svg" alt="">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 w-1/2 xl:w-2/5" src="nigodo-assets/apps/laptop-half-left.svg" alt="">
    <div class="container px-4 mx-auto mb-16 lg:mb-0">
      <div class="flex flex-wrap -mx-4 lg:py-24">
        <div class="w-full lg:w-1/2 ml-auto px-4">
          <div class="max-w-xl mx-auto">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Application</span>
            <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-8">Great work starts with your app</h1>
            <p class="text-xl font-extrabold leading-7 mb-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
                <p class="text-lg font-bold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
            <div class="md:flex mb-12">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 left-0 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-red-left.svg" alt="">
  <img class="absolute top-0 right-0 md:h-full w-2/3" src="nigodo-assets/background-elements/pattern-dots-red-right.svg" alt="">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 w-1/2 xl:w-2/5" src="nigodo-assets/apps/laptop-half-left.svg" alt="">
    <div class="container px-4 mx-auto mb-16 lg:mb-0">
      <div class="flex flex-wrap -mx-4 lg:py-24">
        <div class="w-full lg:w-1/2 ml-auto px-4">
          <div class="max-w-xl mx-auto">
            <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Application</span>
            <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-8">Great work starts with your app</h1>
            <p class="text-xl font-extrabold leading-7 mb-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="md:flex mb-12">
              <div class="flex-shrink-0 inline-flex items-center justify-center w-16 h-16 mb-6 md:mb-0 md:mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.6667 28.84H6.66667C5.6058 28.84 4.58839 28.4185 3.83824 27.6684C3.08809 26.9182 2.66667 25.9008 2.66667 24.84V14.1733C2.66667 13.8197 2.52619 13.4805 2.27614 13.2305C2.02609 12.9804 1.68696 12.84 1.33333 12.84C0.979711 12.84 0.640573 12.9804 0.390524 13.2305C0.140476 13.4805 0 13.8197 0 14.1733L0 24.84C0 26.6081 0.702379 28.3038 1.95262 29.554C3.20286 30.8043 4.89856 31.5066 6.66667 31.5066H22.6667C23.0203 31.5066 23.3594 31.3662 23.6095 31.1161C23.8595 30.8661 24 30.5269 24 30.1733C24 29.8197 23.8595 29.4805 23.6095 29.2305C23.3594 28.9804 23.0203 28.84 22.6667 28.84ZM28 4.83997H9.33333C8.27247 4.83997 7.25505 5.26139 6.50491 6.01154C5.75476 6.76168 5.33333 7.7791 5.33333 8.83997V22.1733C5.33333 23.2342 5.75476 24.2516 6.50491 25.0017C7.25505 25.7519 8.27247 26.1733 9.33333 26.1733H28C29.0609 26.1733 30.0783 25.7519 30.8284 25.0017C31.5786 24.2516 32 23.2342 32 22.1733V8.83997C32 7.7791 31.5786 6.76168 30.8284 6.01154C30.0783 5.26139 29.0609 4.83997 28 4.83997ZM27.4533 7.50663L19.6133 15.3466C19.4894 15.4716 19.3419 15.5708 19.1794 15.6385C19.017 15.7062 18.8427 15.741 18.6667 15.741C18.4907 15.741 18.3164 15.7062 18.1539 15.6385C17.9914 15.5708 17.844 15.4716 17.72 15.3466L9.88 7.50663H27.4533ZM29.3333 22.1733C29.3333 22.5269 29.1929 22.8661 28.9428 23.1161C28.6928 23.3662 28.3536 23.5066 28 23.5066H9.33333C8.97971 23.5066 8.64057 23.3662 8.39052 23.1161C8.14048 22.8661 8 22.5269 8 22.1733V9.3333L15.84 17.1733C16.59 17.9224 17.6067 18.3431 18.6667 18.3431C19.7267 18.3431 20.7433 17.9224 21.4933 17.1733L29.3333 9.3333V22.1733Z" fill="#171952"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-2xl font-extrabold mb-4">Measure your performance</h3>
                <p class="text-lg font-bold">Stay connected with your team and make quick decisions wherever you are.</p>
              </div>
            </div>
            <div class="md:flex mb-12">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-purple-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-purple-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center mb-16">
      <span class="text-lg font-extrabold text-purple-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Flexible pricing plan for your startup</h1>
      <p class="text-xl font-extrabold leading-8">Pricing that scales with your business immediately.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="max-w-md mx-auto px-6 py-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <h2 class="text-3xl md:text-4xl font-extrabold mb-6">Small</h2>
          <p class="text-lg font-extrabold">For Individual Users</p>
          <div class="flex justify-center items-start mb-8">
            <span class="pr-1 text-lg font-extrabold">$</span>
            <span class="text-4xl md:text-5xl font-extrabold">10</span>
            <span class="pl-1 text-lg font-extrabold self-end">/mo</span>
          </div>
          <a class="inline-block w-full py-4 px-6 mb-12 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Get Started</a>
          <div class="text-left">
            <div class="flex mb-4 items-center">
              <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-purple.svg" alt="">
              <span class="text-lg font-extrabold">Access to all features</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

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

Tailwind Component #6134

Tailwind CSS

Nigodo

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <span class="text-lg font-extrabold text-gray-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Send us message</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="flex mb-14">
          <div class="flex-shrink-0 -mt-4 inline-flex items-center justify-center w-16 h-16 mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.88 15.3333C23.5867 15.3333 23.28 15.24 22.9867 15.1733C22.3931 15.0406 21.8095 14.8668 21.24 14.6533C20.6214 14.4283 19.9415 14.44 19.3311 14.6861C18.7206 14.9323 18.2228 15.3955 17.9333 15.9866L17.64 16.6C16.3451 15.8656 15.1488 14.9695 14.08 13.9333C13.0438 12.8645 12.1477 11.6682 11.4133 10.3733L12.0267 10.0933C12.6178 9.80385 13.081 9.306 13.3272 8.69555C13.5733 8.0851 13.585 7.40518 13.36 6.78663C13.1482 6.212 12.9745 5.62406 12.84 5.02663C12.7733 4.73329 12.72 4.42663 12.68 4.13329C12.5181 3.19412 12.0262 2.34362 11.2928 1.73495C10.5595 1.12627 9.63291 0.799438 8.67999 0.813293H4.66665C4.10298 0.812554 3.54552 0.930957 3.03081 1.16074C2.5161 1.39052 2.05577 1.72649 1.67999 2.14663C1.29641 2.57816 1.01081 3.08763 0.842789 3.64001C0.674774 4.19239 0.628331 4.7746 0.706652 5.34663C1.43143 10.8961 3.96693 16.0515 7.91999 20.0133C11.8818 23.9663 17.0371 26.5018 22.5867 27.2266C22.7597 27.2398 22.9336 27.2398 23.1067 27.2266C24.0899 27.2281 25.0392 26.8673 25.7733 26.2133C26.1935 25.8375 26.5294 25.3772 26.7592 24.8625C26.989 24.3478 27.1074 23.7903 27.1067 23.2266V19.2266C27.0995 18.3053 26.7745 17.4148 26.1866 16.7054C25.5987 15.9961 24.7839 15.5114 23.88 15.3333ZM24.5333 23.3333C24.5329 23.5194 24.4935 23.7033 24.4177 23.8732C24.3419 24.0431 24.2314 24.1953 24.0933 24.32C23.9472 24.4531 23.7733 24.5521 23.5842 24.6097C23.3951 24.6674 23.1955 24.6823 23 24.6533C18.0244 24.0035 13.4003 21.736 9.83999 18.2C6.27661 14.6366 3.98936 9.99645 3.33332 4.99996C3.30435 4.80441 3.31923 4.60486 3.37688 4.41576C3.43454 4.22667 3.53351 4.05276 3.66665 3.90663C3.79281 3.76683 3.94716 3.65534 4.11952 3.5795C4.29188 3.50366 4.47835 3.46519 4.66665 3.46663H8.66665C8.97487 3.45909 9.27617 3.55861 9.51927 3.74822C9.76237 3.93784 9.93225 4.20585 9.99999 4.50663C9.99999 4.86663 10.12 5.23996 10.2 5.59996C10.3541 6.29844 10.5591 6.98472 10.8133 7.65329L8.94665 8.53329C8.6258 8.68058 8.37647 8.9491 8.25332 9.27996C8.11996 9.60457 8.11996 9.96868 8.25332 10.2933C10.1723 14.4036 13.4763 17.7077 17.5867 19.6266C17.9113 19.76 18.2754 19.76 18.6 19.6266C18.9308 19.5035 19.1994 19.2541 19.3467 18.9333L20.1867 17.0666C20.8745 17.3175 21.5783 17.5224 22.2933 17.68C22.64 17.76 23.0133 17.8266 23.3733 17.88C23.6741 17.9477 23.9421 18.1176 24.1317 18.3607C24.3213 18.6038 24.4209 18.9051 24.4133 19.2133L24.5333 23.3333ZM16.6667 0.666626C16.36 0.666626 16.04 0.666626 15.7333 0.666626C15.3797 0.696684 15.0525 0.865986 14.8237 1.13729C14.5949 1.40859 14.4833 1.75967 14.5133 2.11329C14.5434 2.46691 14.7127 2.79411 14.984 3.02291C15.2553 3.2517 15.6064 3.36335 15.96 3.33329H16.6667C18.7884 3.33329 20.8232 4.17615 22.3235 5.67644C23.8238 7.17673 24.6667 9.21156 24.6667 11.3333C24.6667 11.5733 24.6667 11.8 24.6667 12.04C24.6371 12.3917 24.7482 12.7408 24.9757 13.0108C25.2031 13.2807 25.5283 13.4494 25.88 13.48H25.9867C26.3204 13.4813 26.6426 13.3574 26.8895 13.1328C27.1363 12.9081 27.2899 12.5991 27.32 12.2666C27.32 11.96 27.32 11.64 27.32 11.3333C27.32 8.50663 26.198 5.79554 24.2005 3.79553C22.203 1.79553 19.4933 0.670159 16.6667 0.666626V0.666626ZM19.3333 11.3333C19.3333 11.6869 19.4738 12.0261 19.7238 12.2761C19.9739 12.5262 20.313 12.6666 20.6667 12.6666C21.0203 12.6666 21.3594 12.5262 21.6095 12.2761C21.8595 12.0261 22 11.6869 22 11.3333C22 9.9188 21.4381 8.56225 20.4379 7.56206C19.4377 6.56186 18.0811 5.99996 16.6667 5.99996C16.313 5.99996 15.9739 6.14044 15.7238 6.39048C15.4738 6.64053 15.3333 6.97967 15.3333 7.33329C15.3333 7.68691 15.4738 8.02605 15.7238 8.2761C15.9739 8.52615 16.313 8.66663 16.6667 8.66663C17.3739 8.66663 18.0522 8.94758 18.5523 9.44768C19.0524 9.94777 19.3333 10.626 19.3333 11.3333Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-2xl font-extrabold mb-3">Phone</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #6135

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-green-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-green-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center mb-16">
      <span class="text-lg font-extrabold text-green-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Flexible pricing plan for your startup</h1>
      <p class="text-xl font-extrabold leading-8">Pricing that scales with your business immediately.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="max-w-md mx-auto px-6 py-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <h2 class="text-3xl md:text-4xl font-extrabold mb-6">Small</h2>
          <p class="text-lg font-extrabold">For Individual Users</p>
          <div class="flex justify-center items-start mb-8">
            <span class="pr-1 text-lg font-extrabold">$</span>
            <span class="text-4xl md:text-5xl font-extrabold">10</span>
            <span class="pl-1 text-lg font-extrabold self-end">/mo</span>
          </div>
          <a class="inline-block w-full py-4 px-6 mb-12 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Get Started</a>
          <div class="text-left">
            <div class="flex mb-4 items-center">
              <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
              <span class="text-lg font-extrabold">Access to all features</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

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

Tailwind Component #6136

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-indigo-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-indigo-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center mb-16">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Flexible pricing plan for your startup</h1>
      <p class="text-xl font-extrabold leading-8">Pricing that scales with your business immediately.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="max-w-md mx-auto px-6 py-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <h2 class="text-3xl md:text-4xl font-extrabold mb-6">Small</h2>
          <p class="text-lg font-extrabold">For Individual Users</p>
          <div class="flex justify-center items-start mb-8">
            <span class="pr-1 text-lg font-extrabold">$</span>
            <span class="text-4xl md:text-5xl font-extrabold">10</span>
            <span class="pl-1 text-lg font-extrabold self-end">/mo</span>
          </div>
          <a class="inline-block w-full py-4 px-6 mb-12 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Get Started</a>
          <div class="text-left">
            <div class="flex mb-4 items-center">
              <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-indigo.svg" alt="">
              <span class="text-lg font-extrabold">Access to all features</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

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

Tailwind Component #6137

Tailwind CSS

Nigodo

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <span class="text-lg font-extrabold text-indigo-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Send us message</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="flex mb-14">
          <div class="flex-shrink-0 -mt-4 inline-flex items-center justify-center w-16 h-16 mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.88 15.3333C23.5867 15.3333 23.28 15.24 22.9867 15.1733C22.3931 15.0406 21.8095 14.8668 21.24 14.6533C20.6214 14.4283 19.9415 14.44 19.3311 14.6861C18.7206 14.9323 18.2228 15.3955 17.9333 15.9866L17.64 16.6C16.3451 15.8656 15.1488 14.9695 14.08 13.9333C13.0438 12.8645 12.1477 11.6682 11.4133 10.3733L12.0267 10.0933C12.6178 9.80385 13.081 9.306 13.3272 8.69555C13.5733 8.0851 13.585 7.40518 13.36 6.78663C13.1482 6.212 12.9745 5.62406 12.84 5.02663C12.7733 4.73329 12.72 4.42663 12.68 4.13329C12.5181 3.19412 12.0262 2.34362 11.2928 1.73495C10.5595 1.12627 9.63291 0.799438 8.67999 0.813293H4.66665C4.10298 0.812554 3.54552 0.930957 3.03081 1.16074C2.5161 1.39052 2.05577 1.72649 1.67999 2.14663C1.29641 2.57816 1.01081 3.08763 0.842789 3.64001C0.674774 4.19239 0.628331 4.7746 0.706652 5.34663C1.43143 10.8961 3.96693 16.0515 7.91999 20.0133C11.8818 23.9663 17.0371 26.5018 22.5867 27.2266C22.7597 27.2398 22.9336 27.2398 23.1067 27.2266C24.0899 27.2281 25.0392 26.8673 25.7733 26.2133C26.1935 25.8375 26.5294 25.3772 26.7592 24.8625C26.989 24.3478 27.1074 23.7903 27.1067 23.2266V19.2266C27.0995 18.3053 26.7745 17.4148 26.1866 16.7054C25.5987 15.9961 24.7839 15.5114 23.88 15.3333ZM24.5333 23.3333C24.5329 23.5194 24.4935 23.7033 24.4177 23.8732C24.3419 24.0431 24.2314 24.1953 24.0933 24.32C23.9472 24.4531 23.7733 24.5521 23.5842 24.6097C23.3951 24.6674 23.1955 24.6823 23 24.6533C18.0244 24.0035 13.4003 21.736 9.83999 18.2C6.27661 14.6366 3.98936 9.99645 3.33332 4.99996C3.30435 4.80441 3.31923 4.60486 3.37688 4.41576C3.43454 4.22667 3.53351 4.05276 3.66665 3.90663C3.79281 3.76683 3.94716 3.65534 4.11952 3.5795C4.29188 3.50366 4.47835 3.46519 4.66665 3.46663H8.66665C8.97487 3.45909 9.27617 3.55861 9.51927 3.74822C9.76237 3.93784 9.93225 4.20585 9.99999 4.50663C9.99999 4.86663 10.12 5.23996 10.2 5.59996C10.3541 6.29844 10.5591 6.98472 10.8133 7.65329L8.94665 8.53329C8.6258 8.68058 8.37647 8.9491 8.25332 9.27996C8.11996 9.60457 8.11996 9.96868 8.25332 10.2933C10.1723 14.4036 13.4763 17.7077 17.5867 19.6266C17.9113 19.76 18.2754 19.76 18.6 19.6266C18.9308 19.5035 19.1994 19.2541 19.3467 18.9333L20.1867 17.0666C20.8745 17.3175 21.5783 17.5224 22.2933 17.68C22.64 17.76 23.0133 17.8266 23.3733 17.88C23.6741 17.9477 23.9421 18.1176 24.1317 18.3607C24.3213 18.6038 24.4209 18.9051 24.4133 19.2133L24.5333 23.3333ZM16.6667 0.666626C16.36 0.666626 16.04 0.666626 15.7333 0.666626C15.3797 0.696684 15.0525 0.865986 14.8237 1.13729C14.5949 1.40859 14.4833 1.75967 14.5133 2.11329C14.5434 2.46691 14.7127 2.79411 14.984 3.02291C15.2553 3.2517 15.6064 3.36335 15.96 3.33329H16.6667C18.7884 3.33329 20.8232 4.17615 22.3235 5.67644C23.8238 7.17673 24.6667 9.21156 24.6667 11.3333C24.6667 11.5733 24.6667 11.8 24.6667 12.04C24.6371 12.3917 24.7482 12.7408 24.9757 13.0108C25.2031 13.2807 25.5283 13.4494 25.88 13.48H25.9867C26.3204 13.4813 26.6426 13.3574 26.8895 13.1328C27.1363 12.9081 27.2899 12.5991 27.32 12.2666C27.32 11.96 27.32 11.64 27.32 11.3333C27.32 8.50663 26.198 5.79554 24.2005 3.79553C22.203 1.79553 19.4933 0.670159 16.6667 0.666626V0.666626ZM19.3333 11.3333C19.3333 11.6869 19.4738 12.0261 19.7238 12.2761C19.9739 12.5262 20.313 12.6666 20.6667 12.6666C21.0203 12.6666 21.3594 12.5262 21.6095 12.2761C21.8595 12.0261 22 11.6869 22 11.3333C22 9.9188 21.4381 8.56225 20.4379 7.56206C19.4377 6.56186 18.0811 5.99996 16.6667 5.99996C16.313 5.99996 15.9739 6.14044 15.7238 6.39048C15.4738 6.64053 15.3333 6.97967 15.3333 7.33329C15.3333 7.68691 15.4738 8.02605 15.7238 8.2761C15.9739 8.52615 16.313 8.66663 16.6667 8.66663C17.3739 8.66663 18.0522 8.94758 18.5523 9.44768C19.0524 9.94777 19.3333 10.626 19.3333 11.3333Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-2xl font-extrabold mb-3">Phone</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #6138

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden" x-data="{ category: '', start: 3, max: 9, current: 3, pagination: 1 }" x-init="category = $refs.category1.textContent, pagination = $refs.pagination1.textContent">
  <img class="absolute top-0 left-0 w-1/2 mt-4 md:mt-16" src="nigodo-assets/background-elements/pattern-dots-indigo-left.svg" alt="">
  <img class="absolute bottom-0 right-0 mb-20" src="nigodo-assets/background-elements/pattern-smash-rotate-indigo-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
    </div>
    <div class="mb-10">
      <div class="lg:flex items-center -mb-4">
        <a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl font-extrabold" :class="{ 'text-indigo-400 hover:text-gray-500': category!= $refs.category1.textContent }" href="#">All Categories</a>
        <a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-indigo-400 hover:text-gray-500 font-extrabold" :class="{ 'text-indigo-400 hover:text-gray-500': category!= $refs.category2.textContent }" href="#">Technology</a>
        <a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-indigo-400 hover:text-gray-500 font-extrabold" :class="{ 'text-indigo-400 hover:text-gray-500': category!= $refs.category3.textContent }" href="#">Development</a>
        <a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-indigo-400 hover:text-gray-500 font-extrabold" :class="{ 'text-indigo-400 hover:text-gray-500': category!= $refs.category4.textContent }" href="#">Marketing</a>
        <a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="inline-block mb-4 text-xl text-indigo-400 hover:text-gray-500 font-extrabold" :class="{ 'text-indigo-400 hover:text-gray-500': category!= $refs.category5.textContent }" href="#">Startup</a>
    </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="md:flex bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <div class="w-full md:w-1/2">
            <img class="h-72 lg:h-full w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #6139

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden" x-data="{ category: '', start: 3, max: 9, current: 3, pagination: 1 }" x-init="category = $refs.category1.textContent, pagination = $refs.pagination1.textContent">
  <img class="absolute top-0 left-0 w-1/2 mt-4 md:mt-16" src="nigodo-assets/background-elements/pattern-dots-red-left.svg" alt="">
  <img class="absolute bottom-0 right-0 mb-20" src="nigodo-assets/background-elements/pattern-smash-rotate-red-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-red-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
    </div>
    <div class="mb-10">
      <div class="lg:flex items-center -mb-4">
        <a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category1.textContent }" href="#">All Categories</a>
        <a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-red-400 hover:text-gray-500 font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category2.textContent }" href="#">Technology</a>
        <a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-red-400 hover:text-gray-500 font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category3.textContent }" href="#">Development</a>
        <a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-red-400 hover:text-gray-500 font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category4.textContent }" href="#">Marketing</a>
        <a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="inline-block mb-4 text-xl text-red-400 hover:text-gray-500 font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category5.textContent }" href="#">Startup</a>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <div class="md:flex bg-white border-3 border-indigo-900 shadow-md rounded-2xl overflow-hidden">
          <div class="w-full md:w-1/2">
            <img class="h-72 lg:h-full w-full block object-cover" src="nigodo-assets/blog/laptops.jpeg" alt="">
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #6140

Tailwind CSS

Nigodo

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <span class="text-lg font-extrabold text-red-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Send us message</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="flex mb-14">
          <div class="flex-shrink-0 -mt-4 inline-flex items-center justify-center w-16 h-16 mr-8 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.88 15.3333C23.5867 15.3333 23.28 15.24 22.9867 15.1733C22.3931 15.0406 21.8095 14.8668 21.24 14.6533C20.6214 14.4283 19.9415 14.44 19.3311 14.6861C18.7206 14.9323 18.2228 15.3955 17.9333 15.9866L17.64 16.6C16.3451 15.8656 15.1488 14.9695 14.08 13.9333C13.0438 12.8645 12.1477 11.6682 11.4133 10.3733L12.0267 10.0933C12.6178 9.80385 13.081 9.306 13.3272 8.69555C13.5733 8.0851 13.585 7.40518 13.36 6.78663C13.1482 6.212 12.9745 5.62406 12.84 5.02663C12.7733 4.73329 12.72 4.42663 12.68 4.13329C12.5181 3.19412 12.0262 2.34362 11.2928 1.73495C10.5595 1.12627 9.63291 0.799438 8.67999 0.813293H4.66665C4.10298 0.812554 3.54552 0.930957 3.03081 1.16074C2.5161 1.39052 2.05577 1.72649 1.67999 2.14663C1.29641 2.57816 1.01081 3.08763 0.842789 3.64001C0.674774 4.19239 0.628331 4.7746 0.706652 5.34663C1.43143 10.8961 3.96693 16.0515 7.91999 20.0133C11.8818 23.9663 17.0371 26.5018 22.5867 27.2266C22.7597 27.2398 22.9336 27.2398 23.1067 27.2266C24.0899 27.2281 25.0392 26.8673 25.7733 26.2133C26.1935 25.8375 26.5294 25.3772 26.7592 24.8625C26.989 24.3478 27.1074 23.7903 27.1067 23.2266V19.2266C27.0995 18.3053 26.7745 17.4148 26.1866 16.7054C25.5987 15.9961 24.7839 15.5114 23.88 15.3333ZM24.5333 23.3333C24.5329 23.5194 24.4935 23.7033 24.4177 23.8732C24.3419 24.0431 24.2314 24.1953 24.0933 24.32C23.9472 24.4531 23.7733 24.5521 23.5842 24.6097C23.3951 24.6674 23.1955 24.6823 23 24.6533C18.0244 24.0035 13.4003 21.736 9.83999 18.2C6.27661 14.6366 3.98936 9.99645 3.33332 4.99996C3.30435 4.80441 3.31923 4.60486 3.37688 4.41576C3.43454 4.22667 3.53351 4.05276 3.66665 3.90663C3.79281 3.76683 3.94716 3.65534 4.11952 3.5795C4.29188 3.50366 4.47835 3.46519 4.66665 3.46663H8.66665C8.97487 3.45909 9.27617 3.55861 9.51927 3.74822C9.76237 3.93784 9.93225 4.20585 9.99999 4.50663C9.99999 4.86663 10.12 5.23996 10.2 5.59996C10.3541 6.29844 10.5591 6.98472 10.8133 7.65329L8.94665 8.53329C8.6258 8.68058 8.37647 8.9491 8.25332 9.27996C8.11996 9.60457 8.11996 9.96868 8.25332 10.2933C10.1723 14.4036 13.4763 17.7077 17.5867 19.6266C17.9113 19.76 18.2754 19.76 18.6 19.6266C18.9308 19.5035 19.1994 19.2541 19.3467 18.9333L20.1867 17.0666C20.8745 17.3175 21.5783 17.5224 22.2933 17.68C22.64 17.76 23.0133 17.8266 23.3733 17.88C23.6741 17.9477 23.9421 18.1176 24.1317 18.3607C24.3213 18.6038 24.4209 18.9051 24.4133 19.2133L24.5333 23.3333ZM16.6667 0.666626C16.36 0.666626 16.04 0.666626 15.7333 0.666626C15.3797 0.696684 15.0525 0.865986 14.8237 1.13729C14.5949 1.40859 14.4833 1.75967 14.5133 2.11329C14.5434 2.46691 14.7127 2.79411 14.984 3.02291C15.2553 3.2517 15.6064 3.36335 15.96 3.33329H16.6667C18.7884 3.33329 20.8232 4.17615 22.3235 5.67644C23.8238 7.17673 24.6667 9.21156 24.6667 11.3333C24.6667 11.5733 24.6667 11.8 24.6667 12.04C24.6371 12.3917 24.7482 12.7408 24.9757 13.0108C25.2031 13.2807 25.5283 13.4494 25.88 13.48H25.9867C26.3204 13.4813 26.6426 13.3574 26.8895 13.1328C27.1363 12.9081 27.2899 12.5991 27.32 12.2666C27.32 11.96 27.32 11.64 27.32 11.3333C27.32 8.50663 26.198 5.79554 24.2005 3.79553C22.203 1.79553 19.4933 0.670159 16.6667 0.666626V0.666626ZM19.3333 11.3333C19.3333 11.6869 19.4738 12.0261 19.7238 12.2761C19.9739 12.5262 20.313 12.6666 20.6667 12.6666C21.0203 12.6666 21.3594 12.5262 21.6095 12.2761C21.8595 12.0261 22 11.6869 22 11.3333C22 9.9188 21.4381 8.56225 20.4379 7.56206C19.4377 6.56186 18.0811 5.99996 16.6667 5.99996C16.313 5.99996 15.9739 6.14044 15.7238 6.39048C15.4738 6.64053 15.3333 6.97967 15.3333 7.33329C15.3333 7.68691 15.4738 8.02605 15.7238 8.2761C15.9739 8.52615 16.313 8.66663 16.6667 8.66663C17.3739 8.66663 18.0522 8.94758 18.5523 9.44768C19.0524 9.94777 19.3333 10.626 19.3333 11.3333Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-2xl font-extrabold mb-3">Phone</h3>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

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

Get the code for 13,400+ components

Tailwind Component #6122

Get the code for 13,400+ components

Tailwind Component #6123

Get the code for 13,400+ components

Tailwind Component #6124

Get the code for 13,400+ components

Tailwind Component #6125

Get the code for 13,400+ components

Tailwind Component #6126

Get the code for 13,400+ components

Tailwind Component #6127

Get the code for 13,400+ components

Tailwind Component #6128

Get the code for 13,400+ components

Tailwind Component #6129

Get the code for 13,400+ components

Tailwind Component #6130

Get the code for 13,400+ components

Tailwind Component #6131

Get the code for 13,400+ components

Tailwind Component #6132

Get the code for 13,400+ components

Tailwind Component #6133

Get the code for 13,400+ components

Tailwind Component #6134

Get the code for 13,400+ components

Tailwind Component #6135

Get the code for 13,400+ components

Tailwind Component #6136

Get the code for 13,400+ components

Tailwind Component #6137

Get the code for 13,400+ components

Tailwind Component #6138

Get the code for 13,400+ components

Tailwind Component #6139

Get the code for 13,400+ components

Tailwind Component #6140

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

From one prompt to production‑ready code

Products

Extensions

UI Components

Company

Support