Tailwind CSS Components

<section class="relative pt-20 md:pt-32 pb-20 bg-blue-800 overflow-x-hidden">
  <img class="absolute top-0 left-0 w-full max-h-32" src="yofte-assets/elements/line-content.svg" alt="">
  <div class="container mx-auto px-4">
    <span class="text-white font-bold font-heading">Online shopping</span>
    <h2 class="mt-4 mb-16 text-6xl md:text-7xl font-bold font-heading text-white">How to improve online store?</h2>
    <div class="relative h-96 -mx-6 mb-20">
      <div class="absolute top-1/2 transform -translate-y-1/2 left-0 right-0 h-80 w-full bg-blue-300"></div>
      <img class="relative w-full h-96 px-6 object-cover" src="yofte-assets/images/placeholder-banner.png" alt="">
    </div>
    <div class="max-w-3xl mx-auto">
      <h3 class="mb-12 text-3xl text-white">This morning, platea dictumst nec nunc. In hac habitasse, general, dignissim accumsan just. Suspendisse vitae ligula convallis, porta tortor et, finibus neque.</h3>
      <p class="mb-10 text-xl text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat nisl quis justo egestas, nec eleifend erat egestas. Curabitur purus neque, tincidunt ac malesuada nec, ornare non odio. Nulla nec lorem sed purus semper porta vel sit amet sem. Nunc placerat non turpis eu molestie. Nam consectetur lacus ut lacus elementum dapibus. Etiam vehicula ipsum ac dolor tristique placerat. In hac habitasse platea dictumst.</p>
      <p class="text-xl text-gray-400">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam venenatis est quis venenatis dignissim. Maecenas a sem eros. Quisque hendrerit vitae libero non porta. Maecenas quis sem et nulla pellentesque accumsan. Proin blandit bibendum orci, a aliquam augue sagittis sed. Quisque pharetra ut quam eget varius. Morbi nisi nunc, ultricies id ligula id, feugiat eleifend est. Etiam metus sem, ornare vitae porta vel, porta a mauris. Fusce dapibus egestas lorem eu tincidunt. Quisque lobortis placerat placerat. Donec eget lectus blandit ex pellentesque iaculis. Proin aliquam vulputate arcu et blandit. Duis sed lobortis mauris, vel porttitor lectus. Pellentesque vel ultrices odio.</p>
    </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

Dark Blog Article Header with Hero Image and Body Text

A dark-background editorial article layout with a small eyebrow label, large bold heading, a wide photo banner with blue accent bars, and a centered text column with a lead paragraph and body copy. It reads as a blog or content post rather than a product marketing section.

AI Content Component Generator

Tailwind Component #4182

<section class="relative overflow-x-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center">
      <div class="w-full md:w-1/2 lg:w-2/5 md:h-128 md:pr-8 mb-20 md:mb-0">
        <div class="pt-20 max-w-md">
          <span class="mb-4 text-2xl">More ideas</span>
          <h2 class="mt-6 mb-16 lg:mb-32 text-5xl font-bold font-heading">Featured styles. Check it now.</h2>
          <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase transition duration-200" href="#">More</a>
        </div>
      </div>
      <div class="w-full h-64 md:h-128 md:w-1/2 lg:w-3/5">
        <img class="h-full w-full md:w-auto max-w-none object-cover" src="yofte-assets/images/placeholder-marta-wave.png" alt="">
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Split-screen hero with featured styles heading and MORE button

A split-screen promotional hero with a left text column containing a small eyebrow label, bold two-line heading 'Featured styles. Check it now.', and an orange MORE call-to-action button, paired with a large photograph of a woman with a lavender background and a teal balloon on the right.

AI Banners Component Generator

Tailwind Component #4183

<section class="bg-gray-100 pb-20">
  <div class="py-10 bg-gray-100">
    <div class="container mx-auto px-4">
      <a class="text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
    </div>
  </div>
  <div class="relative py-20 md:py-32 bg-gray-50" style="background-image: url('yofte-assets/elements/lines-color2.svg'); background-size: cover;" alt="">
    <div class="container mx-auto px-4">
      <div class="max-w-md">
        <h2 class="mb-8 text-4xl md:text-5xl font-bold font-heading bg-gray-50">Sorry, we can’t find that page or something has gone wrong</h2>
        <p class="mb-8 md:mb-16 text-lg">Checkout for any URL misspelling.</p>
        <a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Homepage</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

