Tailwind CSS Components

Framework

UI Library

Components

Tailwind Component #1101

Tailwind CSS

Basko

<section class="relative py-24 lg:py-28 lg:pb-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-24 max-w-2xl mx-auto text-center">
      <h2 class="font-heading text-5xl md:text-6xl tracking-tighter">Read case studies and see what we can do for your company.</h2>
    </div>
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md mx-auto">
          <span class="inline-block mb-8 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">Try some freebie</span>
          <h3 class="mb-6 text-3xl font-semibold" style="letter-spacing: -0.5px;">Basko books 68% more sales demos to do for your own company profile.</h3>
          <p class="mb-6 text-xl tracking-tight">Our visual designer lets you quickly and of drag and drop down your way to custom apps for both keep desktop, mobile &amp; also tab for both of it over $14,000 in additional revenue week.</p>
          <p class="tracking-tight">
            <span class="font-semibold">Steve McQuillen</span>
            <span class="text-gray-600">, Steve McQuillen</span>
          </p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-max mx-auto">
          <img class="transform hover:-translate-y-1 rounded-2xl transition duration-500" src="basko-assets/images/testimonials/studies.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1102

Tailwind CSS

Basko

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto pr-2 lg:pr-14">
            <a href="#">
              <img src="basko-assets/logos/basko-logo-light.png" alt="">
            </a>
          </div>
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-8">
              <li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Features</a></li>
              <li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Pricing</a></li>
              <li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Automation</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-8">
              <li class="font-medium hover:text-gray-900 tracking-tight"><a href="#">Login</a></li>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1103

Tailwind CSS

Basko

<section class="py-24 lg:py-32 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-max mx-auto">
          <img class="transform hover:-translate-y-2 transition duration-500" src="basko-assets/images/features/recent-transaction.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-xl">
          <h2 class="font-heading mb-6 text-6xl tracking-tighter">Boost your brand's visibility and reach</h2>
          <p class="mb-20 text-xl tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are firmly of organised into the perfect starting categories.</p>
          <div class="max-w-md">
            <h3 class="mb-8 text-xl font-semibold tracking-tight">A snapshot of Basko’s features:</h3>
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <ul class="-m-2">
                  <li class="flex items-center p-2">
                    <svg class="mr-3" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M4.58398 11.917L8.25065 15.5837L17.4173 6.41699" stroke="#171A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="font-medium tracking-tight">Faster Payment</span>
                  </li>
                  <li class="flex items-center p-2">

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

Tailwind CSS

Basko

<section class="py-24 lg:pb-32 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-20">
      <h2 class="font-heading mb-4 text-6xl tracking-tighter">Pricing &amp; Plans</h2>
      <p class="text-xl tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 lg:w-1/3 p-6">
        <div class="h-full bg-white border border-gray-300 rounded-2xl transform hover:-translate-y-2 transition duration-500">
          <div class="p-12 border-b border-gray-300">
            <div class="pr-9">
              <h4 class="font-heading mb-6 text-6xl tracking-tighter">Solo</h4>
              <p class="mb-2 text-xl font-semibold" style="letter-spacing: -0.5px;">From $29/mo</p>
              <p class="tracking-tight">The ideal plan for larger businesses who require heavy usage.</p>
            </div>
          </div>
          <div class="p-12 pb-11">
            <ul class="-m-1.5 mb-11">
              <li class="flex items-center p-1.5">
                <div class="mr-3 inline-block">
                  <svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="3.5" cy="3.5" r="3.5" fill="#B8C1CC"></circle></svg>
                </div>
                <span class="font-medium tracking-tight">50 Users</span>
              </li>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1105

Tailwind CSS

Basko

