Tailwind CSS Components

Framework

UI Library

Lifetime Access

Full Shuffle access forever for $249

Pay once, ship unlimited projects. No subscription, no renewals, all future updates included.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #1081

Tailwind CSS

Basko

<section class="py-24 bg-black 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">
        <h2 class="max-w-md text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">Promote some impressive product awards and metrics of Basko.</h2>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap justify-center -m-8 2xl:-m-16">
          <div class="w-auto text-center p-8 2xl:p-16">
            <h3 class="mb-2.5 text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">4.98/5</h3>
            <div class="flex flex-wrap justify-center -m-0.5 mb-2.5">
              <div class="w-auto p-0.5">
                <img src="basko-assets/images/facts/star.png" alt="">
              </div>
              <div class="w-auto p-0.5">
                <img src="basko-assets/images/facts/star.png" alt="">
              </div>
              <div class="w-auto p-0.5">
                <img src="basko-assets/images/facts/star.png" alt="">
              </div>
              <div class="w-auto p-0.5">
                <img src="basko-assets/images/facts/star.png" alt="">
              </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

AI Stats Component Generator

Tailwind Component #1082

Tailwind CSS

Basko

<section class="py-24 lg:py-44 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-xl">
          <h2 class="font-heading mb-6 text-6xl tracking-tighter">Boost your brand's visibility and reach</h2>
          <p class="mb-20 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 start.</p>
          <div class="flex flex-wrap -m-6">
            <div class="w-full md:w-1/2 p-6">
              <h3 class="mb-2 text-xl font-semibold tracking-tight">Transactions</h3>
              <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</p>
            </div>
            <div class="w-full md:w-1/2 p-6">
              <h3 class="mb-2 text-xl font-semibold tracking-tight">Summaries</h3>
              <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</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/payment.png" alt="">
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #1083

Tailwind CSS

Basko

<section class="bg-white" 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-dark.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 hover:text-gray-900 tracking-tight"><a href="#">Features</a></li>
            <li class="mr-14 font-medium hover:text-gray-900 tracking-tight"><a href="#">Pricing</a></li>
            <li class="font-medium hover:text-gray-900 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-400 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

AI Navigation (horizontal) Component Generator

Tailwind Component #1084

Tailwind CSS

Basko

<section class="py-24 lg:py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="overflow-hidden rounded-xl">
      <div class="flex flex-wrap">
        <div class="flex-1 md:w-1/2">
          <div class="p-10 flex flex-col justify-between h-full bg-black">
            <div class="mb-12">
              <h2 class="font-heading mb-8 text-6xl text-white tracking-tighter">Elevate your business to the next level.</h2>
            </div>
            <div class="inline-block">
              <p class="mb-6 text-xl text-white tracking-tight">Create an on-brand home for your product and save countless hours on design time.</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>
        <div class="w-full md:w-1/2">
          <div class="relative h-full overflow-hidden">
            <div class="absolute bottom-10 left-11 z-10 p-5">
              <a class="p-5 flex items-center bg-white hover:bg-gray-100 rounded-lg transition duration-200 focus:ring-4 focus:ring-gray-200" href="#">
                <div class="inline-block mr-4">
                  <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.5 8.86602C13.1667 8.48112 13.1667 7.51887 12.5 7.13397L2 1.0718C1.33333 0.686897 0.5 1.16802 0.5 1.93782L0.5 14.0622C0.5 14.832 1.33333 15.3131 2 14.9282L12.5 8.86602Z" fill="#171A1F"></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

AI Call to action Component Generator

Tailwind Component #1085

Tailwind CSS

Basko

<section class="py-24 lg:py-32 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="font-heading mb-16 text-6xl tracking-tighter">Unlock your productivity potential</h2>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 p-3">
        <div class="group h-full overflow-hidden rounded-2xl">
          <img class="w-full h-full object-cover mx-auto rounded-2xl transform group-hover:scale-105 transition duration-500" src="basko-assets/images/how-it-works/woman2.jpg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 p-3">
        <div class="px-12 py-11 h-full bg-white rounded-2xl">
          <div class="flex flex-col justify-between h-full md:max-w-md">
            <h3 class="mb-10 text-3xl font-semibold" style="letter-spacing: -0.5px;">Take control of tour projects</h3>
            <div class="flex flex-wrap -m-3.5">
              <div class="w-full p-3.5">
                <div class="group flex flex-wrap -m-2">
                  <div class="w-auto p-2">
                    <div class="flex items-center justify-center text-3xl group-hover:text-white text-indigo-500 font-semibold w-14 h-14 group-hover:bg-indigo-500 border border-gray-200 rounded-full transition duration-200" style="letter-spacing: -0.5px;">1</div>
                  </div>
                  <div class="flex-1 p-2">
                    <p class="font-medium tracking-tight">You need to choose the productivity SaaS tool that best fits your needs.</p>
                  </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

