Tailwind CSS Components

Framework

UI Library

Components

Tailwind Component #1881

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-white overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="flex flex-wrap -m-8">
          <div class="w-full md:w-1/2 p-8">
            <div class="flex flex-col justify-between md:max-w-sm h-full">
              <div class="flex-initial mb-8">
                <h2 class="font-heading mb-8 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Affordable pricing plans</h2>
                <p class="text-gray-700 font-bold">Amet minim mollit non deserunt ullamco an aliqua dolor elit officia consequat duis.Amet minim mollit non deserunt ullamco est sit aliqua.</p>
              </div>
              <div class="flex-initial">
                <p class="mb-2 text-xs text-gray-700 font-bold uppercase">Trusted by 30k users</p>
                <div class="flex flex-wrap -m-0.5 mb-2">
                  <div class="w-auto">
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9.70724 4.21267C10.0284 3.22436 11.4266 3.22436 11.7477 4.21267L12.895 7.74387C13.0387 8.18586 13.4505 8.48511 13.9153 8.48511H17.6282C18.6674 8.48511 19.0994 9.81488 18.2587 10.4257L15.2549 12.6081C14.8789 12.8813 14.7216 13.3654 14.8652 13.8074L16.0126 17.3386C16.3337 18.327 15.2025 19.1488 14.3618 18.538L11.358 16.3556C10.982 16.0824 10.4729 16.0824 10.0969 16.3556L7.09311 18.538C6.2524 19.1488 5.12123 18.327 5.44236 17.3386L6.58971 13.8074C6.73332 13.3654 6.576 12.8813 6.20002 12.6081L3.1962 10.4257C2.35549 9.81488 2.78756 8.48511 3.82674 8.48511H7.53966C8.00439 8.48511 8.41627 8.18586 8.55988 7.74387L9.70724 4.21267Z" fill="#3B82F6"></path>
                    </svg>
                  </div>
                  <div class="w-auto">

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

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="p-10 bg-white rounded-3xl">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-full md:w-1/2 p-2">
                  <h2 class="font-heading text-2xl text-gray-900 font-black tracking-tight">Product Design</h2>
                </div>
                <div class="w-full md:w-1/2 p-2">
                  <div class="flex flex-wrap items-center justify-end -m-5">
                    <div class="w-full md:w-auto p-5">
                      <div class="flex flex-wrap -m-3">
                        <div class="flex flex-wrap items-center w-auto p-3">
                          <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.99935 1.66666C5.40768 1.66666 1.66602 5.40832 1.66602 9.99999C1.66602 14.5917 5.40768 18.3333 9.99935 18.3333C14.591 18.3333 18.3327 14.5917 18.3327 9.99999C18.3327 5.40832 14.591 1.66666 9.99935 1.66666ZM13.6243 12.975C13.5077 13.175 13.2993 13.2833 13.0827 13.2833C12.9743 13.2833 12.866 13.2583 12.766 13.1917L10.1827 11.65C9.54102 11.2667 9.06602 10.425 9.06602 9.68332V6.26666C9.06602 5.92499 9.34935 5.64166 9.69102 5.64166C10.0327 5.64166 10.316 5.92499 10.316 6.26666V9.68332C10.316 9.98332 10.566 10.425 10.8243 10.575L13.4077 12.1167C13.7077 12.2917 13.8077 12.675 13.6243 12.975Z" fill="#D1D5DB"></path>
                          </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1883

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-800 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-gray-900 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:max-w-md mx-auto">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-24">
              <div class="w-auto p-2">
                <img src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
              </div>
              <div class="w-auto p-2"><a class="text-blue-500 hover:text-blue-600 font-bold" href="#">Create your account</a></div>
            </div>
            <div class="mb-10">
              <h3 class="font-heading mb-3 text-3xl text-white font-black tracking-tight">Sign In to Zanrly</h3>
              <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
            </div>
            <form>
              <div class="flex flex-wrap -m-3">
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-400 font-bold" for="signInDarkReverseInput4-1">Email Address</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-800 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInDarkReverseInput4-1" type="email" placeholder="Enter email address">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInDarkReverseInput4-2">Password</label>

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

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-white overflow-hidden border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap -m-4">
          <div class="w-full md:w-1/2 p-4">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-10 md:max-w-md">
                <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Contact Us</span>
                <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Let’s with us!</h2>
                <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
              </div>
              <div class="flex flex-wrap -m-5">
                <div class="w-full p-5">
                  <div class="p-10 h-full bg-gray-100 border border-gray-100 rounded-3xl">
                    <div class="flex flex-wrap -m-3">
                      <div class="w-auto p-3">
                        <div class="flex items-center justify-center w-16 h-16 mx-auto bg-white rounded-xl">
                          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.666 21.3334C18.666 23.6934 17.6393 25.8267 15.9993 27.2801C14.586 28.5601 12.7193 29.3334 10.666 29.3334C6.25268 29.3334 2.66602 25.7467 2.66602 21.3334C2.66602 18.6338 4.01797 16.2419 6.07321 14.7965C6.40413 14.5638 6.85175 14.723 7.03033 15.086C8.28888 17.6443 10.6049 19.56 13.3593 20.3067C14.1993 20.5467 15.0793 20.6667 15.9993 20.6667C16.649 20.6667 17.2713 20.6051 17.8759 20.4917C18.2604 20.4196 18.6431 20.666 18.66 21.0568C18.664 21.1495 18.666 21.2419 18.666 21.3334Z" fill="#3B82F6"></path>
                            <path d="M24 10.6666C24 11.7066 23.8 12.7066 23.44 13.6133C22.52 15.9333 20.5467 17.72 18.1067 18.3866C17.44 18.5733 16.7333 18.6666 16 18.6666C15.2667 18.6666 14.56 18.5733 13.8933 18.3866C11.4533 17.72 9.48 15.9333 8.56 13.6133C8.2 12.7066 8 11.7066 8 10.6666C8 6.25329 11.5867 2.66663 16 2.66663C20.4133 2.66663 24 6.25329 24 10.6666Z" fill="#3B82F6"></path>
                            <path d="M29.3327 21.3334C29.3327 25.7467 25.746 29.3334 21.3327 29.3334C20.34 29.3334 19.3851 29.1524 18.5075 28.8188C18.0826 28.6573 18.0033 28.1135 18.2991 27.7683C19.8218 25.9918 20.666 23.7147 20.666 21.3334C20.666 20.8801 20.626 20.4267 20.5593 20.0001V20.0001C20.5197 19.7541 20.6452 19.5123 20.8631 19.3917C22.6286 18.4143 24.0702 16.9168 24.9687 15.0871C25.1472 14.7237 25.5951 14.5641 25.9263 14.797C27.9811 16.2425 29.3327 18.6341 29.3327 21.3334Z" fill="#3B82F6"></path>
                          </svg>
                        </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 #1885

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-white border border-gray-100 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:max-w-md mx-auto">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-24">
              <div class="w-auto p-2">
                <img src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
              </div>
              <div class="w-auto p-2"><a class="text-blue-500 hover:text-blue-600 font-bold" href="#">Create your account</a></div>
            </div>
            <div class="mb-10">
              <h3 class="font-heading mb-3 text-3xl text-black font-black tracking-tight">Sign In to Zanrly</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
            </div>
            <form>
              <div class="flex flex-wrap -m-3">
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightBorderInput4-1">Email Address</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightBorderInput4-1" type="email" placeholder="Enter email address">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightBorderInput4-2">Password</label>

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

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-gray-800 overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark-light w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark-light.png" alt="">
      </div>
      <div class="relative flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:max-w-md mx-auto">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-24">
              <div class="w-auto p-2">
                <img src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
              </div>
              <div class="w-auto p-2"><a class="text-blue-500 hover:text-blue-600 font-bold" href="#">Sign In</a></div>
            </div>
            <div class="mb-10">
              <h3 class="font-heading mb-3 text-3xl text-white font-black tracking-tight">Create free account</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
            </div>
            <form>
              <div class="flex flex-wrap -m-3">
                <div class="w-full p-3">
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-900 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpDarkPatternInput4-1" type="text" placeholder="Full Name">

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

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 overflow-hidden bg-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto mb-20">
          <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex flex-nowrap -m-4 transition-transform duration-500 ease-in-out">
            <div x-ref="slide1" class="relative flex-shrink-0 max-w-3xl w-full p-4">
              <div :class="{ 'hidden': activeSlide == 0 }" class="hidden absolute z-10 top-0 left-0 bg-gray-100 bg-opacity-80 w-full h-full"></div>
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img class="rounded-3xl" src="zanrly-assets/images/teams/woman.png" alt="">
                </div>
                <div class="flex-1 p-4">
                  <div class="flex flex-col justify-between h-full">
                    <div class="flex-initial mb-6">
                      <h3 class="font-heading mb-2 text-4xl text-gray-900 font-black tracking-tight">Monica Johnson</h3>
                      <p class="text-lg text-gray-500 font-bold">CEO &amp; Founder</p>
                    </div>
                    <div class="flex-initial">
                      <p class="mb-8 text-gray-700 font-bold">Renowned for his experience in brand strategy and visual identities, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
                      <div class="flex flex-wrap -m-1.5">
                        <div class="w-auto p-1.5">
                          <a class="flex items-center justify-center w-10 h-10 bg-white rounded-full" href="#">
                            <img src="zanrly-assets/images/insta.svg" alt="">
                          </a>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1888

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-gray-100 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:max-w-md mx-auto">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-24">
              <div class="w-auto p-2">
                <img src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
              </div>
              <div class="w-auto p-2"><a class="text-blue-500 hover:text-blue-600 font-bold" href="#">Create your account</a></div>
            </div>
            <div class="mb-10">
              <h3 class="font-heading mb-3 text-3xl text-black font-black tracking-tight">Sign In to Zanrly</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
            </div>
            <form>
              <div class="flex flex-wrap -m-3">
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightInput4-1">Email Address</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-white placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightInput4-1" type="email" placeholder="Enter email address">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightInput4-2">Password</label>

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

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 md:px-16 overflow-hidden border border-gray-100 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.png" alt="">
      </div>
      <div class="relative flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-sm">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">What we found</span>
            <h2 class="font-heading mb-8 text-4xl text-gray-900 font-black tracking-tight">Take full control of design &amp; development.</h2>
            <div class="flex flex-wrap -m-2">
              <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Get Started</a></div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
              <div class="flex flex-col justify-between p-8 h-full bg-white border border-gray-100 rounded-3xl">
                <svg class="mb-28" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3145C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3147 13.9828 15.4995 13.9955 15.7926C13.9985 15.8621 14 15.9314 14 16Z" fill="#3B82F6"></path>
                  <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></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.