<section class="py-24 lg:pt-28 lg:pb-36 overflow-hidden" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
  <div class="container px-4 mx-auto">
    <h2 class="font-heading mb-4 text-6xl text-white tracking-tighter">Create your brand</h2>
    <p class="mb-20 text-xl text-gray-100 tracking-tight">Use and re-use tons of responsive sections too.</p>
    <div class="max-w-5xl">
      <div class="flex flex-wrap justify-between -m-6">
        <div class="w-auto md:w-1/2 p-6">
          <ul class="-m-6">
            <li class="flex max-w-md p-6">
              <div>
                <svg class="mr-4" width="53" height="54" viewBox="0 0 53 54" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path opacity="0.12" d="M45.6809 43.0239L48.5827 31.417H39.2539C38.6277 31.417 38.3147 31.417 38.0305 31.5033C37.7789 31.5797 37.5449 31.705 37.3417 31.8719C37.1123 32.0605 36.9386 32.321 36.5913 32.842L34.0746 36.617C33.7273 37.138 33.5536 37.3985 33.3242 37.5871C33.121 37.754 32.887 37.8793 32.6354 37.9557C32.3512 38.042 32.0382 38.042 31.412 38.042H21.5872C20.9611 38.042 20.648 38.042 20.3638 37.9557C20.1122 37.8793 19.8782 37.754 19.6751 37.5871C19.4456 37.3985 19.272 37.138 18.9247 36.617L18.9246 36.617L16.4079 32.842C16.0606 32.321 15.8869 32.0605 15.6575 31.8719C15.4544 31.705 15.2203 31.5797 14.9688 31.5033C14.6846 31.417 14.3715 31.417 13.7454 31.417H4.41602L7.31775 43.0239C7.85942 45.1906 8.13025 46.2739 8.73423 47.0805C9.26714 47.7922 9.98017 48.349 10.7999 48.6933C11.7289 49.0837 12.8456 49.0837 15.0789 49.0837H37.9198C40.1531 49.0837 41.2698 49.0837 42.1988 48.6933C43.0185 48.349 43.7316 47.7922 44.2645 47.0805C44.8685 46.2739 45.1393 45.1906 45.6809 43.0239Z" fill="white"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9844 3.41615L17.2873 3.41628H35.7115L36.0144 3.41615C37.9508 3.41483 39.3582 3.41388 40.5716 3.9237C41.6372 4.37141 42.5642 5.09516 43.257 6.02037C44.0458 7.07394 44.3862 8.43952 44.8546 10.3184L44.9279 10.6123L48.8736 26.3959L48.9037 26.516C49.3091 28.1376 49.5511 29.1054 49.6484 30.0956C49.7348 30.9739 49.7348 31.8587 49.6484 32.737C49.5511 33.7271 49.3091 34.6949 48.9036 36.3165L48.9036 36.3166L48.8736 36.4366L47.136 43.387L47.0626 43.6809C46.5943 45.5598 46.2539 46.9253 45.465 47.9789C44.7722 48.9041 43.8452 49.6278 42.7797 50.0755C41.5662 50.5853 40.1589 50.5844 38.2225 50.5831L37.9196 50.5829H15.0787L14.7759 50.5831C12.8394 50.5844 11.4321 50.5853 10.2187 50.0755C9.15306 49.6278 8.22611 48.9041 7.53334 47.9789C6.74445 46.9253 6.40404 45.5598 5.93566 43.6809L5.86235 43.387L4.12481 36.4369L4.09477 36.3168C3.68927 34.6951 3.44725 33.7272 3.34992 32.7371C3.26356 31.8587 3.26357 30.9739 3.34993 30.0955C3.44728 29.1053 3.68931 28.1374 4.09483 26.5158L4.12487 26.3957L8.07097 10.6121L8.14429 10.3182C8.61268 8.43937 8.9531 7.07383 9.742 6.02028C10.4348 5.0951 11.3617 4.37137 12.4273 3.92368C13.6407 3.41388 15.0481 3.41483 16.9844 3.41615ZM17.2873 6.41628C14.9147 6.41628 14.1715 6.44489 13.5893 6.6895C13.0155 6.93056 12.5164 7.32026 12.1434 7.81844C11.7649 8.32394 11.5569 9.03797 10.9814 11.3397L7.03529 27.1233C6.68327 28.5313 6.49569 29.2912 6.39658 29.9163H13.7448L13.869 29.9161H13.869C14.3668 29.915 14.8987 29.9138 15.4041 30.0673C15.8444 30.201 16.2539 30.4202 16.6094 30.7124C17.0174 31.0477 17.3116 31.491 17.5868 31.9058L17.6555 32.0092L20.1722 35.7843C20.3548 36.0583 20.4586 36.2128 20.543 36.3253C20.5952 36.3948 20.6205 36.4212 20.6274 36.4279C20.678 36.4694 20.7361 36.5005 20.7986 36.5195C20.8081 36.5216 20.8441 36.528 20.9309 36.5329C21.0712 36.5407 21.2574 36.5413 21.5867 36.5413H31.4115C31.7408 36.5413 31.9269 36.5407 32.0673 36.5329C32.1541 36.528 32.1901 36.5216 32.1996 36.5195C32.2621 36.5005 32.3202 36.4694 32.3707 36.4279C32.3777 36.4212 32.403 36.3948 32.4552 36.3253C32.5396 36.2128 32.6433 36.0583 32.826 35.7843L35.3427 32.0092L35.4114 31.9058C35.6866 31.491 35.9807 31.0477 36.3888 30.7124C36.7442 30.4202 37.1538 30.201 37.5941 30.0673C38.0994 29.9138 38.6314 29.915 39.1292 29.9161H39.1292L39.2533 29.9163H46.6018C46.5027 29.2912 46.3151 28.5314 45.9632 27.1235L42.0175 11.3399C41.4421 9.03805 41.2341 8.324 40.8555 7.81848C40.4825 7.32029 39.9834 6.93058 39.4096 6.68951C38.8274 6.44489 38.0842 6.41628 35.7115 6.41628H17.2873ZM46.6018 32.9163H39.2533C38.9241 32.9163 38.7379 32.9168 38.5975 32.9247C38.5108 32.9296 38.4747 32.936 38.4653 32.938C38.4028 32.9571 38.3446 32.9882 38.2941 33.0296C38.2871 33.0364 38.2618 33.0628 38.2096 33.1323C38.1252 33.2447 38.0215 33.3993 37.8389 33.6733L35.3221 37.4484L35.2534 37.5518C34.9782 37.9665 34.6841 38.4098 34.2761 38.7452C33.9206 39.0374 33.511 39.2566 33.0708 39.3903C32.5654 39.5437 32.0334 39.5426 31.5356 39.5415L31.4115 39.5413H21.5867L21.4626 39.5415C20.9648 39.5426 20.4328 39.5437 19.9274 39.3903C19.4871 39.2566 19.0776 39.0374 18.7221 38.7452C18.3141 38.4098 18.0199 37.9665 17.7447 37.5518L17.676 37.4484L15.1593 33.6733C14.9767 33.3993 14.873 33.2447 14.7885 33.1323C14.7364 33.0628 14.7111 33.0364 14.7041 33.0296C14.6536 32.9882 14.5954 32.9571 14.5329 32.938C14.5234 32.936 14.4874 32.9296 14.4006 32.9247C14.2603 32.9168 14.0741 32.9163 13.7448 32.9163H6.39656C6.49566 33.5414 6.68323 34.3013 7.03524 35.7093L8.77277 42.6594C9.34822 44.9612 9.55622 45.6753 9.93474 46.1808C10.3078 46.679 10.8069 47.0687 11.3807 47.3097C11.9629 47.5543 12.7061 47.5829 15.0787 47.5829H37.9196C40.2922 47.5829 41.0354 47.5543 41.6176 47.3097C42.1914 47.0687 42.6905 46.679 43.0636 46.1808C43.4421 45.6753 43.6501 44.9612 44.2255 42.6594L45.9631 35.709C46.3151 34.3012 46.5027 33.5413 46.6018 32.9163ZM19.8744 14.4579C19.046 14.4579 18.3744 15.1295 18.3744 15.9579C18.3744 16.7864 19.046 17.4579 19.8744 17.4579H33.1244C33.9529 17.4579 34.6244 16.7864 34.6244 15.9579C34.6244 15.1295 33.9529 14.4579 33.1244 14.4579H19.8744ZM22.0828 23.2913C21.2543 23.2913 20.5828 23.9629 20.5828 24.7913C20.5828 25.6197 21.2543 26.2913 22.0828 26.2913H30.9161C31.7445 26.2913 32.4161 25.6197 32.4161 24.7913C32.4161 23.9629 31.7445 23.2913 30.9161 23.2913H22.0828ZM14.5356 32.9387L14.533 32.938C14.5348 32.9385 14.5357 32.9387 14.5356 32.9387ZM14.7025 33.0282C14.7022 33.0279 14.702 33.0277 14.702 33.0278L14.704 33.0296C14.7034 33.0289 14.7028 33.0285 14.7025 33.0282Z" fill="white"></path>
                </svg>
              </div>
              <p class="text-xl text-white font-medium tracking-tight">Save all your data on cloud and never lose in future.</p>
            </li>
            <li class="flex max-w-md p-6">
              <div>
                <svg class="mr-4" width="53" height="54" viewBox="0 0 53 54" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path opacity="0.12" d="M45.6809 43.0239L48.5827 31.417H39.2539C38.6277 31.417 38.3147 31.417 38.0305 31.5033C37.7789 31.5797 37.5449 31.705 37.3417 31.8719C37.1123 32.0605 36.9386 32.321 36.5913 32.842L34.0746 36.617C33.7273 37.138 33.5536 37.3985 33.3242 37.5871C33.121 37.754 32.887 37.8793 32.6354 37.9557C32.3512 38.042 32.0382 38.042 31.412 38.042H21.5872C20.9611 38.042 20.648 38.042 20.3638 37.9557C20.1122 37.8793 19.8782 37.754 19.6751 37.5871C19.4456 37.3985 19.272 37.138 18.9247 36.617L18.9246 36.617L16.4079 32.842C16.0606 32.321 15.8869 32.0605 15.6575 31.8719C15.4544 31.705 15.2203 31.5797 14.9688 31.5033C14.6846 31.417 14.3715 31.417 13.7454 31.417H4.41602L7.31775 43.0239C7.85942 45.1906 8.13025 46.2739 8.73423 47.0805C9.26714 47.7922 9.98017 48.349 10.7999 48.6933C11.7289 49.0837 12.8456 49.0837 15.0789 49.0837H37.9198C40.1531 49.0837 41.2698 49.0837 42.1988 48.6933C43.0185 48.349 43.7316 47.7922 44.2645 47.0805C44.8685 46.2739 45.1393 45.1906 45.6809 43.0239Z" fill="white"></path>
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9844 3.41615L17.2873 3.41628H35.7115L36.0144 3.41615C37.9508 3.41483 39.3582 3.41388 40.5716 3.9237C41.6372 4.37141 42.5642 5.09516 43.257 6.02037C44.0458 7.07394 44.3862 8.43952 44.8546 10.3184L44.9279 10.6123L48.8736 26.3959L48.9037 26.516C49.3091 28.1376 49.5511 29.1054 49.6484 30.0956C49.7348 30.9739 49.7348 31.8587 49.6484 32.737C49.5511 33.7271 49.3091 34.6949 48.9036 36.3165L48.9036 36.3166L48.8736 36.4366L47.136 43.387L47.0626 43.6809C46.5943 45.5598 46.2539 46.9253 45.465 47.9789C44.7722 48.9041 43.8452 49.6278 42.7797 50.0755C41.5662 50.5853 40.1589 50.5844 38.2225 50.5831L37.9196 50.5829H15.0787L14.7759 50.5831C12.8394 50.5844 11.4321 50.5853 10.2187 50.0755C9.15306 49.6278 8.22611 48.9041 7.53334 47.9789C6.74445 46.9253 6.40404 45.5598 5.93566 43.6809L5.86235 43.387L4.12481 36.4369L4.09477 36.3168C3.68927 34.6951 3.44725 33.7272 3.34992 32.7371C3.26356 31.8587 3.26357 30.9739 3.34993 30.0955C3.44728 29.1053 3.68931 28.1374 4.09483 26.5158L4.12487 26.3957L8.07097 10.6121L8.14429 10.3182C8.61268 8.43937 8.9531 7.07383 9.742 6.02028C10.4348 5.0951 11.3617 4.37137 12.4273 3.92368C13.6407 3.41388 15.0481 3.41483 16.9844 3.41615ZM17.2873 6.41628C14.9147 6.41628 14.1715 6.44489 13.5893 6.6895C13.0155 6.93056 12.5164 7.32026 12.1434 7.81844C11.7649 8.32394 11.5569 9.03797 10.9814 11.3397L7.03529 27.1233C6.68327 28.5313 6.49569 29.2912 6.39658 29.9163H13.7448L13.869 29.9161H13.869C14.3668 29.915 14.8987 29.9138 15.4041 30.0673C15.8444 30.201 16.2539 30.4202 16.6094 30.7124C17.0174 31.0477 17.3116 31.491 17.5868 31.9058L17.6555 32.0092L20.1722 35.7843C20.3548 36.0583 20.4586 36.2128 20.543 36.3253C20.5952 36.3948 20.6205 36.4212 20.6274 36.4279C20.678 36.4694 20.7361 36.5005 20.7986 36.5195C20.8081 36.5216 20.8441 36.528 20.9309 36.5329C21.0712 36.5407 21.2574 36.5413 21.5867 36.5413H31.4115C31.7408 36.5413 31.9269 36.5407 32.0673 36.5329C32.1541 36.528 32.1901 36.5216 32.1996 36.5195C32.2621 36.5005 32.3202 36.4694 32.3707 36.4279C32.3777 36.4212 32.403 36.3948 32.4552 36.3253C32.5396 36.2128 32.6433 36.0583 32.826 35.7843L35.3427 32.0092L35.4114 31.9058C35.6866 31.491 35.9807 31.0477 36.3888 30.7124C36.7442 30.4202 37.1538 30.201 37.5941 30.0673C38.0994 29.9138 38.6314 29.915 39.1292 29.9161H39.1292L39.2533 29.9163H46.6018C46.5027 29.2912 46.3151 28.5314 45.9632 27.1235L42.0175 11.3399C41.4421 9.03805 41.2341 8.324 40.8555 7.81848C40.4825 7.32029 39.9834 6.93058 39.4096 6.68951C38.8274 6.44489 38.0842 6.41628 35.7115 6.41628H17.2873ZM46.6018 32.9163H39.2533C38.9241 32.9163 38.7379 32.9168 38.5975 32.9247C38.5108 32.9296 38.4747 32.936 38.4653 32.938C38.4028 32.9571 38.3446 32.9882 38.2941 33.0296C38.2871 33.0364 38.2618 33.0628 38.2096 33.1323C38.1252 33.2447 38.0215 33.3993 37.8389 33.6733L35.3221 37.4484L35.2534 37.5518C34.9782 37.9665 34.6841 38.4098 34.2761 38.7452C33.9206 39.0374 33.511 39.2566 33.0708 39.3903C32.5654 39.5437 32.0334 39.5426 31.5356 39.5415L31.4115 39.5413H21.5867L21.4626 39.5415C20.9648 39.5426 20.4328 39.5437 19.9274 39.3903C19.4871 39.2566 19.0776 39.0374 18.7221 38.7452C18.3141 38.4098 18.0199 37.9665 17.7447 37.5518L17.676 37.4484L15.1593 33.6733C14.9767 33.3993 14.873 33.2447 14.7885 33.1323C14.7364 33.0628 14.7111 33.0364 14.7041 33.0296C14.6536 32.9882 14.5954 32.9571 14.5329 32.938C14.5234 32.936 14.4874 32.9296 14.4006 32.9247C14.2603 32.9168 14.0741 32.9163 13.7448 32.9163H6.39656C6.49566 33.5414 6.68323 34.3013 7.03524 35.7093L8.77277 42.6594C9.34822 44.9612 9.55622 45.6753 9.93474 46.1808C10.3078 46.679 10.8069 47.0687 11.3807 47.3097C11.9629 47.5543 12.7061 47.5829 15.0787 47.5829H37.9196C40.2922 47.5829 41.0354 47.5543 41.6176 47.3097C42.1914 47.0687 42.6905 46.679 43.0636 46.1808C43.4421 45.6753 43.6501 44.9612 44.2255 42.6594L45.9631 35.709C46.3151 34.3012 46.5027 33.5413 46.6018 32.9163ZM19.8744 14.4579C19.046 14.4579 18.3744 15.1295 18.3744 15.9579C18.3744 16.7864 19.046 17.4579 19.8744 17.4579H33.1244C33.9529 17.4579 34.6244 16.7864 34.6244 15.9579C34.6244 15.1295 33.9529 14.4579 33.1244 14.4579H19.8744ZM22.0828 23.2913C21.2543 23.2913 20.5828 23.9629 20.5828 24.7913C20.5828 25.6197 21.2543 26.2913 22.0828 26.2913H30.9161C31.7445 26.2913 32.4161 25.6197 32.4161 24.7913C32.4161 23.9629 31.7445 23.2913 30.9161 23.2913H22.0828ZM14.5356 32.9387L14.533 32.938C14.5348 32.9385 14.5357 32.9387 14.5356 32.9387ZM14.7025 33.0282C14.7022 33.0279 14.702 33.0277 14.702 33.0278L14.704 33.0296C14.7034 33.0289 14.7028 33.0285 14.7025 33.0282Z" fill="white"></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 #1106

