Tailwind Components in Casper library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

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

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 right-0 -mt-80 -mr-80 w-148 h-148 bg-gradient-to-t from-violet-700 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="relative max-w-8xl mx-auto py-16 px-8 md:px-16 rounded-3xl overflow-hidden">
      <img class="absolute top-0 left-0 w-full h-full" src="casper-assets/newsletter/bg-gradient.png" alt="">
      <div class="relative">
        <img class="hidden md:block absolute top-0 right-0 mt-24 lg:mt-14 mr-6 lg:mr-40 animate-spinStar" src="casper-assets/newsletter/blink-star.png" alt="">
        <div class="max-w-lg mb-16">
          <h2 class="font-heading text-5xl sm:text-7xl font-medium text-black tracking-tight mb-6">Stay up to Date</h2>
          <p class="text-lg text-gray-900">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
        </div>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
            <div class="flex items-center">
              <img class="block w-18 h-18" src="casper-assets/newsletter/avatar.png" alt="">
              <div class="ml-8">
                <span class="block text-5xl font-medium text-black leading-none">50%</span>
                <span class="block text-lg text-gray-800 leading-none">Nunc et tellus non erat aliquam eget non mi.</span>
              </div>
            </div>
          </div>
          <div class="w-full lg:w-1/2 px-4">
            <div class="max-w-md">
              <span class="block mb-2 text-sm font-medium text-black leading-snug">Email</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

Newsletter generator

Tailwind Component #62

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="hidden md:block absolute top-0 right-0 animate-spinStar z-10" src="casper-assets/services/blink-star.png" alt="">
    <div class="absolute top-0 right-0 -mr-52 -mt-64 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="relative max-w-lg lg:max-w-4xl mx-auto lg:mx-0 mb-32">
      <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl lg:text-7xl font-medium text-white tracking-tight mb-6">Our Services</h2>
      <p class="max-w-xl text-xl text-gray-500 tracking-tight">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
    </div>
    <div class="relative">
      <a class="group block cursor-pointer mb-14 pb-8 border-b-2 border-white border-opacity-10 hover:border-opacity-100 items-center transition duration-300" href="#">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full lg:w-4/12 px-4 mb-8 lg:mb-0">
            <div class="flex items-start">
              <span class="hidden group-hover:inline-block mr-5 font-heading text-4xl font-medium text-sky-900">01</span>
              <h4 class="font-heading text-4xl font-medium text-white group-hover:text-sky-900">
                <span class="block">Personalized</span>
                <span>Experiences</span>
              </h4>
            </div>
          </div>
          <div class="w-full lg:w-6/12 px-4 mb-8 lg:mb-0">
            <div class="relative flex items-center">
              <img class="hidden md:block lg:hidden xl:block absolute top-0 left-0 xl:-mt-14 ml-8 w-32 opacity-0 group-hover:opacity-100 transition duration-300" src="casper-assets/services/axe.png" alt="">
              <p class="max-w-md ml-auto text-right text-white tracking-tight leading-snug">By understanding your visitors' needs, our chat assistant creates a unique experience that keeps them coming back for more unique process.</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

Services generator