404 Error Page with Yofte Logo and Decorative Arcs

A minimal not-found error page with a small Yofte logo at top, a large bold heading stating the page could not be found, a short line of supporting text, and an orange HOMEPAGE call-to-action button. Decorative curved purple, blue, and orange arcs frame the left and top of a light background.

AI HTTP codes Component Generator

Tailwind Component #4184

<section class="bg-gray-100">
  <div class="flex flex-wrap">
    <div class="w-full md:w-5/12 lg:w-3/12 py-20 px-6 bg-white">
      <div class="max-w-xs mx-auto">
        <a class="inline-block mb-12 text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <div class="mb-12 font-semibold font-heading">
          <p>Our Store</p>
          <p>Nørremark 51, 8700 Horsens</p>
          <p>Denmark</p>
        </div>
        <div class="flex mb-16 md:mb-40">
          <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-blue-500 rounded-full" href="#">
            <img src="yofte-assets/buttons/facebook-circle.svg" alt="">
          </a>
          <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-indigo-300 rounded-full" href="#">
            <img src="yofte-assets/buttons/instagram-circle.svg" alt="">
          </a>
          <a class="inline-flex items-center justify-center w-12 h-12 bg-blue-300 rounded-full" href="#">
            <img src="yofte-assets/buttons/twitter-circle.svg" alt="">
          </a>
        </div>
        <div class="flex flex-wrap">

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

E-commerce site footer with brand sidebar, link columns, and contact details

A two-part website footer with a left panel showing the Yofte logo, store address, social icons, and payment method badges, and a right panel with category pills, three link columns (Information, Customer Service, Contact Us), and a copyright line. The layout places navigation links in a multi-column grid beside a sidebar.

AI Footers Component Generator

Tailwind Component #4185

<div class="fixed bottom-0 right-0 z-50 p-8" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="relative flex flex-wrap items-end pl-12 pr-8 py-6 bg-white">
    <div class="absolute top-0 -mt-2 w-6 h-6 bg-white transform rotate-45"></div>
    <div class="max-w-md pr-2">
      <h5 class="mb-2 text-xl font-bold font-heading">Cookies settings</h5>
      <p class="text-gray-500">By clicking Accept, you agree to the storing of cookies on your device to enhance site navigation...</p>
    </div>
    <div class="mt-6 md:mt-0">
      <a class="inline-flex mr-6 items-center text-blue-500 underline" href="#">
        <span class="mr-2">More</span>
        <svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M26.0871 7.41489L19.3999 14.102L18.564 13.2661L24.2439 7.58625L0.592385 7.59043L0.592385 6.41183L24.2439 6.40765L18.982 1.14571L19.8179 0.309822L26.0871 6.579C26.3179 6.80984 26.3179 7.18406 26.0871 7.41489Z" fill="#3C60D9"></path>
        </svg>
      </a>
      <a x-on:click.prevent="open=false" class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Accept</a>
    </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

Cookie consent banner with Accept action

A horizontal cookie consent notice on a white background with a bold heading, explanatory body text, a 'More' text link with arrow, and a prominent orange ACCEPT button. It informs users about cookie storage and offers a single consent action.

AI Cookies Component Generator

Tailwind Component #4186

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="relative container px-4 mx-auto">
    <div class="relative max-w-4xl mx-auto">
      <div class="absolute inset-0 bg-blue-200 my-24 -ml-4 -mr-4"></div>
      <div class="relative py-16 md:pt-32 md:pb-20 px-4 sm:px-8 bg-white">
        <div class="max-w-lg mx-auto text-center">
          <a class="inline-block mb-14 text-3xl font-bold font-heading" href="#">
            <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
          </a>
          <h3 class="mb-8 text-4xl md:text-5xl font-bold font-heading">Signing up with social is super quick</h3>
          <p class="mb-10 font-semibold font-heading">Please, do not hesitate</p>
          <form action="">
            <input class="w-full mb-4 px-12 py-6 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text" placeholder="steven@example.dev">
            <input class="w-full mb-4 px-12 py-6 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="password" placeholder="Password">
            <input class="w-full mb-10 px-12 py-6 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="password" placeholder="Repeat password">
            <label class="flex" for="">
              <input class="mr-4 mt-1" type="checkbox">
              <span class="text-sm">By singning up, you agree to our Terms, Data Policy and Cookies.</span>
            </label>
            <button class="mt-12 md:mt-16 bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-5 px-8 rounded-md uppercase">JOIN yofte</button>
          </form>
        </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