Tailwind CSS

Basko

<section class="py-24 lg:pb-36 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-xl text-center mx-auto mb-12">
      <span class="inline-block mb-6 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">3200+ Happy Customers</span>
      <h2 class="font-heading mb-4 text-6xl tracking-tighter">Don’t take our word for it.</h2>
      <p class="text-xl tracking-tight">Our visual designer lets you quickly and of drag and drop down your way to custom apps for both keep desktop.</p>
    </div>
    <div class="relative overflow-hidden">
      <div class="absolute top-0 left-0 z-10 w-full h-24 md:h-48" style="background: linear-gradient(180deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0) 100%);"></div>
      <div class="absolute bottom-0 left-0 z-10 w-full h-24 md:h-48 transform rotate-180" style="background: linear-gradient(180deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0) 100%);"></div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="p-6 bg-white rounded-lg transform hover:-translate-y-5 transition duration-500">
          <div class="flex flex-wrap -m-0.5 mb-6">
            <div class="w-auto p-0.5">
              <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.35279 0.730779L11.9212 6.18903L17.6625 7.06451C17.8112 7.08761 17.9344 7.19674 17.9807 7.34619C18.027 7.49563 17.9884 7.65959 17.8809 7.7694L13.7272 12.0171L14.7079 18.0162C14.7337 18.1709 14.6731 18.3275 14.5517 18.4199C14.4302 18.5124 14.2691 18.5246 14.1362 18.4515L9.00059 15.6197L3.86502 18.4523C3.73217 18.5257 3.57094 18.5137 3.44943 18.4212C3.32793 18.3288 3.26734 18.1722 3.29327 18.0174L4.27397 12.0171L0.119103 7.7694C0.0116435 7.65959 -0.027039 7.49563 0.0192579 7.34619C0.0655548 7.19674 0.188839 7.08761 0.337471 7.06451L6.07884 6.18903L8.64838 0.730779C8.71377 0.589643 8.85058 0.5 9.00059 0.5C9.1506 0.5 9.28741 0.589643 9.35279 0.730779Z" fill="#FFBB29"></path>
              </svg>
            </div>
            <div class="w-auto p-0.5">
              <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.35279 0.730779L11.9212 6.18903L17.6625 7.06451C17.8112 7.08761 17.9344 7.19674 17.9807 7.34619C18.027 7.49563 17.9884 7.65959 17.8809 7.7694L13.7272 12.0171L14.7079 18.0162C14.7337 18.1709 14.6731 18.3275 14.5517 18.4199C14.4302 18.5124 14.2691 18.5246 14.1362 18.4515L9.00059 15.6197L3.86502 18.4523C3.73217 18.5257 3.57094 18.5137 3.44943 18.4212C3.32793 18.3288 3.26734 18.1722 3.29327 18.0174L4.27397 12.0171L0.119103 7.7694C0.0116435 7.65959 -0.027039 7.49563 0.0192579 7.34619C0.0655548 7.19674 0.188839 7.08761 0.337471 7.06451L6.07884 6.18903L8.64838 0.730779C8.71377 0.589643 8.85058 0.5 9.00059 0.5C9.1506 0.5 9.28741 0.589643 9.35279 0.730779Z" fill="#FFBB29"></path>
              </svg>
            </div>
            <div class="w-auto p-0.5">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1107