Tailwind Component #63

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 left-0 -mt-64 -ml-80 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <div class="absolute top-0 left-0 -mt-112 w-186 h-186 bg-gradient-to-t from-blue-500 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <div class="relative flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-3/5 px-4 mb-20 lg:mb-0">
        <div class="max-w-md lg:max-w-lg mx-auto xl:max-w-2xl">
          <span class="block text-sm font-medium text-sky-900 mb-4">CONTACT US</span>
          <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl xl:text-7xl font-medium text-white tracking-tight mb-24">Have a project? Let’s get connect!</h2>
          <div class="flex mb-12 items-center">
            <div class="flex-shrink-0 flex mr-4 md:mr-8 items-center justify-center w-20 h-20 rounded-full bg-violet-600">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M25.92 17.3333C25.6267 17.3333 25.32 17.24 25.0267 17.1733C24.4327 17.0424 23.8489 16.8686 23.28 16.6533C22.6615 16.4283 21.9815 16.44 21.3711 16.6861C20.7606 16.9323 20.2628 17.3955 19.9733 17.9867L19.68 18.5867C18.3813 17.8642 17.188 16.967 16.1333 15.92C15.0864 14.8654 14.1891 13.672 13.4667 12.3733L14.0267 12C14.6178 11.7106 15.0811 11.2127 15.3272 10.6023C15.5734 9.9918 15.585 9.31188 15.36 8.69333C15.1483 8.12323 14.9746 7.53973 14.84 6.94667C14.7733 6.65333 14.72 6.34667 14.68 6.04C14.5181 5.10083 14.0262 4.25032 13.2928 3.64165C12.5595 3.03298 11.6329 2.70615 10.68 2.72H6.68001C6.10539 2.71461 5.53635 2.83309 5.01163 3.06737C4.4869 3.30166 4.01883 3.64626 3.63925 4.07771C3.25968 4.50916 2.97753 5.01733 2.812 5.56762C2.64647 6.11791 2.60145 6.69741 2.68001 7.26667C3.39033 12.8525 5.94138 18.0425 9.93022 22.0168C13.919 25.9912 19.1183 28.5233 24.7067 29.2133H25.2133C26.1966 29.2148 27.1459 28.854 27.88 28.2C28.3018 27.8227 28.6388 27.3602 28.8686 26.8431C29.0985 26.3259 29.216 25.7659 29.2133 25.2V21.2C29.197 20.2738 28.8598 19.3821 28.2591 18.6769C27.6585 17.9717 26.8318 17.4968 25.92 17.3333ZM26.5867 25.3333C26.5864 25.5226 26.5459 25.7097 26.4677 25.8822C26.3896 26.0546 26.2756 26.2084 26.1333 26.3333C25.9872 26.4665 25.8133 26.5655 25.6242 26.6231C25.4351 26.6808 25.2356 26.6956 25.04 26.6667C20.0465 26.0264 15.4083 23.742 11.857 20.1737C8.30561 16.6055 6.04323 11.9565 5.42668 6.96C5.40546 6.76469 5.42406 6.56711 5.48135 6.37919C5.53864 6.19127 5.63344 6.01692 5.76001 5.86667C5.88496 5.72444 6.03876 5.61046 6.21118 5.53229C6.38361 5.45413 6.5707 5.41357 6.76001 5.41333H10.76C11.0701 5.40644 11.3728 5.50784 11.6162 5.7001C11.8596 5.89235 12.0283 6.16343 12.0933 6.46667C12.1467 6.83111 12.2133 7.19111 12.2933 7.54667C12.4474 8.24953 12.6524 8.94024 12.9067 9.61333L11.04 10.48C10.8804 10.5532 10.7368 10.6573 10.6176 10.7861C10.4983 10.915 10.4056 11.0662 10.3449 11.2309C10.2842 11.3957 10.2566 11.5708 10.2638 11.7463C10.271 11.9218 10.3127 12.0941 10.3867 12.2533C12.3056 16.3637 15.6097 19.6677 19.72 21.5867C20.0446 21.72 20.4087 21.72 20.7333 21.5867C20.8996 21.5272 21.0524 21.4353 21.1829 21.3162C21.3134 21.1972 21.4189 21.0535 21.4933 20.8933L22.32 19.0267C23.0093 19.2732 23.7128 19.478 24.4267 19.64C24.7822 19.72 25.1422 19.7867 25.5067 19.84C25.8099 19.9051 26.081 20.0738 26.2733 20.3171C26.4655 20.5605 26.5669 20.8633 26.56 21.1733L26.5867 25.3333ZM25.3333 13.3333C25.687 13.3333 26.0261 13.1929 26.2762 12.9428C26.5262 12.6928 26.6667 12.3536 26.6667 12V6.66667C26.6667 6.31305 26.5262 5.97391 26.2762 5.72386C26.0261 5.47381 25.687 5.33333 25.3333 5.33333C24.9797 5.33333 24.6406 5.47381 24.3905 5.72386C24.1405 5.97391 24 6.31305 24 6.66667V12C24 12.3536 24.1405 12.6928 24.3905 12.9428C24.6406 13.1929 24.9797 13.3333 25.3333 13.3333ZM20 13.3333C20.3536 13.3333 20.6928 13.1929 20.9428 12.9428C21.1929 12.6928 21.3333 12.3536 21.3333 12V6.66667C21.3333 6.31305 21.1929 5.97391 20.9428 5.72386C20.6928 5.47381 20.3536 5.33333 20 5.33333C19.6464 5.33333 19.3073 5.47381 19.0572 5.72386C18.8072 5.97391 18.6667 6.31305 18.6667 6.66667V12C18.6667 12.3536 18.8072 12.6928 19.0572 12.9428C19.3073 13.1929 19.6464 13.3333 20 13.3333Z" fill="black"></path>
              </svg>
            </div>
            <div>
              <span class="block text-lg tracking-tight text-gray-100">Phone</span>
              <span class="sm:text-2xl tracking-tight text-white">+1 892 3298</span>
            </div>
          </div>
          <div class="flex mb-12 items-center">
            <div class="flex-shrink-0 flex mr-4 md:mr-8 items-center justify-center w-20 h-20 rounded-full bg-yellow-500">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.6666 15.3467H21.8933C22.0688 15.3477 22.2427 15.314 22.4052 15.2477C22.5676 15.1813 22.7154 15.0836 22.84 14.96L28.9466 8.85333C29.0716 8.72938 29.1708 8.58191 29.2385 8.41944C29.3062 8.25696 29.341 8.08268 29.341 7.90667C29.341 7.73065 29.3062 7.55638 29.2385 7.3939C29.1708 7.23142 29.0716 7.08395 28.9466 6.96L25.72 3.73333C25.596 3.60836 25.4485 3.50917 25.2861 3.44148C25.1236 3.37379 24.9493 3.33894 24.7733 3.33894C24.5973 3.33894 24.423 3.37379 24.2605 3.44148C24.098 3.50917 23.9506 3.60836 23.8266 3.73333L17.72 9.84C17.4763 10.0955 17.3382 10.4336 17.3333 10.7867V14.0133C17.3333 14.367 17.4738 14.7061 17.7238 14.9561C17.9739 15.2062 18.313 15.3467 18.6666 15.3467ZM20 11.3467L24.7733 6.57333L26.1066 7.90667L21.3333 12.68H20V11.3467ZM28 14.0133C27.6463 14.0133 27.3072 14.1538 27.0571 14.4039C26.8071 14.6539 26.6666 14.993 26.6666 15.3467V24.68C26.6666 25.0336 26.5262 25.3728 26.2761 25.6228C26.0261 25.8729 25.6869 26.0133 25.3333 26.0133H6.66663C6.313 26.0133 5.97387 25.8729 5.72382 25.6228C5.47377 25.3728 5.33329 25.0336 5.33329 24.68V11.8667L13.1733 19.72C13.5454 20.0969 13.9886 20.3962 14.4773 20.6005C14.9659 20.8047 15.4903 20.9099 16.02 20.9099C16.5496 20.9099 17.074 20.8047 17.5626 20.6005C18.0513 20.3962 18.4945 20.0969 18.8666 19.72C19.1109 19.4708 19.2478 19.1357 19.2478 18.7867C19.2478 18.4377 19.1109 18.1026 18.8666 17.8533C18.7425 17.7263 18.5942 17.6254 18.4304 17.5565C18.2667 17.4877 18.0909 17.4522 17.9133 17.4522C17.7357 17.4522 17.5599 17.4877 17.3961 17.5565C17.2324 17.6254 17.0841 17.7263 16.96 17.8533C16.7107 18.0976 16.3756 18.2345 16.0266 18.2345C15.6776 18.2345 15.3425 18.0976 15.0933 17.8533L7.21329 9.98667H13.3333C13.6869 9.98667 14.0261 9.84619 14.2761 9.59614C14.5262 9.34609 14.6666 9.00696 14.6666 8.65333C14.6666 8.29971 14.5262 7.96057 14.2761 7.71052C14.0261 7.46048 13.6869 7.32 13.3333 7.32H6.66663C5.60576 7.32 4.58834 7.74143 3.8382 8.49157C3.08805 9.24172 2.66663 10.2591 2.66663 11.32V24.6533C2.66663 25.7142 3.08805 26.7316 3.8382 27.4818C4.58834 28.2319 5.60576 28.6533 6.66663 28.6533H25.3333C26.3942 28.6533 27.4116 28.2319 28.1617 27.4818C28.9119 26.7316 29.3333 25.7142 29.3333 24.6533V15.32C29.3333 14.9664 29.1928 14.6272 28.9428 14.3772C28.6927 14.1271 28.3536 13.9867 28 13.9867V14.0133Z" fill="black"></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

Contact generator