Centered Sign-Up Form with Email and Password Fields

A centered sign-up card with a logo, heading, supporting line, email and two password inputs, a terms agreement checkbox, and a dark primary submit button. The card sits on a light background with a blue offset accent behind it.

AI Sign in / Sign up Component Generator

Tailwind Component #4187

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">The Latest And The Greatest</h2>
    <div class="flex flex-wrap -mx-3 mb-20">
      <div class="w-full lg:w-1/2 px-3 mb-6 lg:mb-0">
        <div class="relative mb-6 h-64 w-full bg-cover bg-center bg-no-repeat" style="background-image: url('yofte-assets/images/placeholder-snapshot.png');">
          <span class="inline-block mt-4 ml-4 px-2 py-1 text-xs font-bold font-heading border-2 border-red-500 rounded-full text-red-500 bg-white">-10%</span>
          <a class="absolute inset-0 flex items-end" href="#">
            <div class="pl-12 pb-12">
              <h3 class="text-3xl font-bold font-heading text-white">LIFE Bottle 2.0</h3>
              <p class="text-xl text-white font-bold font-heading">
                <span>$10.30</span>
                <span class="text-sm font-normal line-through">11.99</span>
              </p>
            </div>
          </a>
        </div>
        <div class="relative h-64 w-full bg-cover bg-center bg-no-repeat" style="background-image: url('yofte-assets/images/placeholder-playing-tennis.png');">
          <span class="inline-block mt-4 ml-4 px-2 py-1 text-xs font-bold font-heading border-2 border-red-500 rounded-full text-red-500 bg-white">-10%</span>
          <a class="absolute inset-0 flex items-end" href="#">
            <div class="pl-12 pb-12">
              <h3 class="text-3xl font-bold font-heading text-white">Tennis racket Sanks 2</h3>
              <p class="text-xl text-white font-bold font-heading">
                <span>$126.90</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

Tailwind Component #4188

<section class="py-20 bg-gray-100 overflow-x-hidden" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">Latest Blog</h2>
    <div class="flex flex-wrap -mx-3 mb-20">
      <div class="w-full lg:w-1/2 px-3 mb-12 lg:mb-6">
        <div class="relative">
          <div class="hidden md:block absolute z-10 bottom-0 right-0 mr-12 mb-6 lg:mb-12">
            <span class="inline-block mr-4 font-bold font-heading text-blue-300 uppercase">15 May 2021</span>
            <a class="inline-block px-4 md:px-8 py-2 bg-white rounded-md font-bold font-heading text-gray-400 hover:text-orange-300 uppercase tracking-widest" href="#">Summer</a>
          </div>
          <a class="group flex flex-wrap lg:h-80 items-center bg-gray-50" href="#">
            <div class="w-full lg:w-1/3 h-full">
              <img class="h-64 md:h-full w-full object-cover" src="yofte-assets/images/placeholder-surfboard-stands.png" alt="">
            </div>
            <div class="relative w-full lg:w-2/3 lg:h-80">
              <div class="hidden lg:block absolute top-0 left-0 ml-12 w-44 py-px bg-blue-300 group-hover:bg-orange-300"></div>
              <div class="lg:hidden absolute bottom-0 left-0 ml-12 w-44 py-px bg-blue-300 group-hover:bg-orange-300"></div>
              <div class="flex h-full pt-12 md:pt-16 pb-12 md:pb-20 px-6 md:px-12">
                <div class="lg:max-w-xs">
                  <h3 class="text-2xl font-bold font-heading">After curabitur eu laoreet libero eget en vel odio ultricies!</h3>
                  <span class="md:hidden mt-6 inline-block font-bold font-heading text-blue-300 uppercase">15 May 2021</span>
                </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

Latest Blog Card Grid with Show More Button

A two-column grid of blog post cards under a "Latest Blog" heading, each with a left image, colored top rule, bold title, date, and category tag. A coral "Show More" button below the grid loads additional posts.

AI Blog Component Generator