Tailwind CSS

Basko

<section class="py-24 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <span class="inline-block max-w-max mb-8 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">Try some freebie</span>
      <h2 class="font-heading mb-4 text-6xl text-gray-700 tracking-tighter">Upgrade your online marketing game today</h2>
      <p class="mb-8 text-xl tracking-tight">Basko is the super simple way to connect over video. No apps, downloads, or long meeting links.</p>
      <div class="flex flex-wrap justify-center -m-1.5 mb-5">
        <div class="w-auto p-1.5">
          <input class="block w-full px-5 py-4 text-gray-700 bg-white outline-none placeholder-gray-700 border border-gray-300 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" type="text" placeholder="Enter your email address">
        </div>
        <div class="w-auto p-1.5"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
  </div>
</section>

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

Tailwind CSS

Basko

<section class="py-24 lg:py-28 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-md">
          <h2 class="font-heading mb-6 text-6xl tracking-tighter">Our numbers speak for itself</h2>
          <p class="mb-8 text-xl">Use and re-use tons of responsive sections create on-brand home for your product.</p>
          <a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Try 14 Days Free Trial</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-md mx-auto md:mr-0">
          <div class="flex flex-wrap -m-10">
            <div class="w-full lg:w-1/2 p-10">
              <h3 class="font-heading mb-2 inline-block text-6xl md:text-7xl tracking-tighter" style="background: linear-gradient(86deg, rgba(186,109,238,1) 0%, rgba(252,202,89,1) 100%, rgba(252,202,89,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">10k+</h3>
              <p class="font-medium tracking-tight">Companies use Sense</p>
            </div>
            <div class="w-full lg:w-1/2 p-10">
              <h3 class="font-heading mb-2 inline-block text-6xl md:text-7xl tracking-tighter" style="background: linear-gradient(86deg, rgba(186,109,238,1) 0%, rgba(252,202,89,1) 100%, rgba(252,202,89,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">2015</h3>
              <p class="font-medium tracking-tight">Year founded</p>
            </div>
            <div class="w-full lg:w-1/2 p-10">
              <h3 class="font-heading mb-2 inline-block text-6xl md:text-7xl tracking-tighter" style="background: linear-gradient(86deg, rgba(186,109,238,1) 0%, rgba(252,202,89,1) 100%, rgba(252,202,89,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">$5M+</h3>
              <p class="font-medium tracking-tight">Raised in Series-A funding</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1109