Tailwind Component #64

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="relative max-w-sm md:max-w-8xl mx-auto">
      <div class="absolute top-0 left-0 -mt-96 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
      <div class="absolute bottom-0 right-0 w-186 h-186 bg-gradient-to-t from-violet-700 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
      <div class="relative flex flex-wrap items-end -mx-4 mb-12">
        <div class="w-full lg:w-3/5 xl:w-auto px-4 mb-8 lg:mb-0">
          <div>
            <span class="block text-lg text-gray-500 tracking-tight mb-6">Type Caption Here</span>
            <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight">Recent Blog &amp; Articles</h2>
          </div>
        </div>
        <div class="w-full lg:w-2/5 xl:w-auto ml-auto px-4 lg:text-right">
          <a class="group inline-flex w-full md:w-auto h-14 px-7 items-center justify-center text-base font-medium text-black hover:text-violet-800 bg-violet-500 hover:bg-white transition duration-200 rounded-full" href="#">
            <span class="mr-2">SEE OUR PLANS</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="relative flex flex-wrap -mx-4">
        <div class="w-full md:w-1/3 px-4 mb-12 lg:mb-0">
          <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

Blog generator

Tailwind Component #65

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute bottom-0 left-0 ml-20 w-148 h-148 bg-gradient-to-t from-purple-700 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="absolute bottom-0 right-0 mr-20 w-148 h-148 bg-gradient-to-t from-violet-900 via-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="max-w-2xl mx-auto text-center mb-16">
      <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-4">Unlock the true potential of your website</h2>
      <p class="max-w-lg mx-auto text-lg text-gray-500">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="max-w-sm md:max-w-2xl xl:max-w-none mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 xl:w-1/4 h-116 px-4 mb-8 xl:mb-0">
          <div class="relative group h-100 hover:h-116 p-8 rounded-3xl overflow-hidden cursor-default">
            <img class="absolute top-0 left-0 w-full h-full object-cover" src="casper-assets/cta/vertical-bg-place-1.png" alt="">
            <div class="relative flex flex-col h-full items-start">
              <h3 class="text-2xl text-white font-medium mb-4">
                <span class="block">Personalized</span>
                <span>Experiences</span>
              </h3>
              <div class="h-52 overflow-hidden">
                <div class="transform -translate-y-1/2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition duration-500">
                  <p class="text-base text-gray-300">By understanding your visitors' needs, our delivering personaliz recommendations and tailored content based on their preferences and browsing history chat assistant creates a unique experience that keeps them coming back for more.</p>
                </div>
              </div>
              <a class="group inline-flex w-full md:w-auto mt-auto h-14 px-7 items-center justify-center text-base font-medium text-white hover:text-black hover:bg-violet-500 border-2 border-white hover:border-violet-500 transition duration-200 rounded-full" href="#">

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

Call to action generator

Tailwind Component #66

Tailwind CSS

Casper

<section x-data="{ showContent: false }" class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 left-0 ml-52 -mt-40 w-160 h-160 bg-gradient-to-t from-purple-600 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="absolute top-0 left-0 ml-148 -mt-40 w-135 h-135 bg-gradient-to-t from-blue-500 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="max-w-8xl mx-auto">
      <div class="relative flex flex-wrap items-end -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
          <div class="max-w-lg lg:max-w-xl mx-auto lg:mx-0">
            <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-2">Careers at Casper</h2>
            <p class="text-xl text-gray-500 mb-16">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
            <div class="max-w-md">
              <a class="block pb-10 mb-10 border-b border-white border-opacity-20" href="#">
                <div class="xs:flex items-start xs:-mx-4">
                  <div class="xs:px-4 mb-4 xs:mb-0">
                    <h3 class="text-2xl text-white font-medium">Product Designer</h3>
                    <p class="text-sm text-gray-500 mb-2">Excepteur sint occaecat cupidatat non proident.</p>
                    <div class="inline-flex mr-8 items-center">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <span class="ml-2 text-sm font-medium text-white">Ponorogo</span>
                    </div>
                    <div class="inline-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

Careers generator

Tailwind Component #67

Tailwind CSS

Casper

