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

Tailwind CSS

Zospace

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

Subscribe Now Newsletter Card with Benefits Panel

A dark-background newsletter signup section featuring a purple rounded card with a "Subscribe now" heading, a pill-shaped email input with a black Subscribe button, and a separate dark side panel listing benefits with checkmark icons. The layout places the promotional card and benefits panel side by side.

AI Newsletter Component Generator

Tailwind Component #2882

Tailwind CSS

Zospace

<section class="pt-20 2xl:pt-40 bg-gray-800">
  <div class="container px-4 pb-20 mx-auto">
    <h2 class="lg:mb-32 text-5xl lg:text-6xl 2xl:text-7xl font-bold font-heading text-white text-center">Choose a plan</h2>
    <div class="hidden lg:block max-w-6xl mx-auto">
      <h4 class="inline-block mb-6 text-lg text-blue-400 font-bold">Check of details</h4>
      <p class="max-w-sm text-lg text-gray-200 leading-loose">
        <span>A short message that will</span>
        <span class="text-gray-50 font-medium">bring your customers into...</span>
      </p>
    </div>
  </div>
  <div class="bg-blue-50 pt-20 pb-20 2xl:pb-40">
    <div class="container px-4 mx-auto">
      <div class="max-w-6xl mx-auto">
        <div class="flex flex-wrap -mx-2">
          <div class="hidden lg:block w-full lg:w-1/3 px-2">
            <ul class="text-xl">
              <li class="mb-8">Cloud storage</li>
              <li class="mb-8">Users</li>
              <li class="mb-8">Teams</li>
              <li class="mb-8">Commercial rights</li>
              <li class="mb-8">Projects</li>
            </ul>
          </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

Pricing comparison section with Standard and Premium plans

A pricing section headed "Choose a plan" that compares two subscription tiers side by side in white cards, listing price, cloud storage, team members, commercial rights, projects, and a Buy button for each plan. A feature label column sits to the left, aligned with the card rows.

AI Pricing Component Generator

Tailwind Component #2883

Tailwind CSS

Zospace

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

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

Dark Trusted-by Brand Logo Strip with Heading

A dark-background section with a small blue eyebrow label, a two-line bold heading reading 'Trusted by brands all over the world', and a row of five equal rectangular cards each displaying a company logo (Spotify, a wordmark logo, Slack, Miro, Dropbox). It is a social proof section intended to build trust through recognizable customer brands.

AI Logo clouds Component Generator

Tailwind Component #2884

Tailwind CSS

Zospace

<section class="py-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="relative w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <a href="#">
          <img class="lg:absolute left-0 top-0 lg:-ml-32 2xl:-ml-64 w-full h-64 lg:h-full object-cover" src="https://images.unsplash.com/photo-1517171771326-cbc7f641008a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt="">
        </a>
      </div>
      <div class="w-full lg:w-1/2 px-4 lg:py-12">
        <span class="text-lg text-blue-400 font-bold">New post about</span>
        <a href="#">
          <h2 class="max-w-lg mt-10 mb-14 text-5xl lg:text-6xl font-bold font-heading text-white">We are Zospace. Founded in London</h2>
        </a>
        <div class="inline-flex items-center">
          <img class="mr-8 w-20 lg:w-24 h-20 lg:h-24 rounded-full" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="">
          <div class="text-left">
            <h4 class="mb-1 text-2xl font-bold text-gray-50">Harry Douglas</h4>
            <p class="text-white">20 april, 8:30 am</p>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 lg:py-12">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Blog Post Feature Section with Alternating Image Layout

A dark-themed section showing two alternating blog post previews, each pairing a category label, a bold heading, and an author avatar with date beside a large photo. The layout alternates image and text sides to present featured articles.

AI Content Component Generator

Tailwind Component #2885

Tailwind CSS

Zospace

<section class="py-20 2xl:py-40 bg-gray-800" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <h2 class="mb-20 text-5xl font-bold font-heading text-white">Our Team</h2>
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10">
        <div class="flex items-center">
          <img class="h-48 2xl:h-64" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=450" alt="">
          <div class="pl-10">
            <h3 class="mb-4 text-3xl font-bold font-heading text-white">Lea Herrera</h3>
            <p class="mb-10 text-lg text-white font-bold">UX Designer</p>
            <a class="inline-block w-12 h-12" href="#">
              <img class="h-12" src="zospace-assets/logos/twitter.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10">
        <div class="flex items-center">
          <img class="h-48 2xl:h-64" src="https://images.pexels.com/photos/5325885/pexels-photo-5325885.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=450" alt="">
          <div class="pl-10">
            <h3 class="mb-4 text-3xl font-bold font-heading text-white">Maxi Svennson</h3>
            <p class="mb-10 text-lg text-white font-bold">Social Media</p>
            <a class="inline-block w-12 h-12 mr-2" href="#">
              <img class="h-12" src="zospace-assets/logos/instagram.svg" 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