Tailwind Component #4189

<section class="py-20 bg-gray-100 overflow-x-hidden" x-data="{ showContent: false, slideWidth: 0, activeSlide: 0, slideCount: 6 }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">The Latest And The Greatest</h2>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="mb-16 flex transition-transform duration-500 ease-in-out -m-8">
      <div x-ref="slide1" class="flex-shrink-0 max-w-3xl w-full p-8">
        <a class="relative h-full block bg-blue-300" href="#">
          <span class="absolute top-0 left-0 ml-6 mt-6 px-2 py-1 text-xs font-bold font-heading bg-white border-2 border-red-500 rounded-full text-red-500">-15%</span>
          <img class="w-full h-64 object-cover" src="yofte-assets/images/placeholder-snapshot.png" alt="">
          <div class="px-6 pb-16 mt-12">
            <div class="px-6 mb-2">
              <h3 class="mb-3 text-3xl text-white font-bold font-heading">LIFE Bottle 2.0</h3>
              <p class="mb-4 text-xl font-bold font-heading text-white">
                <span>$10.30</span>
                <span class="text-xs text-blue-100 font-semibold font-heading line-through">$11.90</span>
              </p>
              <p class="text-blue-100">Great quality, eco material.</p>
            </div>
          </div>
        </a>
      </div>
      <div x-ref="slide2" class="flex-shrink-0 max-w-3xl w-full p-8">
        <a class="relative h-full block bg-blue-300" href="#">
          <span class="absolute top-0 left-0 ml-6 mt-6 px-2 py-1 text-xs font-bold font-heading bg-white border-2 border-red-500 rounded-full text-red-500">-15%</span>
          <img class="w-full h-64 object-cover" src="yofte-assets/images/placeholder-playing-tennis.png" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #4190

<section class="py-20" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4, tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full px-4">
        <ul class="flex flex-wrap mb-8 items-center">
          <li class="mr-5">
            <a class="inline-block mr-5 text-xs font-bold font-heading uppercase text-gray-300" href="#">HOME</a>
            <span class="inline-block">
              <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.131073 0.755835C-0.0436907 0.581885 -0.0436907 0.302414 0.131073 0.129744C0.305837 -0.0429273 0.588197 -0.0435662 0.76296 0.129744L5.86893 5.18707C6.04369 5.35975 6.04369 5.63922 5.86893 5.81317L0.762959 10.8705C0.588196 11.0432 0.305836 11.0432 0.131072 10.8705C-0.0436916 10.6972 -0.0436916 10.4171 0.131072 10.2444L4.78774 5.4998L0.131073 0.755835Z" fill="#151515"></path>
              </svg>
            </span>
          </li>
          <li class="mr-5">
            <a class="inline-block mr-5 text-xs font-bold font-heading uppercase text-gray-300" href="#">WATER FILTERS</a>
            <span class="inline-block">
              <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.131073 0.755835C-0.0436907 0.581885 -0.0436907 0.302414 0.131073 0.129744C0.305837 -0.0429273 0.588197 -0.0435662 0.76296 0.129744L5.86893 5.18707C6.04369 5.35975 6.04369 5.63922 5.86893 5.81317L0.762959 10.8705C0.588196 11.0432 0.305836 11.0432 0.131072 10.8705C-0.0436916 10.6972 -0.0436916 10.4171 0.131072 10.2444L4.78774 5.4998L0.131073 0.755835Z" fill="#151515"></path>
              </svg>
            </span>
          </li>
          <li><a class="inline-block text-xs font-bold font-heading uppercase text-gray-300" href="#">BRILE WATER FILTER CARAFE</a></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

Tailwind Component #4191