Tailwind CSS

Basko

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-6">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto pr-2">
            <a href="#">
              <img src="basko-assets/logos/basko-logo-light.png" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center">
              <li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Features</a></li>
              <li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Pricing</a></li>
              <li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Automation</a></li>
            </ul>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
              <svg class="text-indigo-600" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/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 #1110

Tailwind CSS

Basko

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <div class="relative flex items-center justify-between px-6 py-5">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto pr-2">
          <a href="#">
            <img src="basko-assets/logos/basko-logo-light.png" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="absolute left-1/2 transform -translate-x-1/2 w-auto hidden lg:block">
          <ul class="flex items-center mr-8">
            <li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Features</a></li>
            <li class="mr-14 font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Pricing</a></li>
            <li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Automation</a></li>
          </ul>
        </div>
        <div class="w-auto hidden lg:block">
          <div class="inline-block"><a class="inline-block px-5 py-3 text-white font-semibold text-center tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
        </div>
        <div class="w-auto lg:hidden">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1111

Tailwind CSS

Basko

<section class="py-24 lg:py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative bg-indigo-500 overflow-hidden rounded-2xl">
      <div class="flex flex-wrap">
        <div class="w-full md:w-1/2">
          <div class="flex flex-col justify-between p-12 h-full">
            <div class="mb-12">
              <h2 class="font-heading mb-6 text-6xl text-white tracking-tighter">Get more traffic with customized marketing.</h2>
              <p class="text-white tracking-tight">Basko is the super simple way to connect over video. No apps, downloads, or long meeting links.</p>
            </div>
            <div class="inline-block"><a class="inline-block px-5 py-4 font-semibold tracking-tight bg-white hover:bg-gray-200 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
          </div>
        </div>
        <div class="self-end w-full md:w-1/2 md:pt-16">
          <img class="md:ml-auto rounded-tl-2xl transform hover:scale-105 transition duration-500" src="basko-assets/images/cta/bg3.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

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