<section x-data="{ mobileNavOpen: false }">
  <nav class="bg-white py-7">
    <div class="container mx-auto px-4">
      <div class="relative flex items-center justify-between">
        <a class="inline-block" href="#">
          <img class="h-10" src="casper-assets/logos/casper-logo.svg" alt="">
        </a>
        <div class="hidden lg:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <div class="group relative inline-flex mr-6 xl:mr-10 items-center justify-center">
            <a class="text-sm font-medium uppercase text-black hover:text-violet-500" href="#">FEATURED</a>
            <div class="hidden group-hover:block absolute top-full left-0 -ml-2 pt-6 px-2 pb-4 min-w-max">
              <div class="relative w-80">
                <div class="absolute top-0 left-0 w-5 h-5 ml-8 -mt-2 transform rotate-45 border-t border-l border-gray-50 bg-white rounded-md"></div>
                <div class="absolute top-0 left-0 w-10 h-2 ml-6 mt-px bg-white"></div>
                <div class="p-4 bg-white rounded-xl border border-gray-50">
                  <div class="mb-3 pb-3 border-b border-blueGray-50"><a class="block p-3 text-sm text-black font-medium uppercase hover:bg-violet-50 rounded-xl" href="#">FEATURED</a><a class="block p-3 text-sm text-black font-medium uppercase hover:bg-violet-50 rounded-xl" href="#">SOLUTIONS</a></div>
                  <div class="mb-6 pb-3 border-b border-blueGray-50">
                    <a class="flex items-center p-3 text-sm text-black font-medium uppercase hover:bg-violet-50 rounded-xl" href="#">
                      <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.90833 11.085C6.83022 11.1625 6.76823 11.2546 6.72592 11.3562C6.68362 11.4577 6.66183 11.5667 6.66183 11.6767C6.66183 11.7867 6.68362 11.8956 6.72592 11.9971C6.76823 12.0987 6.83022 12.1909 6.90833 12.2683L9.40833 14.7683C9.4858 14.8464 9.57797 14.9084 9.67952 14.9507C9.78107 14.993 9.88999 15.0148 10 15.0148C10.11 15.0148 10.2189 14.993 10.3205 14.9507C10.422 14.9084 10.5142 14.8464 10.5917 14.7683L13.0917 12.2683C13.2486 12.1114 13.3367 11.8986 13.3367 11.6767C13.3367 11.4547 13.2486 11.2419 13.0917 11.085C12.9347 10.9281 12.7219 10.8399 12.5 10.8399C12.2781 10.8399 12.0653 10.9281 11.9083 11.085L10.8333 12.1683V2.51C10.8333 2.28899 10.7455 2.07702 10.5893 1.92074C10.433 1.76446 10.221 1.67667 10 1.67667C9.77898 1.67667 9.56702 1.76446 9.41074 1.92074C9.25446 2.07702 9.16666 2.28899 9.16666 2.51V12.1683L8.09166 11.085C8.0142 11.0069 7.92203 10.9449 7.82048 10.9026C7.71893 10.8603 7.61001 10.8385 7.5 10.8385C7.38999 10.8385 7.28107 10.8603 7.17952 10.9026C7.07797 10.9449 6.9858 11.0069 6.90833 11.085ZM15 7.51H13.3333C13.1123 7.51 12.9004 7.5978 12.7441 7.75408C12.5878 7.91036 12.5 8.12232 12.5 8.34333C12.5 8.56434 12.5878 8.77631 12.7441 8.93259C12.9004 9.08887 13.1123 9.17666 13.3333 9.17666H15C15.221 9.17666 15.433 9.26446 15.5893 9.42074C15.7455 9.57702 15.8333 9.78898 15.8333 10.01V15.8433C15.8333 16.0643 15.7455 16.2763 15.5893 16.4326C15.433 16.5889 15.221 16.6767 15 16.6767H5C4.77899 16.6767 4.56702 16.5889 4.41074 16.4326C4.25446 16.2763 4.16667 16.0643 4.16667 15.8433V10.01C4.16667 9.78898 4.25446 9.57702 4.41074 9.42074C4.56702 9.26446 4.77899 9.17666 5 9.17666H6.66667C6.88768 9.17666 7.09964 9.08887 7.25592 8.93259C7.4122 8.77631 7.5 8.56434 7.5 8.34333C7.5 8.12232 7.4122 7.91036 7.25592 7.75408C7.09964 7.5978 6.88768 7.51 6.66667 7.51H5C4.33696 7.51 3.70107 7.77339 3.23223 8.24223C2.76339 8.71107 2.5 9.34696 2.5 10.01V15.8433C2.5 16.5064 2.76339 17.1423 3.23223 17.6111C3.70107 18.0799 4.33696 18.3433 5 18.3433H15C15.663 18.3433 16.2989 18.0799 16.7678 17.6111C17.2366 17.1423 17.5 16.5064 17.5 15.8433V10.01C17.5 9.34696 17.2366 8.71107 16.7678 8.24223C16.2989 7.77339 15.663 7.51 15 7.51Z" fill="#1E2238"></path>
                      </svg>
                      <span class="ml-3">DOWNLOAD</span>
                    </a>
                    <a class="flex items-center p-3 text-sm text-black font-medium uppercase hover:bg-violet-50 rounded-xl" href="#">

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

Navigation (horizontal) generator

Tailwind Component #68

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <img class="hidden sm:block absolute top-0 right-1/2 -mr-64 xl:mr-24 mt-12 h-20 animate-spinStar" src="casper-assets/features/blink-star.png" alt="">
  <img class="hidden sm:block absolute bottom-0 right-0 mb-64 mr-8 h-20 animate-spinStar" src="casper-assets/features/blink-star.png" alt="">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/5 xl:w-1/2 px-4 mb-8 lg:mb-0">
        <img class="block w-full max-w-md xl:max-w-lg" src="casper-assets/features/left-image-robot.png" alt="">
      </div>
      <div class="w-full lg:w-3/5 xl:w-1/2 px-4">
        <div class="relative overflow-hidden">
          <div class="hidden xs:block absolute z-10 top-0 left-0 w-full h-20 lg:h-48 bg-gradient-to-b from-darkBlue-900 via-darkBlue-900 to-transparent opacity-90"></div>
          <div class="hidden xs:block absolute z-10 bottom-0 left-0 w-full h-20 lg:h-48 bg-gradient-to-t from-darkBlue-900 via-darkBlue-900 to-transparent opacity-90"></div>
          <div class="slider">
            <div class="slider-container">
              <div class="slide flex mb-16 items-start">
                <div class="flex-shrink-0 flex mr-8 items-center justify-center w-16 h-16 rounded-full bg-sky-500">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 3V2C2.44772 2 2 2.44772 2 3H3ZM18.293 14.293L17.3818 13.8809C17.2104 14.2601 17.2916 14.7058 17.5859 15.0001L18.293 14.293ZM21 17L21.7071 17.7071C22.0976 17.3166 22.0976 16.6834 21.7071 16.2929L21 17ZM17 21L16.2929 21.7071C16.6834 22.0976 17.3166 22.0976 17.7071 21.7071L17 21ZM14.293 18.293L15.0001 17.5859C14.7058 17.2916 14.2601 17.2104 13.8809 17.3818L14.293 18.293ZM11 2H3V4H11V2ZM20 11C20 6.02944 15.9706 2 11 2V4C14.866 4 18 7.13401 18 11H20ZM19.2041 14.7051C19.7157 13.5738 20 12.3188 20 11H18C18 12.029 17.7786 13.0036 17.3818 13.8809L19.2041 14.7051ZM17.5859 15.0001L20.2929 17.7071L21.7071 16.2929L19.0001 13.5859L17.5859 15.0001ZM20.2929 16.2929L16.2929 20.2929L17.7071 21.7071L21.7071 17.7071L20.2929 16.2929ZM17.7071 20.2929L15.0001 17.5859L13.5859 19.0001L16.2929 21.7071L17.7071 20.2929ZM11 20C12.3188 20 13.5738 19.7157 14.7051 19.2041L13.8809 17.3818C13.0036 17.7786 12.029 18 11 18V20ZM2 11C2 15.9706 6.02944 20 11 20V18C7.13401 18 4 14.866 4 11H2ZM2 3V11H4V3H2Z" fill="white"></path>
                    <ellipse cx="11" cy="11" rx="2" ry="2" transform="rotate(-180 11 11)" fill="white"></ellipse>
                    <path d="M3 3L11 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="max-w-lg">
                  <h4 class="text-3xl font-medium text-white mb-8">Analytics and Insights</h4>

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

Features generator

Tailwind Component #69

Tailwind CSS

Casper