AI Team Component Generator

Tailwind Component #2886

Tailwind CSS

Zospace

<section class="relative pb-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <img class="hidden lg:block absolute z-10 top-0 bottom-0 h-full w-2/6 object-cover" src="https://images.unsplash.com/photo-1618176729090-253077a8f948?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt="">
  <img class="hidden lg:block absolute bottom-0 left-0 h-128 -mb-64 ml-64" src="zospace-assets/lines/circle.svg" alt="">
  <div class="relative w-full lg:w-4/6 ml-auto pl-4 lg:pl-24 pr-4 pt-20">
    <div class="mb-20">
      <span class="text-lg font-bold text-blue-400">Hey! Have any questions?</span>
      <h2 class="mt-8 text-7xl text-white font-bold font-heading">FAQ's</h2>
    </div>
    <div class="max-w-4xl">
      <ul>
        <li class="mb-4 px-4 lg:px-12 py-8 bg-gray-700 rounded-2xl">
          <button class="flex w-full text-left" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
            <div class="w-auto mr-8">
              <span class="flex items-center justify-center w-12 h-12 text-lg font-bold bg-white rounded-full">1</span>
            </div>
            <div class="w-full mt-3">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-white">How should I develop my workflow over time?</h3>
                <span class="ml-4">
                    <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                        <svg class="w-4 h-4" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.0185 0.999999C16.2905 0.732 16.7275 0.732 16.9975 0.999999C17.2675 1.268 17.2685 1.701 16.9975 1.969L9.0895 9.799C8.8195 10.067 8.3825 10.067 8.1105 9.799L0.2025 1.969C-0.0675004 1.701 -0.0675004 1.268 0.2025 1C0.4735 0.732 0.9115 0.732 1.1815 1L8.6005 8.141L16.0185 0.999999Z" fill="#1F40FF"></path>
                        </svg>
                    </span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI FAQ Component Generator

Tailwind Component #2887

Tailwind CSS

Zospace

<section class="relative py-20 2xl:py-40 bg-blue-50 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="mb-12 md:mb-24 lg:ml-32">
      <span class="text-lg text-blue-500 font-bold">What's new at Shuffle</span>
      <h2 class="mt-8 text-6xl lg:text-7xl font-bold font-heading">Latest blog</h2>
    </div>
    <div class="flex flex-wrap lg:flex-nowrap -m-5 items-center">
      <div class="flex-shrink-0 w-full lg:w-1/12 p-5">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="relative z-10 inline-flex w-14 h-14 items-center justify-center bg-blue-500 hover:bg-blue-600 rounded-full">
          <svg class="w-2 h-3" width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.84708 12.1077C7.05097 12.3133 7.05097 12.6436 6.84708 12.8476C6.64319 13.0517 6.31377 13.0525 6.10988 12.8476L0.152917 6.8708C-0.0509739 6.66673 -0.0509738 6.33645 0.152917 6.13087L6.10988 0.154027C6.31377 -0.0500387 6.64319 -0.0500386 6.84708 0.154027C7.05098 0.358848 7.05098 0.689887 6.84708 0.893952L1.4143 6.50121L6.84708 12.1077Z" fill="white"></path>
          </svg>
        </button>
        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="relative z-10 lg:hidden inline-flex ml-6 w-14 h-14 items-center justify-center bg-blue-500 hover:bg-blue-600 rounded-full">
          <svg class="w-2 h-3" width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.152917 0.894235C-0.0509742 0.688658 -0.0509742 0.358375 0.152917 0.15431C0.356808 -0.0497557 0.686228 -0.0505119 0.89012 0.15431L6.84708 6.13116C7.05097 6.33522 7.05097 6.6655 6.84708 6.87108L0.890119 12.8479C0.686227 13.052 0.356807 13.052 0.152916 12.8479C-0.0509753 12.6431 -0.0509753 12.3121 0.152916 12.108L5.5857 6.50074L0.152917 0.894235Z" fill="white"></path>
          </svg>
        </button>
      </div>
      <div class="flex-shrink-0 w-full lg:w-5/6 p-5">
        <div>
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-16">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-16">
                    <div class="flex flex-wrap -m-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 Blog Component Generator

Tailwind Component #2888

Tailwind CSS

Zospace