Tailwind CSS

Basko

<section class="py-24 lg:py-28 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <div class="flex flex-wrap -m-10">
            <div class="w-auto p-10">
              <h3 class="mb-4 text-2xl text-white font-semibold" style="letter-spacing: -0.5px;">Build Strong Brand</h3>
              <p class="text-xl text-gray-300 tracking-tight">Create an on-brand home for your product and save countless hours on design time.</p>
            </div>
            <div class="w-auto p-10">
              <h3 class="mb-4 text-2xl text-white font-semibold" style="letter-spacing: -0.5px;">Make Remote Team</h3>
              <p class="text-xl text-gray-300 tracking-tight">Create an on-brand home for your product and save countless hours on design time.</p>
            </div>
            <div class="w-auto p-10">
              <h3 class="mb-4 text-2xl text-white font-semibold" style="letter-spacing: -0.5px;">Save Data on Cloud</h3>
              <p class="text-xl text-gray-300 tracking-tight">Create an on-brand home for your product and save countless hours on design time.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-max mx-auto">
          <img class="transform hover:-translate-y-2 transition duration-500" src="basko-assets/images/features/features.png" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1113

Tailwind CSS

Basko

<section class="relative py-24 lg:pb-32 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-16">
      <h2 class="font-heading text-6xl tracking-tighter">Kind words from online industry leaders</h2>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 p-3">
        <div class="flex flex-col justify-between p-9 h-full bg-gray-700 transform hover:-translate-y-2 rounded-2xl transition duration-500">
          <div class="mb-8">
            <img class="mb-12" src="basko-assets/images/testimonials/logo3.svg" alt="">
            <p class="text-xl text-white font-medium tracking-tight">“If you're looking to streamline your workflow and save time, look no further than Basko. It's a must-have for any modern business.”</p>
          </div>
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5">
              <img src="basko-assets/images/testimonials/avatar5.png" alt="">
            </div>
            <div class="w-auto p-1.5">
              <h3 class="font-semibold text-white tracking-tight">James Roy</h3>
              <span class="text-sm text-gray-300 tracking-tight">Founder, LightSound</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-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 #1114