AI How it works Component Generator

Tailwind Component #1086

Tailwind CSS

Basko

<section class="py-24 lg:py-28 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="flex flex-col justify-between max-w-lg h-full">
          <div class="mb-12">
            <span class="inline-block max-w-max 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;">Try some freebie</span>
            <h2 class="font-heading mb-6 text-6xl text-gray-700 tracking-tighter">They use Basko to create great websites.</h2>
            <p class="text-xl tracking-tight">Our visual designer lets you quickly and of drag the and drop your way to customapps for both of all desktop, mobile.</p>
          </div>
          <div class="inline-block">
            <p class="mb-6 tracking-tight">“Our visual designer lets you quickly and of their drag and drop your way to custom apps for ton both desktop, mobile &amp; also tab will be repeat users on for sure.”</p>
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-auto p-2">
                <img src="basko-assets/images/contact/avatar.png" alt="">
              </div>
              <div class="flex-1 p-2">
                <h3 class="font-semibold tracking-tight leading-tight">Sam Kent</h3>
                <span class="text-sm text-gray-600 leading-tight">@skent</span>
              </div>
            </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

AI Contact Component Generator

Tailwind Component #1087

Tailwind CSS

Basko

<section class="py-28 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl text-center mx-auto mb-24">
      <h2 class="font-heading text-6xl tracking-tighter">We release interesting articles about technology</h2>
    </div>
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="group cursor-pointer">
            <div class="flex flex-wrap lg:items-center -m-5">
              <div class="w-auto p-5">
                <div class="overflow-hidden rounded-2xl">
                  <img class="w-full rounded-2xl transform hover:scale-105 transition duration-500" src="basko-assets/images/blog/article-small.jpg" alt="">
                </div>
              </div>
              <div class="flex-1 p-5">
                <h3 class="mb-3.5 text-3xl group-hover:text-gray-900 font-semibold group-hover:underline leading-snug" style="letter-spacing: -0.5px;">Get more done in less time. How to do it?</h3>
                <span class="text-sm text-gray-600 tracking-tight">November 22, 2022</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="group cursor-pointer">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Blog Component Generator

Tailwind Component #1088

Tailwind CSS

Basko

<section class="relative py-24 lg:py-28 lg:pb-36 bg-black overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <h2 class="font-heading mb-4 text-6xl text-white tracking-tighter">What our clients say</h2>
    <div class="flex flex-wrap items-center justify-between -m-2 mb-16">
      <div class="w-auto p-2">
        <p class="max-w-xl text-xl text-gray-300 tracking-tight">Basko is the super simple way to connect over video of apps, downloads, or long meeting links.</p>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap -m-1">
          <div class="w-auto p-1">
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 hover:bg-gray-800 rounded-full transition duration-200" x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null">
              <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.41242 1.44434L1.85686 6.99989M1.85686 6.99989L7.41242 12.5554M1.85686 6.99989L16.1426 6.99989" stroke="#7F8995" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
          <div class="w-auto p-1">
            <button class="flex items-center justify-center w-10 h-10 bg-white hover:bg-gray-200 rounded-full transition duration-200" x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1">
              <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.5876 1.44434L16.1431 6.99989M16.1431 6.99989L10.5876 12.5554M16.1431 6.99989L1.85742 6.99989" stroke="#171A1F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #1089

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 -m-3">
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-10 bg-white rounded-lg transform hover:-translate-y-2 transition duration-500">
          <div class="text-center">
            <h4 class="mb-8 text-xl font-semibold tracking-tight">Basic</h4>
            <h3>
              <span class="text-xl font-semibold tracking-tight">$</span>
              <span class="font-heading text-6xl md:text-7xl tracking-tighter">29</span>
            </h3>
            <span class="inline-block mb-7 tracking-tight">per user, per month</span>
            <div class="py-8 border-t border-b border-gray-300 border-opacity-60">
              <p class="tracking-tight max-w-xs mx-auto">Essential features for beginners. Get started with ease</p>
            </div>
            <ul class="py-8">
              <li class="flex flex-wrap items-center mb-2.5">
                <svg class="mr-4" width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.16797 6.82813L4.5013 10.1615L12.8346 1.82812" stroke="#5E27FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="font-medium">Basic Features</span>
              </li>
              <li class="flex flex-wrap items-center mb-2.5">
                <svg class="mr-4" width="14" height="12" viewBox="0 0 14 12" 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