<section class="relative py-20 2xl:py-40 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="absolute bottom-0 left-0 mb-40 2xl:mb-60 py-px bg-gray-50 w-1/6 md:w-1/3"></div>
  <div class="absolute bottom-0 right-0 mb-40 2xl:mb-60 py-px bg-gray-50 w-1/6 md:w-1/3"></div>
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/6 px-4 text-right">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="hidden lg:inline-flex items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
          <svg width="7" height="14" viewBox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.84708 12.115C7.05097 12.3207 7.05097 12.6512 6.84708 12.8554C6.64319 13.0596 6.31377 13.0603 6.10987 12.8554L0.152917 6.87493C-0.0509739 6.67074 -0.0509738 6.34026 0.152917 6.13456L6.10988 0.154119C6.31377 -0.0500693 6.64319 -0.0500693 6.84708 0.154119C7.05097 0.359063 7.05097 0.690301 6.84708 0.894489L1.4143 6.50512L6.84708 12.115Z" fill="white"></path>
          </svg>
        </button>
        <div class="lg:hidden text-center mb-10">
          <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-flex items-center justify-center w-14 h-14 mx-1 bg-blue-500 hover:bg-blue-600 rounded-full">
            <svg width="7" height="14" viewBox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.84708 12.115C7.05097 12.3207 7.05097 12.6512 6.84708 12.8554C6.64319 13.0596 6.31377 13.0603 6.10987 12.8554L0.152917 6.87493C-0.0509739 6.67074 -0.0509738 6.34026 0.152917 6.13456L6.10988 0.154119C6.31377 -0.0500693 6.64319 -0.0500693 6.84708 0.154119C7.05097 0.359063 7.05097 0.690301 6.84708 0.894489L1.4143 6.50512L6.84708 12.115Z" fill="white"></path>
            </svg>
          </button>
          <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-flex items-center justify-center w-14 h-14 mx-1 bg-blue-500 hover:bg-blue-600 rounded-full">
            <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.15292 0.901511C-0.0509709 0.696057 -0.0509709 0.365972 0.15292 0.16203C0.356811 -0.0419136 0.686232 -0.0426689 0.890123 0.16203L6.84708 6.13528C7.05097 6.33923 7.05097 6.66931 6.84708 6.87476L0.890121 12.848C0.686231 13.052 0.35681 13.052 0.152919 12.848C-0.050972 12.6433 -0.0509719 12.3125 0.152919 12.1085L5.5857 6.50465L0.15292 0.901511Z" fill="white"></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 #2889

Tailwind CSS

Zospace

<section class="py-20 2xl:py-40 bg-gray-800">
  <div class="container px-4 mx-auto">
    <div>
      <div class="flex flex-wrap -mx-6 lg:-mx-14">
        <div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-14 mb-16 lg:mb-0">
          <span class="flex mb-10 justify-center items-center w-20 h-20 bg-blue-500 rounded-lg">
            <svg class="w-8 h-8" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M22.6042 34.9999H2.1875C0.981458 34.9999 0 34.0185 0 32.8124V12.3958C0 11.1897 0.981458 10.2083 2.1875 10.2083H22.6042C23.8102 10.2083 24.7917 11.1897 24.7917 12.3958V32.8124C24.7917 34.0185 23.8102 34.9999 22.6042 34.9999ZM2.1875 11.6666C1.78646 11.6666 1.45833 11.9933 1.45833 12.3958V32.8124C1.45833 33.2149 1.78646 33.5416 2.1875 33.5416H22.6042C23.0052 33.5416 23.3333 33.2149 23.3333 32.8124V12.3958C23.3333 11.9933 23.0052 11.6666 22.6042 11.6666H2.1875Z" fill="white"></path>
                <path d="M34.2702 5.83333C33.8677 5.83333 33.541 5.50667 33.541 5.10417V3.64583C33.541 2.43979 32.5596 1.45833 31.3535 1.45833H29.8952C29.4927 1.45833 29.166 1.13167 29.166 0.729167C29.166 0.326667 29.4927 0 29.8952 0H31.3535C33.3646 0 34.9993 1.63625 34.9993 3.64583V5.10417C34.9993 5.50667 34.6727 5.83333 34.2702 5.83333Z" fill="white"></path>
                <path d="M6.56217 5.83333C6.15967 5.83333 5.83301 5.50667 5.83301 5.10417V3.64583C5.83301 1.63625 7.4678 0 9.47884 0H10.9372C11.3397 0 11.6663 0.326667 11.6663 0.729167C11.6663 1.13167 11.3397 1.45833 10.9372 1.45833H9.47884C8.2728 1.45833 7.29134 2.43979 7.29134 3.64583V5.10417C7.29134 5.50667 6.96467 5.83333 6.56217 5.83333Z" fill="white"></path>
                <path d="M24.0618 1.45833H16.7702C16.3677 1.45833 16.041 1.13167 16.041 0.729167C16.041 0.326667 16.3677 0 16.7702 0H24.0618C24.4643 0 24.791 0.326667 24.791 0.729167C24.791 1.13167 24.4643 1.45833 24.0618 1.45833Z" fill="white"></path>
                <path d="M31.3535 29.1666H29.8952C29.4927 29.1666 29.166 28.8399 29.166 28.4374C29.166 28.0349 29.4927 27.7083 29.8952 27.7083H31.3535C32.5596 27.7083 33.541 26.7268 33.541 25.5208V24.0624C33.541 23.6599 33.8677 23.3333 34.2702 23.3333C34.6727 23.3333 34.9993 23.6599 34.9993 24.0624V25.5208C34.9993 27.5303 33.3646 29.1666 31.3535 29.1666Z" fill="white"></path>
                <path d="M34.2702 18.9583C33.8677 18.9583 33.541 18.6316 33.541 18.2291V10.9374C33.541 10.5349 33.8677 10.2083 34.2702 10.2083C34.6727 10.2083 34.9994 10.5349 34.9994 10.9374V18.2291C34.9994 18.6316 34.6727 18.9583 34.2702 18.9583Z" fill="white"></path>
              </g>
            </svg>
          </span>
          <div class="py-px mb-12 bg-gray-500"></div>
          <h3 class="mt-12 mb-8 text-2xl font-bold font-heading text-white">534</h3>
          <p class="text-lg text-gray-200">The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-14 mb-16 lg:mb-0">
          <span class="flex mb-10 justify-center items-center w-20 h-20 bg-violet-500 rounded-lg">
            <svg class="w-8 h-8" width="35" height="35" viewBox="0 0 35 35" 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 Stats Component Generator