<section class="relative pb-12 xl:pb-0 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full xl:w-2/5 px-4 mb-32 xl:mb-0">
        <div class="relative max-w-xl xl:max-w-md mx-auto xl:mx-0">
          <img class="mb-6 animate-spinStar" src="casper-assets/testimonials/blink-star.png" alt="">
          <div class="relative z-10">
            <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-8">Trusted by more than 100k people</h2>
            <p class="text-xl text-gray-500 leading-relaxed">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
          </div>
        </div>
      </div>
      <div class="relative w-full xl:w-3/5 px-4 overflow-hidden h-186">
        <div class="absolute top-0 left-0 z-10 w-full h-52 bg-gradient-to-b from-darkBlue-900 to-transparent"></div>
        <div class="absolute z-10 bottom-0 left-0 w-full h-52 bg-gradient-to-t from-darkBlue-900 to-transparent"></div>
        <div class="max-w-xl md:max-w-3xl mx-auto xl:mr-0">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full sm:w-1/2 px-4">
              <div class="md:slider-2 h-full">
                <div class="slider-container-2">
                  <div class="md:slide-2 p-6 mb-6 rounded-3xl shadow-box-violet overflow-hidden bg-white bg-opacity-10">
                    <div class="pb-6 mb-6 border-b border-gray-700">
                      <p class="text-white mb-6">Casper has become an invaluable asset to our website. The AI chat assistant not only engages visitors but also collects valuable data and insights.</p>
                      <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

Testimonials generator

Tailwind Component #70

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="absolute top-0 left-0 -ml-60 -mt-96 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 left-0 -ml-60 -mt-96 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <div class="relative">
      <div class="max-w-md mb-12">
        <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl xl:text-7xl font-medium text-white tracking-tight mb-2">Blog Content</h2>
        <p class="text-lg tracking-tight text-gray-600">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
          <div class="max-w-xs">
            <ul>
              <li>
                <a class="group flex py-6 items-center border-b border-dashed border-gray-800" href="#">
                  <span class="hidden group-hover:block mr-2">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5 12H19" stroke="#00BBE4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M12 5L19 12L12 19" stroke="#00BBE4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </span>
                  <span class="text-lg text-white group-hover:text-sky-800 font-medium tracking-tight">Category One</span>
                </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

Content generator

Tailwind Component #71

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="absolute top-0 right-0 -mt-52 mr-64 w-186 h-186 bg-gradient-to-t from-violet-900 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
  <img class="absolute top-0 right-0 h-full -mr-64 lg:-mr-0 z-10" src="casper-assets/about/double-lines-lg-right.svg" alt="">
  <img class="hidden md:block absolute top-1/2 right-0 transform -translate-y-1/2 z-10 h-full w-1/5 sm:w-2/5 object-contain" src="casper-assets/about/robot-lg.png" alt="">
  <div class="relative container mx-auto px-4">
    <div class="relative max-w-lg lg:max-w-2xl mx-auto md:mx-0">
      <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-4">About Us</h2>
      <p class="text-lg text-gray-400 leading-relaxed tracking-tight mb-4">Our Chat AI platform is powered by the latest advancements in natural language processing (NLP) and machine learning, making it capable of engaging in natural and human-like conversations. Say goodbye to clunky interactions and hello to seamless communication that feels just like chatting with a real person.</p>
      <p class="text-lg text-gray-400 leading-relaxed tracking-tight mb-6">Whether you need a chatbot for customer support, sales, lead generation, or any other use case, our platform is versatile enough to cater to your specific requirements. Our APIs and integration capabilities allow for easy deployment across websites, applications, and messaging platforms, providing a consistent experience for your users.</p>
      <a class="inline-flex items-center text-sm font-medium text-violet-500 hover:text-white uppercase" href="#">
        <span class="mr-2">GET TO KNOW US</span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.92 6.62C17.8185 6.37565 17.6243 6.18147 17.38 6.08C17.2598 6.02876 17.1307 6.00158 17 6H7C6.73478 6 6.48043 6.10536 6.29289 6.29289C6.10536 6.48043 6 6.73478 6 7C6 7.26522 6.10536 7.51957 6.29289 7.70711C6.48043 7.89464 6.73478 8 7 8H14.59L6.29 16.29C6.19627 16.383 6.12188 16.4936 6.07111 16.6154C6.02034 16.7373 5.9942 16.868 5.9942 17C5.9942 17.132 6.02034 17.2627 6.07111 17.3846C6.12188 17.5064 6.19627 17.617 6.29 17.71C6.38296 17.8037 6.49356 17.8781 6.61542 17.9289C6.73728 17.9797 6.86799 18.0058 7 18.0058C7.13201 18.0058 7.26272 17.9797 7.38458 17.9289C7.50644 17.8781 7.61704 17.8037 7.71 17.71L16 9.41V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V7C17.9984 6.86932 17.9712 6.74022 17.92 6.62Z" fill="currentColor"></path>
        </svg>
      </a>
      <div class="mt-14">
        <div class="relative flex flex-col sm:flex-row">
          <div class="pb-8 sm:pb-0 sm:pr-8">
            <span class="block text-5xl lg:text-7xl text-white font-medium">300+</span>
            <span class="block text-gray-500 tracking-tight">PRODUCTS</span>
          </div>
          <div class="relative py-8 sm:py-0 sm:px-8">
            <span class="block text-5xl lg:text-7xl text-white font-medium">100+</span>
            <span class="block text-gray-500 tracking-tight">WEB TEMPLATE</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

About generator

Tailwind Component #72

Tailwind CSS

Casper

<section x-data="{ showContent: false }" class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="absolute top-0 left-0 -mt-128 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
  <img class="absolute top-0 right-0 mt-16" src="casper-assets/portfolio/double-lines.svg" alt="">
  <img class="hidden md:block absolute top-0 right-0 mt-8 mr-20 lg:mr-40 animate-spinStar z-10" src="casper-assets/services/blink-star.png" alt="">
  <div class="relative container mx-auto px-4">
    <div class="relative max-w-2xl mx-auto mb-12 text-center">
      <span class="block font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-transparent bg-clip-text bg-gradient-to-br from-violet-500 via-blueGray-800 to-sky-900 tracking-tight">300+</span>
      <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-6">Projects Launched</h2>
      <p class="max-w-xl mx-auto text-xl text-gray-500 leading-relaxed tracking-tight">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
    </div>
  </div>
  <div class="relative mb-16 overflow-hidden">
    <div class="flex items-center px-4 lg:px-0 mb-8">
      <img class="hidden lg:block flex-shrink-0 -ml-20 mr-8 w-128 h-80 rounded-3xl object-cover" src="casper-assets/portfolio/box-horizontal-md-3.png" alt="">
      <div class="relative sm:flex-shrink-0 flex items-end p-6 sm:mr-8 w-full sm:w-128 h-80 rounded-3xl overflow-hidden">
        <img class="absolute top-0 left-0 w-full h-full object-cover" src="casper-assets/portfolio/box-horizontal-md-2.png" alt="">
        <a class="relative group block w-full p-6 rounded-3xl overflow-hidden" href="#">
          <div class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-40 group-hover:bg-opacity-50 rounded-3xl backdrop-filter backdrop-blur-md transition duration-75"></div>
          <div class="relative flex items-center justify-between">
            <div class="max-w-xs">
              <h4 class="text-3xl text-white font-medium mb-2">coca.co.id</h4>
              <p class="text-sm text-white">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </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