AI Pricing Component Generator

Tailwind Component #1090

Tailwind CSS

Basko

<section class="pt-24 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="font-heading mb-11 text-6xl max-w-2xl mx-auto text-center tracking-tighter">Drop us a line or two, we are open for creative minds and collaborations!</h2>
    <div class="flex flex-wrap justify-center mb-32">
      <div class="w-auto"><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="pb-9 border-b border-gray-200">
      <div class="flex flex-wrap items-center justify-between -m-4">
        <div class="w-auto p-4">
          <a href="#">
            <img src="basko-assets/logos/basko-logo-dark.png" alt="">
          </a>
        </div>
        <div class="w-auto p-4">
          <ul class="flex flex-wrap -m-4 md:-m-9">
            <li class="p-4 md:p-9"><a class="font-medium text-gray-700 hover:text-gray-600 tracking-tight transition duration-200" href="#">About</a></li>
            <li class="p-4 md:p-9"><a class="font-medium text-gray-700 hover:text-gray-600 tracking-tight transition duration-200" href="#">Features</a></li>
            <li class="p-4 md:p-9"><a class="font-medium text-gray-700 hover:text-gray-600 tracking-tight transition duration-200" href="#">Works</a></li>
            <li class="p-4 md:p-9"><a class="font-medium text-gray-700 hover:text-gray-600 tracking-tight transition duration-200" href="#">Support</a></li>
          </ul>
        </div>
        <div class="w-auto p-4">
          <div class="flex flex-wrap items-center -m-4">
            <div class="w-auto p-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #1091

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">
            <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 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="mr-8 font-medium text-white hover:text-gray-200 tracking-tight border-r border-gray-700 pr-8"><a href="#">Automation</a></li>
              <li class="font-medium text-white hover:text-gray-200 tracking-tight"><a href="#">Customer Login</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>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #1092

Tailwind CSS

Basko

<section class="pt-12 md:pt-24 pb-24 lg:py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-xl">
          <div class="flex flex-wrap mb-10 md:mb-48">
            <div class="w-full">
              <a class="group block" href="#">
                <div class="flex flex-wrap py-6 -m-1.5">
                  <div class="w-7 p-1.5">
                    <span class="inline-block text-xl text-gray-300 font-semibold tracking-tight">1.</span>
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="text-xl font-medium tracking-tight">Choose the right tool</h3>
                  </div>
                </div>
                <div class="relative h-px bg-gray-200">
                  <div class="absolute top-0 left-0 w-0 group-hover:w-full h-px bg-indigo-500 transition-width duration-500"></div>
                </div>
              </a>
            </div>
            <div class="w-full">
              <a class="group block" href="#">
                <div class="flex flex-wrap py-6 -m-1.5">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI How it works Component Generator

Tailwind Component #1093

Tailwind CSS

Basko

<section class="py-24 lg:pt-28 lg:pb-32 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="font-heading mb-12 text-6xl tracking-tighter">Exclusive features</h2>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 p-3">
        <div class="relative p-8 h-full overflow-hidden rounded-lg">
          <div class="relative z-10 flex flex-col justify-between h-full">
            <div class="mb-24">
              <h3 class="font-heading text-5xl md:text-6xl text-white tracking-tighter">Boost your brand's visibility and reach</h3>
            </div>
            <div class="block">
              <p class="mb-6 text-xl text-white tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout.</p>
              <a class="inline-block px-8 py-4 font-semibold bg-white hover:bg-gray-100 tracking-tight rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-300" href="#">Learn more</a>
            </div>
          </div>
          <img class="absolute top-0 left-0 w-full h-full object-cover" src="basko-assets/images/features/bg.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 p-3">
        <div class="flex flex-col justify-between p-8 h-full bg-black overflow-hidden rounded-lg">
          <div class="mb-24">
            <h3 class="font-heading text-5xl md:text-6xl text-white tracking-tighter">Maximize your ROI with Basko.</h3>
          </div>
          <div class="block">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #1094

Tailwind CSS

Basko