Tailwind Component #2890

Tailwind CSS

Zospace

<section class="py-20 2xl:py-40">
  <div class="container px-4 mx-auto">
    <div>
      <div class="flex flex-wrap -mx-6 lg:-mx-8">
        <div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-8 mb-20 lg:mb-0">
          <span class="flex mb-10 justify-center items-center w-20 h-20 bg-blue-500 rounded-lg">
            <svg class="w-8 h-8" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M22.6042 34.9999H2.1875C0.981458 34.9999 0 34.0185 0 32.8124V12.3958C0 11.1897 0.981458 10.2083 2.1875 10.2083H22.6042C23.8102 10.2083 24.7917 11.1897 24.7917 12.3958V32.8124C24.7917 34.0185 23.8102 34.9999 22.6042 34.9999ZM2.1875 11.6666C1.78646 11.6666 1.45833 11.9933 1.45833 12.3958V32.8124C1.45833 33.2149 1.78646 33.5416 2.1875 33.5416H22.6042C23.0052 33.5416 23.3333 33.2149 23.3333 32.8124V12.3958C23.3333 11.9933 23.0052 11.6666 22.6042 11.6666H2.1875Z" fill="white"></path>
                <path d="M34.2702 5.83333C33.8677 5.83333 33.541 5.50667 33.541 5.10417V3.64583C33.541 2.43979 32.5596 1.45833 31.3535 1.45833H29.8952C29.4927 1.45833 29.166 1.13167 29.166 0.729167C29.166 0.326667 29.4927 0 29.8952 0H31.3535C33.3646 0 34.9993 1.63625 34.9993 3.64583V5.10417C34.9993 5.50667 34.6727 5.83333 34.2702 5.83333Z" fill="white"></path>
                <path d="M6.56217 5.83333C6.15967 5.83333 5.83301 5.50667 5.83301 5.10417V3.64583C5.83301 1.63625 7.4678 0 9.47884 0H10.9372C11.3397 0 11.6663 0.326667 11.6663 0.729167C11.6663 1.13167 11.3397 1.45833 10.9372 1.45833H9.47884C8.2728 1.45833 7.29134 2.43979 7.29134 3.64583V5.10417C7.29134 5.50667 6.96467 5.83333 6.56217 5.83333Z" fill="white"></path>
                <path d="M24.0618 1.45833H16.7702C16.3677 1.45833 16.041 1.13167 16.041 0.729167C16.041 0.326667 16.3677 0 16.7702 0H24.0618C24.4643 0 24.791 0.326667 24.791 0.729167C24.791 1.13167 24.4643 1.45833 24.0618 1.45833Z" fill="white"></path>
                <path d="M31.3535 29.1666H29.8952C29.4927 29.1666 29.166 28.8399 29.166 28.4374C29.166 28.0349 29.4927 27.7083 29.8952 27.7083H31.3535C32.5596 27.7083 33.541 26.7268 33.541 25.5208V24.0624C33.541 23.6599 33.8677 23.3333 34.2702 23.3333C34.6727 23.3333 34.9993 23.6599 34.9993 24.0624V25.5208C34.9993 27.5303 33.3646 29.1666 31.3535 29.1666Z" fill="white"></path>
                <path d="M34.2702 18.9583C33.8677 18.9583 33.541 18.6316 33.541 18.2291V10.9374C33.541 10.5349 33.8677 10.2083 34.2702 10.2083C34.6727 10.2083 34.9994 10.5349 34.9994 10.9374V18.2291C34.9994 18.6316 34.6727 18.9583 34.2702 18.9583Z" fill="white"></path>
              </g>
            </svg>
          </span>
          <div class="pb-px mb-12 bg-gray-50"></div>
          <h3 class="mt-12 mb-8 text-lg font-bold font-heading">Backups</h3>
          <p class="text-lg">The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-8 mb-20 lg:mb-0">
          <span class="flex mb-10 justify-center items-center w-20 h-20 bg-violet-500 rounded-lg">
            <svg class="w-8 h-8" width="35" height="35" viewBox="0 0 35 35" 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 Features Component Generator