<section class="py-20 bg-gray-100" x-data="{ price: 50, size: 36, color: 1, grid: 3, showContent: false }">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-20 items-center justify-between">
      <div class="w-full lg:w-auto px-4 mb-12 xl:mb-0">
        <h2 class="text-5xl font-bold font-heading">
          <span>Found 125 results for</span>
          <a class="relative text-blue-300 underline" href="#">Sports</a>
        </h2>
      </div>
      <div class="w-full lg:w-auto px-4 flex flex-wrap items-center">
        <div class="w-full sm:w-auto mb-4 sm:mb-0 mr-5">
          <select class="pl-8 py-4 bg-white text-lg border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" name="" id="">
            <option value="1">Sort by newest</option>
            <option value="2">Sort by price</option>
            <option value="3">Sort by most popular</option>
          </select>
        </div>
        <a x-on:click.prevent="grid = 3" class="inline-block mr-3 h-full bg-white hover:bg-white p-4 rounded-md border group" :class="{ 'bg-white': grid == 3, 'text-gray-200': grid !== 3 }" href="#">
            <svg class="text-blue-300 group-hover:text-blue-300" :class="{ 'text-blue-300': grid==3 }" width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="20" width="4" height="4" rx="2" fill="currentColor"></rect></svg>
        </a>
        <a x-on:click.prevent="grid = 4" class="inline-block h-full p-4 border hover:bg-white rounded-md group" :class="{ 'bg-white': grid == 4, 'text-gray-200': grid !== 4 }" href="#">
            <svg class="text-gray-200 group-hover:text-blue-300" :class="{ 'text-blue-300': grid==4 }" width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="24" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="24" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="24" y="20" width="4" height="4" rx="2" fill="currentColor"></rect></svg>
        </a>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #4192

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6 lg:mb-0">
        <div class="relative h-full text-center pt-16 bg-white">
          <img class="hidden md:block absolute z-10 top-0 left-1/2 ml-16 lg:ml-8 mt-16" src="yofte-assets/elements/dots.svg" alt="">
          <div class="pb-12 border-b">
            <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-blue-300 rounded-full">
              <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M34.9845 11.6702C33.7519 10.3368 32 9.60814 30.0543 9.60814H24.9767V6.75543C24.9767 6.2438 24.5581 5.8252 24.0465 5.8252H0.930233C0.418605 5.8252 0 6.2438 0 6.75543V27.2128C0 27.7244 0.418605 28.143 0.930233 28.143H4.63566C4.93798 29.864 6.43411 31.174 8.24031 31.174C10.0465 31.174 11.5426 29.864 11.845 28.143H24.0465H26.0853C26.3876 29.864 27.8837 31.174 29.6899 31.174C31.4961 31.174 32.9922 29.864 33.2946 28.143H36.0698C36.5814 28.143 37 27.7244 37 27.2128V17.6004C36.9922 15.143 36.3023 13.0888 34.9845 11.6702ZM1.86047 7.68566H23.1163V10.5384V26.2903H11.6822C11.1783 24.8795 9.82171 23.864 8.24031 23.864C6.65892 23.864 5.30233 24.8795 4.79845 26.2903H1.86047V7.68566ZM8.24031 29.3136C7.24806 29.3136 6.44186 28.5074 6.44186 27.5151C6.44186 26.5229 7.24806 25.7167 8.24031 25.7167C9.23256 25.7167 10.0388 26.5229 10.0388 27.5151C10.0388 28.5074 9.23256 29.3136 8.24031 29.3136ZM29.6899 29.3136C28.6977 29.3136 27.8915 28.5074 27.8915 27.5151C27.8915 26.5229 28.6977 25.7167 29.6899 25.7167C30.6822 25.7167 31.4884 26.5229 31.4884 27.5151C31.4884 28.5074 30.6822 29.3136 29.6899 29.3136ZM35.1318 26.2826H33.1318C32.6279 24.8717 31.2713 23.8562 29.6899 23.8562C28.1085 23.8562 26.7519 24.8717 26.2481 26.2826H24.9845V11.4686H30.062C33.1938 11.4686 35.1395 13.8174 35.1395 17.6004V26.2826H35.1318Z" fill="white"></path>
              </svg>
            </span>
            <h3 class="mb-4 text-xl font-bold font-heading">Free Shipping</h3>
            <p>From $45</p>
          </div>
          <div class="pt-12 px-14 pb-14 text-center">
            <p class="text-lg text-gray-500">Ante ipsum primis in faucibus orci luctus.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6 lg:mb-0">
        <div class="relative h-full text-center pt-16 bg-white">
          <img class="hidden lg:block absolute z-10 top-0 left-1/2 ml-16 lg:ml-8 mt-16" src="yofte-assets/elements/dots.svg" alt="">
          <div class="pb-12 border-b">

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

Four-Column Feature Benefit Cards with Colored Icons