<section class="py-24 bg-white 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="max-w-xl">
          <h2 class="font-heading mb-5 text-6xl text-gray-700 tracking-tighter">Maximize your ROI with our data-driven process.</h2>
          <p class="mb-10 text-xl tracking-tight">Our customer service rating has improved so much ever since we adopted Unicorns. The smooth integrations and easy tracking system.</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 mx-auto md:mr-0 overflow-hidden rounded-2xl">
          <div class="absolute bottom-0 left-0 p-8 w-full text-center py-8 z-10" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
            <p class="max-w-xs mx-auto text-xl text-white font-semibold">Industry Expert Support with 100% Satisfaction</p>
          </div>
          <img class="transform hover:scale-105 transition duration-500" src="basko-assets/images/cta/woman3.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

AI Call to action Component Generator

Tailwind Component #1095

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 -m-8">
      <div class="w-full md:w-1/2 p-8">
        <h2 class="max-w-md mb-7 text-3xl font-semibold" style="letter-spacing: -0.5px;">“With Basko, our performance has increased by 150%”</h2>
        <div class="flex flex-wrap -m-2">
          <div class="w-auto p-2">
            <img src="basko-assets/images/facts/avatar.png" alt="">
          </div>
          <div class="flex-1 p-2">
            <div>
              <h3 class="font-semibold tracking-tight">Andrew Pearson</h3>
              <span class="text-sm text-gray-600 tracking-tight">Founder, Company</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap justify-center -m-10">
          <div class="w-full lg:w-1/2 p-10">
            <h3 class="font-heading mb-4 text-6xl tracking-tighter">2x</h3>
            <p class="font-medium tracking-tight">A multiplier that suggests double the performance when compared to the competition.</p>
          </div>
          <div class="w-full lg:w-1/2 p-10">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #1096

Tailwind CSS

Basko

<section class="py-24 lg:pt-32 lg:pb-28 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-xl mx-auto">
      <div class="mb-14 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">Get Free Estimation</h2>
        <p class="text-xl tracking-tight">Our visual designer lets you quickly and of thei drag and drop your way to customapps for ton both desktop, mobile &amp; also</p>
      </div>
      <form class="flex flex-wrap -m-3" action="#">
        <div class="w-full md:w-1/2 p-3">
          <label class="block">
            <input class="px-4 py-4 w-full text-gray-700 tracking-tight placeholder-gray-700 outline-none border border-gray-700 focus:border-gray-400 rounded-lg duration-200" id="contactInput5-1" type="text" placeholder="First Name">
          </label>
        </div>
        <div class="w-full md:w-1/2 p-3">
          <label class="block">
            <input class="px-4 py-4 w-full text-gray-700 tracking-tight placeholder-gray-700 outline-none border border-gray-700 focus:border-gray-400 rounded-lg duration-200" id="contactInput5-2" type="text" placeholder="Last Name">
          </label>
        </div>
        <div class="w-full md:w-1/2 p-3">
          <label class="block">
            <input class="px-4 py-4 w-full text-gray-700 tracking-tight placeholder-gray-700 outline-none border border-gray-700 focus:border-gray-400 rounded-lg duration-200" id="contactInput5-3" type="email" placeholder="Email Address">
          </label>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #1097

Tailwind CSS

Basko

<section class="py-24 lg:pt-32 lg:pb-36 bg-black 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="flex flex-col justify-between h-full max-w-xl">
          <div class="mb-16">
            <span class="inline-block max-w-max 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;">300+ tools available</span>
            <h2 class="font-heading text-6xl text-white tracking-tighter">Elevate your brand with a beautiful website.</h2>
          </div>
          <div>
            <p class="mb-8 text-xl text-gray-400 tracking-tight">Here’s a brief description of the features:</p>
            <ul class="flex flex-wrap -m-2.5">
              <li class="flex items-center p-2.5">
                <div class="mr-3.5 inline-block">
                  <svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.25 9.25L7.25 14.25L19.75 1.75" stroke="#5E27FF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <p class="text-xl text-white tracking-tight">Unlimited Projects</p>
              </li>
              <li class="flex items-center p-2.5">
                <div class="mr-3.5 inline-block">
                  <svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.25 9.25L7.25 14.25L19.75 1.75" stroke="#5E27FF" stroke-width="3" 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

AI Pricing Component Generator

Tailwind Component #1098

Tailwind CSS

Basko