Tailwind Component #2891

Tailwind CSS

Zospace

<section class="relative py-20 2xl:py-40 overflow-hidden">
  <div class="absolute top-0 left-0 lg:bottom-0 h-full w-full lg:w-10/12 bg-gray-800 lg:overflow-hidden">
    <img class="hidden lg:block mt-64 ml-112" src="zospace-assets/lines/circle.svg" alt="">
  </div>
  <img class="hidden lg:block absolute h-128 bottom-0 right-0 z-10" src="zospace-assets/images/men-stars.png" alt="">
  <img class="hidden lg:block absolute w-96 bottom-0 right-0 mr-64 mb-24" src="zospace-assets/lines/purple-line.svg" alt="">
  <div class="relative container px-4 lg:py-20 mx-auto">
    <span class="text-lg text-blue-400 font-bold">Do you want to start?</span>
    <h2 class="mt-8 mb-16 text-5xl font-bold font-heading text-white">Register Account!</h2>
    <form action="#">
      <div class="max-w-2xl flex flex-wrap -mx-4 mb-3">
        <div class="w-full md:w-1/2 px-4">
          <div class="flex items-center pl-6 mb-3 bg-white rounded-full">
            <span class="inline-block pr-3 border-r border-gray-50">
              <svg class="w-5 h-5" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.5 21C4.71012 21 0 16.2899 0 10.5C0 4.71012 4.71012 0 10.5 0C16.2899 0 21 4.71012 21 10.5C21 16.2899 16.2899 21 10.5 21ZM10.5 0.875C5.19312 0.875 0.875 5.19312 0.875 10.5C0.875 15.8069 5.19312 20.125 10.5 20.125C15.8069 20.125 20.125 15.8069 20.125 10.5C20.125 5.19312 15.8069 0.875 10.5 0.875Z" fill="black"></path>
                <path d="M8.3125 8.75C8.071 8.75 7.875 8.554 7.875 8.3125C7.875 7.58887 7.28612 7 6.5625 7C5.83887 7 5.25 7.58887 5.25 8.3125C5.25 8.554 5.054 8.75 4.8125 8.75C4.571 8.75 4.375 8.554 4.375 8.3125C4.375 7.10675 5.35588 6.125 6.5625 6.125C7.76912 6.125 8.75 7.10675 8.75 8.3125C8.75 8.554 8.554 8.75 8.3125 8.75Z" fill="black"></path>
                <path d="M16.1875 8.75C15.946 8.75 15.75 8.554 15.75 8.3125C15.75 7.58887 15.1611 7 14.4375 7C13.7139 7 13.125 7.58887 13.125 8.3125C13.125 8.554 12.929 8.75 12.6875 8.75C12.446 8.75 12.25 8.554 12.25 8.3125C12.25 7.10675 13.2309 6.125 14.4375 6.125C15.6441 6.125 16.625 7.10675 16.625 8.3125C16.625 8.554 16.429 8.75 16.1875 8.75Z" fill="black"></path>
                <path d="M10.4997 17.4966C8.70684 17.4966 6.91397 16.8141 5.54984 15.45C5.37922 15.2793 5.37922 15.002 5.54984 14.8313C5.72047 14.6607 5.99784 14.6607 6.16847 14.8313C8.55722 17.2192 12.4422 17.2192 14.831 14.8313C15.0016 14.6607 15.279 14.6607 15.4496 14.8313C15.6202 15.002 15.6202 15.2793 15.4496 15.45C14.0855 16.8141 12.2926 17.4966 10.4997 17.4966Z" fill="black"></path>
              </svg>
            </span>
            <input class="w-full pr-6 pl-4 py-4 font-bold bg-transparent placeholder-gray-900 rounded-r-full" type="text" placeholder="Name">
          </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 Sign in / Sign up Component Generator

Tailwind Component #2892

Tailwind CSS

Zospace