Tailwind CSS

Basko

<section class="py-24 lg:py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative p-12 bg-black overflow-hidden rounded-2xl">
      <img class="absolute top-0 right-0" src="basko-assets/images/cta/gradient.png" alt="">
      <div class="relative">
        <h2 class="font-heading mb-2 text-6xl text-white tracking-tighter">Get early access to Basko.</h2>
        <h2 class="font-heading mb-8 text-6xl text-gray-400 tracking-tighter">Close your books faster and grow.</h2>
        <a class="inline-block mb-32 lg:mb-48 px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
        <ul class="flex flex-wrap -m-4">
          <li class="p-4">
            <a class="flex flex-wrap" href="#">
              <svg class="mr-3" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.25 13L11.75 15.5L16.75 10.5M24.25 13C24.25 19.2132 19.2132 24.25 13 24.25C6.7868 24.25 1.75 19.2132 1.75 13C1.75 6.7868 6.7868 1.75 13 1.75C19.2132 1.75 24.25 6.7868 24.25 13Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white tracking-tight">Seamless Collaboration</span>
            </a>
          </li>
          <li class="p-4">
            <a class="flex flex-wrap" href="#">
              <svg class="mr-3" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.25 13L11.75 15.5L16.75 10.5M24.25 13C24.25 19.2132 19.2132 24.25 13 24.25C6.7868 24.25 1.75 19.2132 1.75 13C1.75 6.7868 6.7868 1.75 13 1.75C19.2132 1.75 24.25 6.7868 24.25 13Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white tracking-tight">Customizable Workflows</span>
            </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 #1115

Tailwind CSS

Basko

<section class="py-24 lg:pt-32 lg:pb-36 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <h2 class="font-heading mb-4 text-6xl tracking-tighter">Feature Overview</h2>
          <p class="mb-20 text-xl tracking-tight">Create an on-brand home for your product and save countless hours on design time.</p>
          <ul class="flex flex-col -m-3">
            <li class="flex items-center p-3">
              <a class="flex items-center text-indigo-500 hover:text-indigo-600 transition duration-500" href="#">
                <span class="mr-3 text-xl font-semibold">Transaction Summary</span>
                <div class="inline-block">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </a>
            </li>
            <li class="flex items-center p-3">
              <a class="flex items-center text-inherit hover:text-indigo-600 transition duration-500" href="#">
                <span class="mr-3 text-xl font-semibold">Onboarding Dashboard</span>
                <div class="inline-block">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1116

Tailwind CSS

Basko

<section class="relative py-24 lg:pt-32 lg:pb-36 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-lg">
          <span class="inline-block mb-8 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">Try some freebie</span>
          <h2 class="font-heading mb-6 text-6xl tracking-tighter">Businesses use Basko to create websites.</h2>
          <p class="mb-8 text-xl">Our visual designer lets you quickly and of drag and drop down your way to custom apps for both keep desktop.</p>
          <a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Meet More Customers</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-lg mx-auto md:mr-0 w-full overflow-hidden transform hover:-translate-x-2 rounded-xl shadow-3xl transition duration-500">
          <img class="h-80 w-full object-cover" src="basko-assets/images/testimonials/woman.jpg" alt="">
          <div class="px-10 py-9 bg-white">
            <p class="mb-6 text-xl font-medium tracking-tight">“I love the time tracking feature in Basko. It has helped me identify areas where I was wasting time and allowed me to optimize my workflow for maximum productivity.”</p>
            <h3 class="text-xl font-semibold text-indigo-500 tracking-tight">Chelsea French</h3>
            <span class="text-sm text-gray-600 tracking-tight">Business Owner</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