<section class="py-24 lg:py-32 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pb-16 border-b border-gray-600 border-opacity-40">
      <div class="max-w-2xl mx-auto text-center">
        <span class="inline-block mb-7 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;">New features</span>
        <h2 class="font-heading text-6xl text-white tracking-tighter leading-tight">Build trust with key metrics.</h2>
      </div>
    </div>
    <div class="pt-16">
      <div class="flex flex-wrap -m-10 2xl:-m-16">
        <div class="w-full md:w-1/2 lg:w-1/4 p-10 2xl:p-16">
          <div class="inline-block">
            <h3 class="font-heading mb-4 inline-block text-6xl text-white tracking-tighter">4.97/5</h3>
            <p class="text-gray-300 font-medium tracking-tight">Average rating of this great product.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 p-10 2xl:p-16">
          <div class="inline-block">
            <h3 class="font-heading mb-4 inline-block text-6xl text-white tracking-tighter">87%</h3>
            <p class="text-gray-300 font-medium tracking-tight">Users surveyed say they achieved positive results.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 p-10 2xl:p-16">
          <div class="inline-block">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #1099

Tailwind CSS

Basko

<section class="bg-white overflow-hidden">
  <div class="py-24 lg:py-28 overflow-hidden" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
    <div class="container px-4 mx-auto">
      <div class="max-w-xl mx-auto text-center">
        <h2 class="font-heading mb-6 text-6xl text-white tracking-tighter">Take your personal financing to the next level</h2>
        <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-5 py-4 text-gray-700 font-semibold tracking-tight bg-white hover:bg-gray-100 rounded-lg focus:ring-4 focus:ring-gray-200 transition duration-200" href="#">Try 14 Days Free Trial</a>
      </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

AI Call to action Component Generator

Tailwind Component #1100

Tailwind CSS

Basko

<section class="py-24 lg:pt-32 lg:pb-40 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="font-heading mb-12 lg:mb-24 text-6xl text-white tracking-tighter">How to streamline your workflow</h2>
    <div class="flex flex-wrap -m-5">
      <div class="w-full md:w-1/3 p-5">
        <h3 class="mb-4 text-xl text-white font-semibold tracking-tight">Add A Product</h3>
        <p class="mb-12 text-xl text-gray-400 tracking-tight">Manage your entire moving business from one of the simple, reliable CRM for it.</p>
        <img class="w-full rounded-lg transform hover:translate-y-3 transition duration-500" src="basko-assets/images/how-it-works/device.jpg" alt="">
      </div>
      <div class="w-full md:w-1/3 p-5">
        <h3 class="mb-4 text-xl text-white font-semibold tracking-tight">Improve Quality</h3>
        <p class="mb-12 text-xl text-gray-400 tracking-tight">Manage your entire moving business from one of the simple, reliable CRM for it.</p>
        <img class="w-full rounded-lg transform hover:translate-y-3 transition duration-500" src="basko-assets/images/how-it-works/woman4.jpg" alt="">
      </div>
      <div class="w-full md:w-1/3 p-5">
        <h3 class="mb-4 text-xl text-white font-semibold tracking-tight">Launch Your Brand</h3>
        <p class="mb-12 text-xl text-gray-400 tracking-tight">Manage your entire moving business from one of the simple, reliable CRM for it.</p>
        <img class="w-full rounded-lg transform hover:translate-y-3 transition duration-500" src="basko-assets/images/how-it-works/stock.jpg" alt="">
      </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

AI How it works Component Generator

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Tailwind Component #1081

Get the code for 13,400+ components

Tailwind Component #1082

Get the code for 13,400+ components

Tailwind Component #1083

Get the code for 13,400+ components

Tailwind Component #1084

Get the code for 13,400+ components

Tailwind Component #1085

Get the code for 13,400+ components

Tailwind Component #1086

Get the code for 13,400+ components

Tailwind Component #1087

Get the code for 13,400+ components

Tailwind Component #1088

Get the code for 13,400+ components

Tailwind Component #1089

Get the code for 13,400+ components

Tailwind Component #1090

Get the code for 13,400+ components

Tailwind Component #1091

Get the code for 13,400+ components

Tailwind Component #1092

Get the code for 13,400+ components

Tailwind Component #1093

Get the code for 13,400+ components

Tailwind Component #1094

Get the code for 13,400+ components

Tailwind Component #1095

Get the code for 13,400+ components

Tailwind Component #1096

Get the code for 13,400+ components

Tailwind Component #1097

Get the code for 13,400+ components

Tailwind Component #1098

Get the code for 13,400+ components

Tailwind Component #1099

Get the code for 13,400+ components

Tailwind Component #1100

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support