A horizontal row of four white cards on a light gray background, each showing a colored circular icon, a bold heading, a short subtitle, and a divider followed by gray body text. The cards highlight shipping, secure shopping, customer satisfaction, and support benefits, connected by faint dotted lines between them.

AI Features Component Generator

Tailwind Component #4193

<section class="relative py-20 bg-gray-100">
  <div class="absolute top-0 left-0 w-full lg:w-2/5 h-64 lg:h-full bottom-0 bg-blue-300">
    <img class="absolute bottom-0 left-0 w-1/2 lg:w-auto" src="yofte-assets/elements/lines-order.svg" alt="">
    <img class="w-1/2 ml-auto lg:ml-0 lg:w-full h-full lg:h-auto object-cover" src="yofte-assets/images/placeholder-order.png" alt="">
  </div>
  <div class="mt-64 lg:mt-0 py-16 bg-white">
    <div class="container mx-auto px-4">
      <div class="flex items-end justify-end">
        <div class="w-full lg:w-3/5 lg:pl-20 lg:ml-auto">
          <h2 class="mb-8 text-5xl font-bold font-heading">Thanks for ordering</h2>
          <p class="mb-12 text-gray-500">Your payment went through</p>
          <div class="flex flex-wrap mb-12">
            <div class="mr-20">
              <h3 class="text-gray-600">Order Number</h3>
              <p class="text-blue-300 font-bold font-heading">XYZ0864395</p>
            </div>
            <div class="mr-auto">
              <h3 class="text-gray-600">Date</h3>
              <p class="text-blue-300 font-bold font-heading">June 05, 2021</p>
            </div>
            <a class="inline-flex mt-6 md:mt-0 w-full lg:w-auto justify-center items-center py-4 px-6 border hover:border-gray-500 rounded-md font-bold font-heading" href="#">
              <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1V0.25C0.585786 0.25 0.25 0.585786 0.25 1L1 1ZM15 19V19.75C15.4142 19.75 15.75 19.4142 15.75 19H15ZM1 19H0.25C0.25 19.4142 0.585786 19.75 1 19.75L1 19ZM10 1L10.5303 0.46967C10.3897 0.329018 10.1989 0.25 10 0.25V1ZM15 6H15.75C15.75 5.80109 15.671 5.61032 15.5303 5.46967L15 6ZM15 18.25H1V19.75H15V18.25ZM1.75 19V1H0.25V19H1.75ZM1 1.75H10V0.25H1V1.75ZM14.25 6V19H15.75V6H14.25ZM9.46967 1.53033L14.4697 6.53033L15.5303 5.46967L10.5303 0.46967L9.46967 1.53033ZM8.25 1V5H9.75V1H8.25ZM11 7.75H15V6.25H11V7.75ZM8.25 5C8.25 6.51878 9.48122 7.75 11 7.75V6.25C10.3096 6.25 9.75 5.69036 9.75 5H8.25Z" fill="black"></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

AI E-commerce (orders) Component Generator

Tailwind Component #4194