Portfolio generator

Tailwind Component #73

Tailwind CSS

Casper

<section class="fixed bottom-0 left-0 right-0 h-112 bg-body overflow-hidden">
  <div class="absolute bottom-0 left-0 -mb-20 w-160 h-160 bg-gradient-to-t from-purple-700 to-darkBlue-900 rounded-full filter blur-4xl"></div>
  <div class="absolute top-0 left-0 p-6 md:p-10 w-full z-50">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center relative p-8 md:p-12 -mx-4 rounded-3xl shadow-box-violet overflow-hidden bg-white bg-opacity-10">
        <div class="w-full md:w-1/2 lg:w-3/5 px-4 mb-6 md:mb-0">
          <p class="max-w-2xl text-gray-500">By clicking "Accept all cookies" you consent to cookies being stored on your device to improve website navigation, analyze website usage and assist with our marketing efforts. View our Personal Data Policy for more information.</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-2/5 px-4">
          <div class="flex flex-col xs:flex-row sm:items-center md:justify-end"><a class="inline-flex items-center justify-center h-11 mb-4 xs:mb-0 xs:mr-4 py-3 px-4 text-sm font-medium text-gray-300 hover:text-white border-2 border-gray-300 hover:border-white rounded-full transition duration-100" href="#">Decline</a><a class="inline-flex items-center justify-center h-11 py-3 px-5 text-sm font-medium text-black hover:text-white bg-white hover:bg-black rounded-full transition duration-200" href="#">Accept all cookies</a></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

Cookies generator

Tailwind Component #74

Tailwind CSS

Casper

<section class="relative py-12 sm:pt-24 bg-body overflow-hidden">
  <div class="absolute top-0 right-0 -mt-112 -mr-52 w-186 h-186 bg-gradient-to-t from-violet-700 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
  <img class="absolute top-0 left-1/2 mt-16 sm:ml-20 md:ml-0 animate-spinStar" src="casper-assets/footer/blink-star.png" alt="">
  <img class="hidden md:block absolute top-0 right-0 w-32 lg:w-auto mr-20 mt-20" src="casper-assets/footer/axe.png" alt="">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap items-end -mx-4 mb-16">
      <div class="w-full md:w-2/5 px-4 mb-12">
        <div class="max-w-sm">
          <a class="inline-block mb-16" href="#">
            <img class="block" src="casper-assets/footer/logo-c-only.svg" alt="">
          </a>
          <h3 class="text-3xl font-medium text-white mb-3">Subscribe to our newsletter</h3>
          <div>
            <span class="block mb-1 text-white text-sm font-medium">Email</span>
            <div class="inline-flex items-center h-12 py-2 pl-3 pr-2 rounded-full bg-gray-800">
              <span>
                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 4.5H5C4.20435 4.5 3.44129 4.81607 2.87868 5.37868C2.31607 5.94129 2 6.70435 2 7.5V17.5C2 18.2956 2.31607 19.0587 2.87868 19.6213C3.44129 20.1839 4.20435 20.5 5 20.5H19C19.7956 20.5 20.5587 20.1839 21.1213 19.6213C21.6839 19.0587 22 18.2956 22 17.5V7.5C22 6.70435 21.6839 5.94129 21.1213 5.37868C20.5587 4.81607 19.7956 4.5 19 4.5ZM18.59 6.5L12.71 12.38C12.617 12.4737 12.5064 12.5481 12.3846 12.5989C12.2627 12.6497 12.132 12.6758 12 12.6758C11.868 12.6758 11.7373 12.6497 11.6154 12.5989C11.4936 12.5481 11.383 12.4737 11.29 12.38L5.41 6.5H18.59ZM20 17.5C20 17.7652 19.8946 18.0196 19.7071 18.2071C19.5196 18.3946 19.2652 18.5 19 18.5H5C4.73478 18.5 4.48043 18.3946 4.29289 18.2071C4.10536 18.0196 4 17.7652 4 17.5V7.91L9.88 13.79C10.4425 14.3518 11.205 14.6674 12 14.6674C12.795 14.6674 13.5575 14.3518 14.12 13.79L20 7.91V17.5Z" fill="#80818C"></path>
                </svg>
              </span>
              <input class="px-2 text-sm placeholder-gray-600 text-gray-200 bg-transparent outline-none" type="email" placeholder="pat@shuffle.dev">
              <button class="flex items-center justify-center w-9 h-9 rounded-full text-black hover:text-violet-700 bg-violet-500 hover:bg-white" type="submit">
                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.4333 11.0167C17.3937 10.9144 17.3342 10.8209 17.2583 10.7417L14.7583 8.24167C14.6014 8.08475 14.3886 7.99659 14.1667 7.99659C13.9447 7.99659 13.7319 8.08475 13.575 8.24167C13.4181 8.39859 13.3299 8.61142 13.3299 8.83333C13.3299 9.05525 13.4181 9.26808 13.575 9.425L14.6583 10.5H6.66666C6.44564 10.5 6.23368 10.4122 6.0774 10.2559C5.92112 10.0996 5.83332 9.88768 5.83332 9.66667V6.33333C5.83332 6.11232 5.74553 5.90036 5.58925 5.74408C5.43297 5.5878 5.221 5.5 4.99999 5.5C4.77898 5.5 4.56701 5.5878 4.41073 5.74408C4.25445 5.90036 4.16666 6.11232 4.16666 6.33333V9.66667C4.16666 10.3297 4.43005 10.9656 4.89889 11.4344C5.36773 11.9033 6.00362 12.1667 6.66666 12.1667H14.6583L13.575 13.2417C13.4969 13.3191 13.4349 13.4113 13.3926 13.5129C13.3503 13.6144 13.3285 13.7233 13.3285 13.8333C13.3285 13.9433 13.3503 14.0523 13.3926 14.1538C13.4349 14.2554 13.4969 14.3475 13.575 14.425C13.6525 14.5031 13.7446 14.5651 13.8462 14.6074C13.9477 14.6497 14.0566 14.6715 14.1667 14.6715C14.2767 14.6715 14.3856 14.6497 14.4871 14.6074C14.5887 14.5651 14.6809 14.5031 14.7583 14.425L17.2583 11.925C17.3342 11.8457 17.3937 11.7523 17.4333 11.65C17.5167 11.4471 17.5167 11.2196 17.4333 11.0167Z" fill="currentColor"></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