Tailwind Component #1890

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-100 overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="p-10 bg-white rounded-3xl">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-full md:w-1/2 p-2">
                  <h2 class="font-heading text-2xl text-gray-900 font-black tracking-tight">Product Design</h2>
                </div>
                <div class="w-full md:w-1/2 p-2">
                  <div class="flex flex-wrap items-center justify-end -m-5">
                    <div class="w-full md:w-auto p-5">
                      <div class="flex flex-wrap -m-3">

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

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-white overflow-hidden border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="zanrly-assets/images/contact/pattern-gray.svg" alt="">
        <div class="relative flex flex-wrap -m-4">
          <div class="w-full md:w-1/2 p-4">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-10 md:max-w-md">
                <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Contact Us</span>
                <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Let’s with us!</h2>
                <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
              </div>
              <div class="flex flex-wrap -m-5">
                <div class="w-full p-5">
                  <div class="p-10 h-full bg-white border border-gray-100 rounded-3xl">
                    <div class="flex flex-wrap -m-3">
                      <div class="w-auto p-3">
                        <div class="flex items-center justify-center w-16 h-16 mx-auto bg-gray-100 rounded-xl">
                          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.666 21.3334C18.666 23.6934 17.6393 25.8267 15.9993 27.2801C14.586 28.5601 12.7193 29.3334 10.666 29.3334C6.25268 29.3334 2.66602 25.7467 2.66602 21.3334C2.66602 18.6338 4.01797 16.2419 6.07321 14.7965C6.40413 14.5638 6.85175 14.723 7.03033 15.086C8.28888 17.6443 10.6049 19.56 13.3593 20.3067C14.1993 20.5467 15.0793 20.6667 15.9993 20.6667C16.649 20.6667 17.2713 20.6051 17.8759 20.4917C18.2604 20.4196 18.6431 20.666 18.66 21.0568C18.664 21.1495 18.666 21.2419 18.666 21.3334Z" fill="#3B82F6"></path>
                            <path d="M24 10.6666C24 11.7066 23.8 12.7066 23.44 13.6133C22.52 15.9333 20.5467 17.72 18.1067 18.3866C17.44 18.5733 16.7333 18.6666 16 18.6666C15.2667 18.6666 14.56 18.5733 13.8933 18.3866C11.4533 17.72 9.48 15.9333 8.56 13.6133C8.2 12.7066 8 11.7066 8 10.6666C8 6.25329 11.5867 2.66663 16 2.66663C20.4133 2.66663 24 6.25329 24 10.6666Z" fill="#3B82F6"></path>
                            <path d="M29.3327 21.3334C29.3327 25.7467 25.746 29.3334 21.3327 29.3334C20.34 29.3334 19.3851 29.1524 18.5075 28.8188C18.0826 28.6573 18.0033 28.1135 18.2991 27.7683C19.8218 25.9918 20.666 23.7147 20.666 21.3334C20.666 20.8801 20.626 20.4267 20.5593 20.0001V20.0001C20.5197 19.7541 20.6452 19.5123 20.8631 19.3917C22.6286 18.4143 24.0702 16.9168 24.9687 15.0871C25.1472 14.7237 25.5951 14.5641 25.9263 14.797C27.9811 16.2425 29.3327 18.6341 29.3327 21.3334Z" fill="#3B82F6"></path>
                          </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1892

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-800 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="p-10 bg-gray-900 rounded-3xl">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-full md:w-1/2 p-2">
                  <h2 class="font-heading text-2xl text-white font-black tracking-tight">Product Design</h2>
                </div>
                <div class="w-full md:w-1/2 p-2">
                  <div class="flex flex-wrap items-center justify-end -m-5">
                    <div class="w-full md:w-auto p-5">
                      <div class="flex flex-wrap -m-3">
                        <div class="flex flex-wrap items-center w-auto p-3">
                          <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.99935 1.66666C5.40768 1.66666 1.66602 5.40832 1.66602 9.99999C1.66602 14.5917 5.40768 18.3333 9.99935 18.3333C14.591 18.3333 18.3327 14.5917 18.3327 9.99999C18.3327 5.40832 14.591 1.66666 9.99935 1.66666ZM13.6243 12.975C13.5077 13.175 13.2993 13.2833 13.0827 13.2833C12.9743 13.2833 12.866 13.2583 12.766 13.1917L10.1827 11.65C9.54102 11.2667 9.06602 10.425 9.06602 9.68332V6.26666C9.06602 5.92499 9.34935 5.64166 9.69102 5.64166C10.0327 5.64166 10.316 5.92499 10.316 6.26666V9.68332C10.316 9.98332 10.566 10.425 10.8243 10.575L13.4077 12.1167C13.7077 12.2917 13.8077 12.675 13.6243 12.975Z" fill="#374151"></path>
                          </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1893

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-gray-900 overflow-hidden border border-gray-800 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:max-w-md mx-auto">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-24">
              <div class="w-auto p-2">
                <img src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
              </div>
              <div class="w-auto p-2"><a class="text-blue-500 hover:text-blue-600 font-bold" href="#">Sign In</a></div>
            </div>
            <div class="mb-10">
              <h3 class="font-heading mb-3 text-3xl text-white font-black tracking-tight">Create free account</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
            </div>
            <form>
              <div class="flex flex-wrap -m-3">
                <div class="w-full p-3">
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-800 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpDarkBorderPatternInput4-1" type="text" placeholder="Full Name">

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

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-gray-900 border border-gray-800 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:max-w-md mx-auto">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-24">
              <div class="w-auto p-2">
                <img src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
              </div>
              <div class="w-auto p-2"><a class="text-blue-500 hover:text-blue-600 font-bold" href="#">Sign In</a></div>
            </div>
            <div class="mb-10">
              <h3 class="font-heading mb-3 text-3xl text-white font-black tracking-tight">Create free account</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
            </div>
            <form>
              <div class="flex flex-wrap -m-3">
                <div class="w-full p-3">
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-800 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpDarkBorderInput4-1" type="text" placeholder="Full Name">
                </div>
                <div class="w-full p-3">
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-800 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpDarkBorderInput4-2" type="email" placeholder="Email address">
                </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 #1895

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-white overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="p-10 bg-gray-100 rounded-3xl">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-full md:w-1/2 p-2">
                  <h2 class="font-heading text-2xl text-gray-900 font-black tracking-tight">Product Design</h2>
                </div>
                <div class="w-full md:w-1/2 p-2">
                  <div class="flex flex-wrap items-center justify-end -m-5">
                    <div class="w-full md:w-auto p-5">
                      <div class="flex flex-wrap -m-3">

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

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-50 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-white overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.png" alt="">
      </div>
      <div class="relative flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:max-w-md mx-auto">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-24">
              <div class="w-auto p-2">
                <img src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
              </div>
              <div class="w-auto p-2"><a class="text-blue-500 hover:text-blue-600 font-bold" href="#">Sign In</a></div>
            </div>
            <div class="mb-10">
              <h3 class="font-heading mb-3 text-3xl text-black font-black tracking-tight">Create free account</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
            </div>
            <form>
              <div class="flex flex-wrap -m-3">
                <div class="w-full p-3">
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpLightReversePatternInput4-1" type="text" placeholder="Full Name">

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

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 overflow-hidden rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="zanrly-assets/images/contact/pattern-dark.svg" alt="">
        <div class="relative flex flex-wrap -m-4">
          <div class="w-full md:w-1/2 p-4">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-10 md:max-w-md">
                <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Contact Us</span>
                <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Let’s with us!</h2>
                <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
              </div>
              <div class="flex flex-wrap -m-5">
                <div class="w-full p-5">
                  <div class="p-10 h-full bg-gray-800 rounded-3xl">
                    <div class="flex flex-wrap -m-3">
                      <div class="w-auto p-3">
                        <div class="flex items-center justify-center w-16 h-16 mx-auto bg-gray-900 rounded-xl">
                          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.666 21.3334C18.666 23.6934 17.6393 25.8267 15.9993 27.2801C14.586 28.5601 12.7193 29.3334 10.666 29.3334C6.25268 29.3334 2.66602 25.7467 2.66602 21.3334C2.66602 18.6338 4.01797 16.2419 6.07321 14.7965C6.40413 14.5638 6.85175 14.723 7.03033 15.086C8.28888 17.6443 10.6049 19.56 13.3593 20.3067C14.1993 20.5467 15.0793 20.6667 15.9993 20.6667C16.649 20.6667 17.2713 20.6051 17.8759 20.4917C18.2604 20.4196 18.6431 20.666 18.66 21.0568C18.664 21.1495 18.666 21.2419 18.666 21.3334Z" fill="#3B82F6"></path>
                            <path d="M24 10.6666C24 11.7066 23.8 12.7066 23.44 13.6133C22.52 15.9333 20.5467 17.72 18.1067 18.3866C17.44 18.5733 16.7333 18.6666 16 18.6666C15.2667 18.6666 14.56 18.5733 13.8933 18.3866C11.4533 17.72 9.48 15.9333 8.56 13.6133C8.2 12.7066 8 11.7066 8 10.6666C8 6.25329 11.5867 2.66663 16 2.66663C20.4133 2.66663 24 6.25329 24 10.6666Z" fill="#3B82F6"></path>
                            <path d="M29.3327 21.3334C29.3327 25.7467 25.746 29.3334 21.3327 29.3334C20.34 29.3334 19.3851 29.1524 18.5075 28.8188C18.0826 28.6573 18.0033 28.1135 18.2991 27.7683C19.8218 25.9918 20.666 23.7147 20.666 21.3334C20.666 20.8801 20.626 20.4267 20.5593 20.0001V20.0001C20.5197 19.7541 20.6452 19.5123 20.8631 19.3917C22.6286 18.4143 24.0702 16.9168 24.9687 15.0871C25.1472 14.7237 25.5951 14.5641 25.9263 14.797C27.9811 16.2425 29.3327 18.6341 29.3327 21.3334Z" fill="#3B82F6"></path>
                          </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1898

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-50 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-white rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:max-w-md mx-auto">
            <div class="flex flex-wrap items-center justify-between -m-2 mb-24">
              <div class="w-auto p-2">
                <img src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
              </div>
              <div class="w-auto p-2"><a class="text-blue-500 hover:text-blue-600 font-bold" href="#">Sign In</a></div>
            </div>
            <div class="mb-10">
              <h3 class="font-heading mb-3 text-3xl text-black font-black tracking-tight">Create free account</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
            </div>
            <form>
              <div class="flex flex-wrap -m-3">
                <div class="w-full p-3">
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpLightReverseInput4-1" type="text" placeholder="Full Name">
                </div>
                <div class="w-full p-3">
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpLightReverseInput4-2" type="email" placeholder="Email address">
                </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 #1899

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 border border-gray-800 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="p-10 bg-gray-900 border border-gray-800 rounded-3xl">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-full md:w-1/2 p-2">
                  <h2 class="font-heading text-2xl text-white font-black tracking-tight">Product Design</h2>
                </div>
                <div class="w-full md:w-1/2 p-2">
                  <div class="flex flex-wrap items-center justify-end -m-5">
                    <div class="w-full md:w-auto p-5">
                      <div class="flex flex-wrap -m-3">
                        <div class="flex flex-wrap items-center w-auto p-3">
                          <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.99935 1.66666C5.40768 1.66666 1.66602 5.40832 1.66602 9.99999C1.66602 14.5917 5.40768 18.3333 9.99935 18.3333C14.591 18.3333 18.3327 14.5917 18.3327 9.99999C18.3327 5.40832 14.591 1.66666 9.99935 1.66666ZM13.6243 12.975C13.5077 13.175 13.2993 13.2833 13.0827 13.2833C12.9743 13.2833 12.866 13.2583 12.766 13.1917L10.1827 11.65C9.54102 11.2667 9.06602 10.425 9.06602 9.68332V6.26666C9.06602 5.92499 9.34935 5.64166 9.69102 5.64166C10.0327 5.64166 10.316 5.92499 10.316 6.26666V9.68332C10.316 9.98332 10.566 10.425 10.8243 10.575L13.4077 12.1167C13.7077 12.2917 13.8077 12.675 13.6243 12.975Z" fill="#374151"></path>
                          </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1900

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 overflow-hidden bg-gray-800 rounded-3xl">
        <div class="max-w-7xl mx-auto mb-20">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex flex-nowrap -m-4 transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="relative flex-shrink-0 max-w-3xl w-full p-4">
                    <div :class="{ 'hidden': activeSlide == 0 }" class="hidden absolute z-10 top-0 left-0 bg-gray-800 bg-opacity-80 w-full h-full"></div>
                    <div class="flex flex-wrap items-center -m-4">
                        <div class="w-auto p-4">
                            <img class="rounded-3xl" src="zanrly-assets/images/teams/woman.png" alt="">
                        </div>
                        <div class="flex-1 p-4">
                        <div class="flex flex-col justify-between h-full">
                            <div class="flex-initial mb-6">
                            <h3 class="font-heading mb-2 text-4xl text-gray-100 font-black tracking-tight">Monica Johnson</h3>
                            <p class="text-lg text-gray-700 font-bold">CEO &amp; Founder</p>
                            </div>
                            <div class="flex-initial">
                            <p class="mb-8 text-gray-500 font-bold">Renowned for his experience in brand strategy and visual identities, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
                            <div class="flex flex-wrap -m-1.5">
                                <div class="w-auto p-1.5">
                                <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                                    <img src="zanrly-assets/images/insta-dark.svg" alt="">
                                </a>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Get the code for 13,400+ components

Tailwind Component #1882

Get the code for 13,400+ components

Tailwind Component #1883

Get the code for 13,400+ components

Tailwind Component #1884

Get the code for 13,400+ components

Tailwind Component #1885

Get the code for 13,400+ components

Tailwind Component #1886

Get the code for 13,400+ components

Tailwind Component #1887

Get the code for 13,400+ components

Tailwind Component #1888

Get the code for 13,400+ components

Tailwind Component #1889

Get the code for 13,400+ components

Tailwind Component #1890

Get the code for 13,400+ components

Tailwind Component #1891

Get the code for 13,400+ components

Tailwind Component #1892

Get the code for 13,400+ components

Tailwind Component #1893

Get the code for 13,400+ components

Tailwind Component #1894

Get the code for 13,400+ components

Tailwind Component #1895

Get the code for 13,400+ components

Tailwind Component #1896

Get the code for 13,400+ components

Tailwind Component #1897

Get the code for 13,400+ components

Tailwind Component #1898

Get the code for 13,400+ components

Tailwind Component #1899

Get the code for 13,400+ components

Tailwind Component #1900

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