<section class="py-20 bg-gray-100" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">Discover our products</h2>
    <div class="flex flex-wrap -mx-4 mb-24">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 md:px-10 mb-20">
        <div class="p-6 bg-white">
          <span class="px-2 py-1 text-xs font-bold font-heading border-2 border-red-500 rounded-full text-red-500 bg-white">-15%</span>
          <a class="block px-6 mt-8 mb-2" href="#">
            <img class="mb-5 mx-auto h-56 w-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
            <h3 class="mb-2 text-xl font-bold font-heading">BRILE water filter</h3>
            <p class="text-lg font-bold font-heading text-blue-500">
              <span>$29.89</span>
              <span class="text-xs text-gray-500 font-semibold font-heading line-through">$33.69</span>
            </p>
          </a>
          <a class="ml-auto mr-2 flex items-center justify-center w-12 h-12 border rounded-lg hover:border-gray-500" href="#">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" width="2" height="12" fill="#161616"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="#161616"></rect></svg>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 md:px-10 mb-20">
        <div class="p-6 bg-white h-full">
          <span class="px-2 py-1 text-xs font-bold font-heading border-2 border-red-500 rounded-full text-red-500 bg-white">-10%</span>
          <a class="block px-6 mt-8 mb-2" 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 #4195

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <h2 class="mb-8 text-5xl font-bold font-heading">Order History</h2>
    <p class="mb-14 text-lg text-gray-500">Recent Orders dolor sit amet consectutar</p>
    <div class="py-8 md:py-20 px-6 md:px-20 bg-white">
      <div class="flex flex-wrap mb-8">
        <div class="w-full md:w-1/3 mb-6 lg:mb-0">
          <span class="text-gray-500">Order Number</span>
          <h3 class="text-3xl font-bold font-heading">XYZ0864395</h3>
          <span class="font-bold font-heading text-blue-300">June 05, 2021</span>
        </div>
        <div class="w-full lg:w-auto ml-auto">
          <a class="inline-flex w-full md:w-auto mb-4 lg:mb-0 md:mr-6 justify-center items-center px-8 py-6 font-bold font-heading uppercase border hover:border-gray-500 rounded-md" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 6V17H2V6M16 6H2M16 6C16.5523 6 17 5.55228 17 5V2C17 1.44772 16.5523 1 16 1H2C1.44772 1 1 1.44772 1 2V5C1 5.55228 1.44772 6 2 6M7 10H11" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="ml-4">Return</span>
          </a>
          <a class="inline-flex w-full md:w-auto mb-4 lg:mb-0 md:mr-6 justify-center items-center px-8 py-6 font-bold font-heading uppercase border hover:border-gray-500 rounded-md" href="#">
            <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5 11H1V1H5M5 11V1M5 11L10.1956 17.0615C10.6886 17.6367 11.4642 17.8839 12.1992 17.7002L12.2467 17.6883C13.5885 17.3529 14.1929 15.7894 13.4258 14.6386L11 11H15.5604C16.8225 11 17.7691 9.84535 17.5216 8.60777L16.3216 2.60777C16.1346 1.67292 15.3138 1 14.3604 1H5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="ml-4">COMPLAINT</span>
          </a>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI E-commerce (orders) Component Generator

Tailwind Component #4196

<section class="relative" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between border-b">
    <div class="px-12 py-8 flex w-full items-center">
      <a class="hidden xl:block mr-16" href="#">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 15.4688H0V17.7207H18V15.4688Z" fill="black"></path>
          <path d="M11.0226 7.87402H0V10.126H11.0226V7.87402Z" fill="black"></path>
          <path d="M18 0.279297H0V2.53127H18V0.279297Z" fill="black"></path>
        </svg>
      </a>
      <ul class="hidden xl:flex font-semibold font-heading">
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Category</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Collection</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Story</a></li>
        <li><a class="hover:text-gray-600" href="#">Brand</a></li>
      </ul>
      <a class="flex-shrink-0 xl:mx-auto text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
      <div class="hidden xl:inline-block mr-14">
        <input class="py-5 px-8 w-full placeholder-gray-400 text-xs uppercase font-semibold font-heading bg-gray-50 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text" placeholder="Search">
      </div>
      <div class="hidden xl:flex items-center">
        <a class="mr-10 hover:text-gray-600" 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

Yofte e-commerce top navigation bar with search and cart

A horizontal site header on a light background with a menu icon, text links for Category, Collection, Story, and Brand, a purple Yofte logo, a search input, wishlist and bag icons with a count badge, and a Sign In link separated by a vertical divider. It serves as primary navigation for a shopping storefront.

AI Navigation (horizontal) Component Generator

Tailwind Component #4197

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="p-8 lg:p-20 bg-white">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-10 lg:mb-0">
          <div class="flex mb-12 items-center">
            <span class="flex-shrink-0 inline-flex mr-8 items-center justify-center w-12 h-12 rounded-full bg-blue-300 text-white">1</span>
            <h3 class="text-2xl font-bold font-heading">Shipping address</h3>
          </div>
          <form action="">
            <div class="mb-10">
              <label class="font-bold font-heading text-gray-600" for="">Email address</label>
              <input class="block w-full mt-4 py-4 px-4 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="email">
            </div>
            <div class="mb-12">
              <p class="mb-5 text-sm text-gray-500">You can create an account after checkout</p>
              <div class="py-4 px-6 rounded-full bg-blue-50">
                <label class="flex items-center" for="">
                  <input type="checkbox">
                  <span class="ml-2 text-sm">Register/Choose a password</span>
                </label>
              </div>
            </div>
            <div class="mb-10">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI E-commerce (orders) Component Generator