<section class="relative py-20 2xl:py-40">
  <div class="container px-4 mx-auto">
    <div class="mb-20 text-center">
      <span class="text-lg text-blue-500 font-bold">Check of details</span>
      <h2 class="mt-8 text-5xl font-bold font-heading">Summer features</h2>
    </div>
    <div>
      <div class="mb-16 overflow-x-auto overflow-y-hidden">
        <table class="table-auto w-full mb-10">
          <thead class="bg-blue-50">
            <tr class="text-lg text-left font-bold">
              <th class="pl-16 py-5">Feature 1</th>
              <th class="px-4 py-5">
                <div class="flex items-center">
                  <span class="inline-block w-2 h-2 mr-4 rounded-full bg-blue-500"></span>
                  1 Year
                </div>
              </th>
              <th class="px-4 py-5">
                <div class="flex items-center">
                  <span class="inline-block w-2 h-2 mr-4 rounded-full bg-blue-500"></span>
                  2 Year
                </div>
              </th>

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 Tables Component Generator

Tailwind Component #2893

Tailwind CSS

Zospace

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Cookies Component Generator

Tailwind Component #2894

Tailwind CSS

Zospace

<section class="bg-gray-800 py-20 2xl:py-40 overflow-hidden" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto mb-12 lg:mb-28 text-center">
      <span class="text-lg text-blue-400 font-semibold">Our Works</span>
      <h2 class="mt-8 text-5xl text-white font-bold font-heading">More than 20 years in the game</h2>
    </div>
    <div class="flex flex-wrap -mx-5">
      <div class="w-full lg:w-1/3 px-5 pt-10 lg:pt-20 pb-10">
        <ul>
          <li x-ref="tab1" class="pb-5 border-b border-gray-500"><a class="inline-block py-6 px-12 bg-gray-600 font-bold text-white rounded-lg text-lg" :class="{ 'bg-gray-600 font-bold text-white': tab == $refs.tab1.textContent, 'text-gray-300': tab != $refs.tab1.textContent }" x-on:click.prevent="tab = $refs.tab1.textContent" href="#">Abstraction 3D</a></li>
          <li x-ref="tab2" class="py-6 border-b border-gray-500"><a class="inline-block py-6 px-12 text-gray-300 rounded-lg text-lg" href="#" :class="{ 'bg-gray-600 font-bold text-white': tab == $refs.tab2.textContent, 'text-gray-300': tab != $refs.tab2.textContent }" x-on:click.prevent="tab = $refs.tab2.textContent">Commercial</a></li>
          <li x-ref="tab3" class="py-6 border-b border-gray-500"><a class="inline-block py-6 px-12 text-gray-300 rounded-lg text-lg" href="#" :class="{ 'bg-gray-600 font-bold text-white': tab == $refs.tab3.textContent, 'text-gray-300': tab != $refs.tab3.textContent }" x-on:click.prevent="tab = $refs.tab3.textContent">Photography &amp; Film</a></li>
          <li x-ref="tab4" class="pt-5"><a class="inline-block py-6 px-12 text-gray-300 rounded-lg text-lg" :class="{ 'bg-gray-600 font-bold text-white': tab == $refs.tab4.textContent, 'text-gray-300': tab != $refs.tab4.textContent }" x-on:click.prevent="tab = $refs.tab4.textContent" href="#">All projects</a></li>
        </ul>
      </div>
      <div class="w-full lg:w-2/3 px-5">
        <div class="flex flex-wrap -px-4">
          <div class="w-full md:w-1/3 p-4">
            <img class="h-96 w-full object-cover" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
          </div>
          <div class="w-full md:w-2/3 p-4">
            <img class="h-96 object-cover w-full" src="https://images.unsplash.com/photo-1618172193622-ae2d025f4032?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=959&amp;q=80" alt="">
          </div>
          <div class="w-full md:w-2/3 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 Portfolio Component Generator

Tailwind Component #2895

Tailwind CSS

Zospace

<section class="relative py-20 2xl:py-40 bg-gray-800">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <img class="max-w-md mx-auto object-cover" src="zospace-assets/images/zospace_app1.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-xl">
          <a class="inline-block text-2xl font-bold" href="#">
            <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
          </a>
          <h2 class="my-14 text-5xl md:text-7xl font-bold font-heading text-white">Yes! Collaborate everywhere</h2>
          <p class="mb-10 text-xl text-gray-200">In general, dignissim accumsan, lacus vel dictum semper, ipsum justo fermentum ex, sagittis sollicitudin.</p>
          <p class="mb-20 text-xl text-gray-200">This morning, platea dictumst nec nunc. In hac habitasse.</p>
          <a class="inline-block px-12 py-5 bg-blue-500 hover:bg-blue-600 rounded-full text-lg font-bold text-white transition duration-200" href="#">Downolad</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

AI Application Component Generator

Tailwind Component #2896

Tailwind CSS

Zospace