Footers generator

Tailwind Component #75

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="hidden md:block absolute top-0 right-0 w-32 lg:w-auto mt-24 xl:mt-0 -mr-8 lg:-mr-24 xl:-mr-0 z-10 animate-movePlant" src="casper-assets/faq/shield-robot.png" alt="">
    <img class="hidden md:block absolute top-0 left-0 w-40 lg:w-auto -ml-8 lg:-ml-18 xl:-ml-0 lg:mt-96 z-10 animate-movePlanet" src="casper-assets/faq/robot-ball.png" alt="">
    <div class="absolute top-0 left-0 -ml-40 -mt-80 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <div class="absolute bottom-0 right-0 mb-52 w-160 h-160 bg-gradient-to-t from-violet-900 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <div class="relative text-center mb-14">
      <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-8">Frequently Ask Questions</h2>
      <p class="text-lg text-gray-500 tracking-tight">Nunc et tellus non erat accumsan aliquam eget non mi.</p>
    </div>
    <div class="relative max-w-2xl xl:max-w-4xl mx-auto">
      <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="group block w-full p-8 mb-6 text-left bg-white bg-opacity-10 rounded-3xl">
        <div class="flex items-start justify-between">
          <div class="pr-4">
            <h4 class="text-xl text-white group-hover:text-violet-500 tracking-tight font-medium">Do you provide a complete design style?</h4>
            <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
              <p class="max-w-xl mt-5 text-lg tracking-tight text-gray-400">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
            </div>
          </div>
          <div>
            <span x-show="accordion === true">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.8333 9.16663H4.16668C3.94566 9.16663 3.7337 9.25442 3.57742 9.4107C3.42114 9.56698 3.33334 9.77895 3.33334 9.99996C3.33334 10.221 3.42114 10.4329 3.57742 10.5892C3.7337 10.7455 3.94566 10.8333 4.16668 10.8333H15.8333C16.0544 10.8333 16.2663 10.7455 16.4226 10.5892C16.5789 10.4329 16.6667 10.221 16.6667 9.99996C16.6667 9.77895 16.5789 9.56698 16.4226 9.4107C16.2663 9.25442 16.0544 9.16663 15.8333 9.16663Z" fill="#B680ED"></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

FAQ generator

Tailwind Component #76

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="hidden md:block absolute top-0 right-0 lg:left-1/2 -ml-20 xl:-ml-32 -mt-24 z-10 animate-spinStar" src="casper-assets/logo-clouds/blink-star.png" alt="">
    <div class="absolute top-0 right-0 -mt-72 -mr-40 w-148 h-148 bg-gradient-to-t from-purple-600 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="relative max-w-xl mx-auto lg:max-w-none">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 order-last lg:order-first">
          <div class="max-w-md">
            <div class="flex flex-wrap -mx-4 -mb-12">
              <div class="w-full xs:w-1/2 px-4 mb-12">
                <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons5.svg" alt="">
              </div>
              <div class="w-full xs:w-1/2 px-4 mb-12">
                <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons4.svg" alt="">
              </div>
              <div class="w-full xs:w-1/2 px-4 mb-12">
                <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons3.svg" alt="">
              </div>
              <div class="w-full xs:w-1/2 px-4 mb-12">
                <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons2.svg" alt="">
              </div>
              <div class="w-full xs:w-1/2 px-4 mb-12">
                <img class="block mx-auto" src="casper-assets/logo-clouds/logo-icons1.svg" alt="">
              </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Logo clouds generator

Tailwind Component #77

Tailwind CSS

Casper

<section class="relative py-12 sm:pt-24 lg:pt-32 bg-body overflow-hidden">
  <img class="hidden xs:block absolute top-0 left-1/2 ml-40 sm:ml-64 lg:ml-0 mt-16 animate-spinStar z-10" src="casper-assets/sign-in/blink.png" alt="">
  <img class="absolute top-0 right-0 pt-16" src="casper-assets/sign-in/double-lines-circle.svg" alt="">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="relative w-full lg:w-1/2 px-4">
        <div class="absolute top-0 left-0 mt-20 w-148 h-148 bg-gradient-to-t from-purple-700 to-darkBlue-900 rounded-full filter blur-4xl"></div>
        <div class="relative max-w-xl">
          <h2 class="font-heading text-5xl sm:text-7xl font-medium text-white tracking-tight mb-6">Sign in to your account</h2>
          <p class="text-xl text-gray-400">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
          <img src="casper-assets/sign-in/chip-sm.png" alt="">
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-md mx-auto">
          <form action="">
            <div class="flex flex-col md:flex-row mb-6 items-center">
              <a class="inline-flex w-full h-12 mb-4 md:mb-0 md:mr-3 px-4 items-center justify-center text-sm font-medium text-gray-400 hover:text-gray-300 border border-gray-800 hover:border-gray-700 rounded-full" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.12 5.32H17V2.14C16.0897 2.04535 15.1751 1.99862 14.26 2C11.54 2 9.67999 3.66 9.67999 6.7V9.32H6.60999V12.88H9.67999V22H13.36V12.88H16.42L16.88 9.32H13.36V7.05C13.36 6 13.64 5.32 15.12 5.32Z" fill="white"></path>
                </svg>
                <span class="ml-2">Login with Facebook</span>
              </a>
              <a class="inline-flex w-full h-12 px-4 items-center justify-center text-sm font-medium text-gray-400 hover:text-gray-300 border border-gray-800 hover:border-gray-700 rounded-full" href="#">

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

Tailwind Component #78

Tailwind CSS

Casper