Tailwind CSS

Basko

<section class="bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-lg pt-24 md:pb-24 lg:py-32 h-full">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-12 md:mb-96">
              <h2 class="font-heading mb-5 text-6xl tracking-tighter">They use Basko to create great websites.</h2>
              <p class="text-xl tracking-tight">Our visual designer lets you quickly and drag and drop down your way to custom apps for both keep desktop, mobile.</p>
            </div>
            <a class="flex items-center font-semibold hover:text-indigo-500 tracking-tight transition duration-200" href="#">
              <span class="mr-2.5">Meet More Customers</span>
              <div class="inline-block">
                <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.95693 7.75693L15.5566 7.75693M15.5566 7.75693L15.5566 14.3566M15.5566 7.75693L7.07132 16.2422" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 p-8">
        <div class="md:absolute md:top-1/2 md:right-0 md:transform md:-translate-y-1/2">
          <div class="flex flex-col lg:flex-row items-center -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 #1118

Tailwind CSS

Basko

<section class="py-24 lg:py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-5">
      <div class="w-full md:w-7/12 p-5">
        <div class="p-12 bg-indigo-500 h-full rounded-2xl">
          <div class="md:max-w-lg h-full">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-12">
                <h2 class="font-heading text-6xl text-white tracking-tighter">Elevate your business to the next level.</h2>
              </div>
              <div class="inline-block">
                <p class="mb-8 text-xl text-gray-200 tracking-tight">Basko is the super simple way to connect over video. No apps, downloads, or long meeting links.</p>
                <a class="inline-block px-8 py-4 font-semibold tracking-tight text-indigo-500 bg-white hover:bg-gray-200 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Contact Us</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-5/12 p-5">
        <div class="h-full max-w-max mx-auto overflow-hidden rounded-2xl">
          <img class="object-cover h-full transform hover:scale-105 transition duration-500" src="basko-assets/images/cta/work.jpg" alt="">
        </div>
      </div>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1119

Tailwind CSS

Basko

<section class="py-24 lg:py-32 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-max mx-auto">
          <img class="transform hover:-translate-y-2 transition duration-500" src="basko-assets/images/features/boost-brand.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <h2 class="font-heading mb-4 text-6xl tracking-tighter">Boost your brand's visibility and reach</h2>
          <p class="text-xl mb-20">Use this table to compare your product to a complete project.</p>
          <div class="flex flex-wrap">
            <div class="w-full">
              <div class="cursor-pointer block py-4 border-t border-b" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
                <div class="flex flex-wrap justify-between items-center mb-0 -m-2">
                  <div class="w-auto p-2">
                    <h3 class="font-semibold tracking-tight">Cashless Payment</h3>
                  </div>
                  <div class="w-auto p-2">
                    <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M3.33268 10L7.99935 5.33333L12.666 10" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></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 #1120

Tailwind CSS

Basko

<section class="py-24 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-xl">
          <h2 class="font-heading mb-6 text-6xl text-gray-700 tracking-tighter">Maximize your ROI with our data-driven process.</h2>
          <p class="mb-8 text-xl tracking-tight">Grow faster with a website that helps you convert more customers.</p>
          <a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="relative max-w-max overflow-hidden rounded-2xl">
          <img class="mix-blend-color absolute top-0 left-0 w-full h-full" src="basko-assets/images/cta/gradient2.png" alt="">
          <div class="flex flex-wrap gap-px">
            <div class="w-auto">
              <img src="basko-assets/images/cta/avatar1.jpg" alt="">
            </div>
            <div class="w-auto">
              <img src="basko-assets/images/cta/avatar3.jpg" alt="">
            </div>
            <div class="w-auto">
              <img src="basko-assets/images/cta/placeholder-avatar.png" alt="">
            </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.

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

Get the code for 13,400+ components

Tailwind Component #1102

Get the code for 13,400+ components

Tailwind Component #1103

Get the code for 13,400+ components

Tailwind Component #1104

Get the code for 13,400+ components

Tailwind Component #1105

Get the code for 13,400+ components

Tailwind Component #1106

Get the code for 13,400+ components

Tailwind Component #1107

Get the code for 13,400+ components

Tailwind Component #1108

Get the code for 13,400+ components

Tailwind Component #1109

Get the code for 13,400+ components

Tailwind Component #1110

Get the code for 13,400+ components

Tailwind Component #1111

Get the code for 13,400+ components

Tailwind Component #1112

Get the code for 13,400+ components

Tailwind Component #1113

Get the code for 13,400+ components

Tailwind Component #1114

Get the code for 13,400+ components

Tailwind Component #1115

Get the code for 13,400+ components

Tailwind Component #1116

Get the code for 13,400+ components

Tailwind Component #1117

Get the code for 13,400+ components

Tailwind Component #1118

Get the code for 13,400+ components

Tailwind Component #1119

Get the code for 13,400+ components

Tailwind Component #1120

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