<section class="relative py-20 2xl:py-40 overflow-hidden">
  <img class="hidden md:block absolute top-0 right-0 -mr-96 -mt-112" src="zospace-assets/lines/circle.svg" alt="">
  <img class="absolute top-0 right-0 h-40 lg:h-80 lg:mr-64 lg:mt-24" src="zospace-assets/images/stars-dark.svg" alt="">
  <img class="hidden lg:block absolute top-0 left-0 h-64 -ml-10" src="zospace-assets/images/blue-double-circle.svg" alt="">
  <img class="absolute bottom-0 left-0 h-80" src="zospace-assets/lines/light-double-circle.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <div class="max-w-xl">
        <a class="inline-block text-gray-900 text-xl font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
        </a>
        <h2 class="mt-12 mb-14 text-5xl font-bold font-heading">Sorry, we can't find that page or something has gone wrong...</h2>
        <p class="mb-20 text-xl text-gray-500">Go back or try here:</p>
        <a class="inline-block px-12 py-4 text-lg bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-full transition duration-200" href="#">Start again</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 HTTP codes Component Generator

Tailwind Component #2897

Tailwind CSS

Zospace

<section class="relative pt-20 2xl:pt-40 bg-gray-800">
  <div class="hidden lg:block absolute top-0 right-0 h-full bg-gray-600 w-1/2"></div>
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="relative w-full lg:w-1/2 px-4 pb-20 overflow-hidden">
          <img class="hidden lg:block absolute bottom-0 right-0 w-full h-screen -mr-20 -mb-52" src="zospace-assets/lines/circle.svg" alt="">
          <img class="hidden lg:block absolute bottom-0 right-0 -mr-52 -mb-64" src="zospace-assets/lines/circle.svg" alt="">
          <div class="relative max-w-md">
            <div class="pb-16 mb-8 border-b border-gray-400">
              <span class="text-lg text-blue-400 font-bold">Have a question?</span>
              <h2 class="mt-10 mb-16 text-5xl font-bold font-heading text-white">Contact with us</h2>
              <div class="py-6 px-8 mb-4 bg-gray-600 rounded-lg">
                <div class="flex items-center">
                  <span class="flex items-center justify-center w-12 h-12 mr-8 bg-blue-500 rounded-lg">
                    <svg class="w-4 h-4" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M17.9347 13.3167C17.811 12.6058 17.2022 12.0401 16.4551 11.94L12.3077 11.3855C11.555 11.2832 10.8101 11.6825 10.4984 12.3528C10.4185 12.5237 10.3521 12.7014 10.2981 12.8848C9.13582 12.4 8.09277 11.7004 7.19375 10.8018C6.29473 9.90315 5.59374 8.86053 5.10992 7.6987C5.29332 7.64471 5.4711 7.57835 5.64213 7.4985C6.31274 7.18695 6.70993 6.44351 6.60866 5.69108L6.05394 1.54536C5.9538 0.797426 5.38784 0.188953 4.66434 0.0641091C4.40105 0.0202451 4.18164 0 3.97348 0C2.61201 0 1.32368 0.71982 0.612565 1.87716C-0.157059 3.13122 -0.0501675 4.73507 0.128736 5.9925C0.533802 8.84029 1.99766 11.7038 4.14451 13.8498C5.74002 15.4446 7.71246 16.6402 9.84693 17.306C10.9339 17.6457 12.2942 18 13.605 18C14.5851 18 15.537 17.802 16.3235 17.2498C17.3733 16.5109 18 15.3052 18 14.0196C18 13.8115 17.9797 13.5911 17.9347 13.3167Z" fill="white"></path>
                    </svg>
                  </span>
                  <p class="text-lg font-bold text-white">+44 20457523 00 01</p>
                </div>
              </div>
              <div class="py-6 px-8 mb-4 bg-gray-600 rounded-lg">
                <div class="flex items-center">

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

Tailwind CSS

Zospace

<section class="relative py-20 2xl:py-40 overflow-hidden">
  <img class="lg:absolute bottom-0 left-0 mx-auto h-80 w-112 lg:w-auto lg:h-112 2xl:h-144 object-cover" src="https://images.pexels.com/photos/5325885/pexels-photo-5325885.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=650" alt="">
  <img class="hidden lg:block absolute bottom-0 right-0 h-64 2xl:h-96 object-cover" src="https://images.pexels.com/photos/5325762/pexels-photo-5325762.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=650" alt="">
  <div class="container px-4 mx-auto pt-20">
    <div class="max-w-lg 2xl:max-w-3xl mx-auto text-center">
      <a class="inline-block mx-auto text-gray-900 text-xl font-bold" href="#">
        <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
      </a>
      <h2 class="my-8 text-6xl 2xl:text-7xl font-bold font-heading">Now in season.</h2>
      <p class="mb-14 text-lg text-gray-500">Great experience for everyone.</p>
      <a class="inline-block py-4 px-12 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Say hello!</a>
    </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 #2899

Tailwind CSS

Zospace