Tailwind Component #4198

<section class="relative py-20 md:py-32 bg-blue-800 overflow-x-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 16 }">
  <img class="absolute h-24 md:h-auto top-0 left-0 right-0" src="yofte-assets/elements/line-top.svg" alt="">
  <div class="relative container px-4 mx-auto mb-20 lg:mb-40">
    <div class="flex flex-wrap items-center">
      <h2 class="mb-10 lg:mb-0 w-full lg:w-auto text-5xl text-white font-bold font-heading">What Customers Say</h2>
      <div class="flex w-full lg:w-auto lg:ml-auto">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
          </svg>
        </button>
        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
    <div x-ref="slide1" class="flex-shrink-0 w-full lg:max-w-md px-3 mb-6 lg:mb-0 opacity-50" :class="{'opacity-50': activeSlide == 0}">
      <div class="px-8 py-16 border border-white">
        <div class="relative px-4 mx-auto">
          <img class="absolute top-0 left-0" src="yofte-assets/elements/quote.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

Dark Testimonials Carousel with Quote Cards and Navigation Arrows

A testimonials section titled 'What Customers Say' with previous and next arrow buttons and a horizontal row of quote cards showing customer quotes, avatars, and names. The center card is highlighted with a brighter border and text while side cards are faded, suggesting a carousel.

AI Reviews Component Generator

Tailwind Component #4199

<section class="relative pt-20 md:pt-40 pb-20 bg-blue-800 overflow-x-hidden">
  <img class="absolute top-0 left-0 w-full max-h-32" src="yofte-assets/elements/line-content.svg" alt="">
  <div class="container mx-auto px-4">
    <div class="relative h-96 -mx-6 mb-20">
      <div class="absolute top-1/2 transform -translate-y-1/2 left-0 right-0 h-80 w-full bg-blue-300"></div>
      <img class="relative w-full h-96 px-6 object-cover" src="yofte-assets/images/placeholder-banner.png" alt="">
    </div>
    <div class="max-w-3xl mx-auto text-center">
      <h2 class="text-6xl md:text-7xl font-bold font-heading text-white">How to improve online store?</h2>
      <div class="inline-flex pt-14 mb-14 items-center">
        <img class="mr-8 w-20 lg:w-24 h-20 lg:h-24 rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
        <div class="text-left">
          <h4 class="mb-1 text-2xl font-bold font-heading text-white">Sarah Smith</h4>
          <p class="text-gray-500">14 June, 5:00 am</p>
        </div>
      </div>
      <div class="text-left">
        <h3 class="mb-12 text-3xl text-white">This morning, platea dictumst nec nunc. In hac habitasse, general, dignissim accumsan just. Suspendisse vitae ligula convallis, porta tortor et, finibus neque.</h3>
        <p class="mb-10 text-xl text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat nisl quis justo egestas, nec eleifend erat egestas. Curabitur purus neque, tincidunt ac malesuada nec, ornare non odio. Nulla nec lorem sed purus semper porta vel sit amet sem. Nunc placerat non turpis eu molestie. Nam consectetur lacus ut lacus elementum dapibus. Etiam vehicula ipsum ac dolor tristique placerat. In hac habitasse platea dictumst.</p>
        <p class="text-xl text-gray-400">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam venenatis est quis venenatis dignissim. Maecenas a sem eros. Quisque hendrerit vitae libero non porta. Maecenas quis sem et nulla pellentesque accumsan. Proin blandit bibendum orci, a aliquam augue sagittis sed. Quisque pharetra ut quam eget varius. Morbi nisi nunc, ultricies id ligula id, feugiat eleifend est. Etiam metus sem, ornare vitae porta vel, porta a mauris. Fusce dapibus egestas lorem eu tincidunt. Quisque lobortis placerat placerat. Donec eget lectus blandit ex pellentesque iaculis. Proin aliquam vulputate arcu et blandit. Duis sed lobortis mauris, vel porttitor lectus. Pellentesque vel ultrices odio.</p>
      </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

Dark blog article header with hero image, title, author byline and body text

A dark-themed blog article layout showing a full-width photo banner, a large centered headline, an author avatar with name and date, a lead paragraph, and body text in a narrow centered column. Decorative arcs and blue accent bars frame the hero image.

AI Content Component Generator

Tailwind Component #4200