<section x-data="{ showContent: false }" class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 left-0 ml-40 w-160 h-160 bg-gradient-to-t from-purple-700 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="absolute top-0 right-0 mr-40 w-160 h-160 bg-gradient-to-t from-violet-900 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="relative max-w-md md:max-w-none mx-auto">
      <div class="flex flex-wrap items-center -mx-4 mb-16">
        <div class="relative w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <img class="hidden md:block absolute top-0 right-0 -mt-20 animate-spinStar" src="casper-assets/team/blink-star.png" alt="">
          <div class="relative max-w-2xl">
            <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight">
              <span>Get to know our amazing</span>
              <span class="text-sky-900">Team</span>
            </h2>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 lg:text-right">
          <a x-show="!showContent" x-on:click.prevent="showContent = true" class="group inline-flex w-full md:w-auto h-14 px-7 items-center justify-center text-base font-medium text-white hover:text-violet-500 bg-transparent hover:bg-white border-2 border-white transition duration-200 rounded-full" href="#">
            <span class="mr-2">SHOW ALL PEOPLE</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg>
          </a>
        </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

Team generator

Tailwind Component #79

Tailwind CSS

Casper

<section class="relative bg-body overflow-hidden">
  <div class="relative container mx-auto px-4 pt-24 pb-52 md:py-32 lg:py-52">
    <img class="absolute top-0 right-0 h-full" src="casper-assets/http-code/double-line-circle.svg" alt="">
    <div class="absolute top-0 left-0 -mt-112 -ml-40 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <img class="absolute bottom-0 md:top-0 md:mt-52 lg:mt-40 xl:mt-20 right-0 md:-mr-8 lg:mr-0 w-52 md:w-80 lg:w-128 xl:w-auto animate-movePlant" src="casper-assets/http-code/planet-star.png" alt="">
    <img class="hidden md:block absolute top-0 right-0 mt-4 lg:mt-12 mr-52 animate-spinStar" src="casper-assets/http-code/blink-star.png" alt="">
    <div class="relative max-w-7xl mx-auto">
      <h2 class="max-w-2xl font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-6">Currently Updating- Back soon!</h2>
      <p class="max-w-md text-xl text-gray-400 mb-6">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
      <a class="group inline-flex w-full sm:w-auto h-14 px-7 items-center justify-center text-base font-medium text-black hover:text-violet-800 bg-violet-500 hover:bg-white transition duration-200 rounded-full" href="#">TAKE ME HOME</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

HTTP codes generator

Tailwind Component #80

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="relative z-10 w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <div class="max-w-md xl:max-w-xl mx-auto">
          <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-3">Stunning UI Library for Start Up</h2>
          <p class="max-w-sm xl:max-w-md text-lg text-gray-500 mb-16">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
          <a class="inline-flex h-14 py-2 px-7 mb-5 items-center justify-center text-base font-medium uppercase text-black hover:text-white bg-violet-500 hover:bg-violet-600 transition duration-200 rounded-full" href="#">
            <span class="mr-2">LOGIN NOW</span>
            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.4199 6.62C18.3185 6.37565 18.1243 6.18147 17.8799 6.08C17.7597 6.02876 17.6306 6.00158 17.4999 6H7.49994C7.23472 6 6.98037 6.10536 6.79283 6.29289C6.6053 6.48043 6.49994 6.73478 6.49994 7C6.49994 7.26522 6.6053 7.51957 6.79283 7.70711C6.98037 7.89464 7.23472 8 7.49994 8H15.0899L6.78994 16.29C6.69621 16.383 6.62182 16.4936 6.57105 16.6154C6.52028 16.7373 6.49414 16.868 6.49414 17C6.49414 17.132 6.52028 17.2627 6.57105 17.3846C6.62182 17.5064 6.69621 17.617 6.78994 17.71C6.8829 17.8037 6.9935 17.8781 7.11536 17.9289C7.23722 17.9797 7.36793 18.0058 7.49994 18.0058C7.63195 18.0058 7.76266 17.9797 7.88452 17.9289C8.00638 17.8781 8.11698 17.8037 8.20994 17.71L16.4999 9.41V17C16.4999 17.2652 16.6053 17.5196 16.7928 17.7071C16.9804 17.8946 17.2347 18 17.4999 18C17.7652 18 18.0195 17.8946 18.207 17.7071C18.3946 17.5196 18.4999 17.2652 18.4999 17V7C18.4984 6.86932 18.4712 6.74022 18.4199 6.62Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="relative w-full lg:w-1/2 px-4">
        <div class="absolute top-0 right-0 -mt-40 -mr-20 w-148 h-148 bg-gradient-to-t from-blue-500 to-darkBlue-900 rounded-full filter blur-4xl"></div>
        <div class="absolute top-0 right-0 -mt-40 mr-60 w-148 h-148 bg-gradient-to-t from-purple-600 to-darkBlue-900 rounded-full filter blur-4xl"></div>
        <div class="relative max-w-md lg:max-w-lg xl:max-w-lg mx-auto lg:mr-0">
          <div class="flex flex-wrap -mx-4 -mb-20">
            <div class="w-full sm:w-1/2 px-4 mb-20">
              <div>
                <span class="block text-gray-500 tracking-tight">Purchase</span>
                <span class="block text-4xl sm:text-5xl font-semibold text-white">$150M</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

Stats 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

Tailwind CSS Components – Casper Library

Framework

UI Library

Components

Tailwind Component #61

Get the code for 13,400+ components

Tailwind Component #62

Get the code for 13,400+ components

Tailwind Component #63

Get the code for 13,400+ components

Tailwind Component #64

Get the code for 13,400+ components

Tailwind Component #65

Get the code for 13,400+ components

Tailwind Component #66

Get the code for 13,400+ components

Tailwind Component #67

Get the code for 13,400+ components

Tailwind Component #68

Get the code for 13,400+ components

Tailwind Component #69

Get the code for 13,400+ components

Tailwind Component #70

Get the code for 13,400+ components

Tailwind Component #71

Get the code for 13,400+ components

Tailwind Component #72

Get the code for 13,400+ components

Tailwind Component #73

Get the code for 13,400+ components

Tailwind Component #74

Get the code for 13,400+ components

Tailwind Component #75

Get the code for 13,400+ components

Tailwind Component #76

Get the code for 13,400+ components

Tailwind Component #77

Get the code for 13,400+ components

Tailwind Component #78

Get the code for 13,400+ components

Tailwind Component #79

Get the code for 13,400+ components

Tailwind Component #80

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