<section class="py-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <div class="relative container px-4 mx-auto">
    <img class="hidden lg:block absolute top-0 left-0 -mt-12 -ml-80" src="zospace-assets/lines/circle.svg" alt="">
    <div class="relative max-w-5xl mx-auto">
      <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4 mb-12 lg:mb-0">
          <a class="inline-block text-white text-xl font-bold" href="#">
            <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
          </a>
          <h2 class="mt-16 mb-14 text-6xl lg:text-7xl font-bold font-heading text-white">Join the newsletter!</h2>
          <p class="max-w-xs text-gray-200">In general, dignissim accumsan, lacus vel dictum semper, ipsum justo fermentum ex, sagittis sollicitudin.</p>
        </div>
        <div class="w-full lg:w-1/2 p-4">
          <div class="relative pt-24 px-6 lg:px-16 pb-20 bg-violet-600 rounded-3xl">
            <img class="absolute top-0 right-0 -mt-12 mr-12" src="zospace-assets/images/stars.svg" alt="">
            <div>
              <span class="text-base lg:text-lg text-white font-bold">Join now!</span>
              <h3 class="mt-6 mb-12 text-5xl lg:text-5xl text-white font-bold font-heading">Subscribe now</h3>
              <div class="lg:max-w-md mb-4 flex items-center bg-white rounded-full">
                <span class="inline-block pl-10">
                  <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18.5" cy="18.5" r="9.5" fill="#1F40FF" fill-opacity="0.15"></circle><circle cx="18.5" cy="18.5" r="18.5" fill="#1F40FF" fill-opacity="0.06"></circle><circle cx="18.5" cy="18.5" r="2.5" fill="#282C36"></circle></svg>
                </span>
                <input class="pl-4 py-5 rounded-full placeholder-gray-900 font-bold focus:outline-none" type="email" placeholder="Drop your Email">
              </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 Newsletter Component Generator

Tailwind Component #2900

Tailwind CSS

Zospace

<section class="py-20 2xl:py-40 bg-gray-800">
  <div class="container px-4 mx-auto">
    <div class="mb-16 md:mb-24 text-center">
      <h2 class="mb-8 md:mb-14 text-5xl lg:text-6xl 2xl:text-7xl text-white font-bold font-heading">Choose a plan</h2>
      <p class="text-lg text-gray-200">The quick brown fox jumps over the lazy dog.</p>
    </div>
    <div class="max-w-6xl mx-auto">
      <div class="lg:pl-24 pt-12 lg:pt-24 pb-14 mb-10 bg-gray-900 rounded-xl border-12 border-gray-700">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full lg:w-7/12 px-4 mb-4 lg:mb-0">
            <div class="px-8 lg:pl-0 max-w-xl">
              <div class="flex items-center mb-8">
                <h2 class="mr-16 text-3xl md:text-4xl font-bold font-heading text-white">Beginner</h2>
                <span class="hidden lg:inline-block w-full py-px bg-gray-700"></span>
              </div>
              <p class="mb-6 text-lg text-gray-200">The brown me quam, sagittis porttitor lorem sort lora commodo lorem fringilla nisl.</p>
              <ul class="flex flex-wrap text-left -mx-4 text-white text-base lg:text-lg">
                <li class="w-full lg:w-1/2 px-4 mb-6 flex items-center">
                  <svg class="w-5 h-4 mr-6" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                  <span>Complete files</span>
                </li>
                <li class="w-full lg:w-1/2 px-4 mb-6 flex items-center">

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

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

Get the code for 13,400+ components

Subscribe Now Newsletter Card with Benefits Panel

Tailwind Component #2882

Get the code for 13,400+ components

Pricing comparison section with Standard and Premium plans

Tailwind Component #2883

Get the code for 13,400+ components

Dark Trusted-by Brand Logo Strip with Heading

Tailwind Component #2884

Get the code for 13,400+ components

Dark Blog Post Feature Section with Alternating Image Layout

Tailwind Component #2885

Get the code for 13,400+ components

Tailwind Component #2886

Get the code for 13,400+ components

Tailwind Component #2887

Get the code for 13,400+ components

Tailwind Component #2888

Get the code for 13,400+ components

Tailwind Component #2889

Get the code for 13,400+ components

Tailwind Component #2890

Get the code for 13,400+ components

Tailwind Component #2891

Get the code for 13,400+ components

Tailwind Component #2892

Get the code for 13,400+ components

Tailwind Component #2893

Get the code for 13,400+ components

Tailwind Component #2894

Get the code for 13,400+ components

Tailwind Component #2895

Get the code for 13,400+ components

Tailwind Component #2896

Get the code for 13,400+ components

Tailwind Component #2897

Get the code for 13,400+ components

Tailwind Component #2898

Get the code for 13,400+ components

Tailwind Component #2899

Get the code for 13,400+ components

Tailwind Component #2900

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