Tailwind Components in Vendia library

Framework

UI Library

Components

Tailwind Component #21

Tailwind CSS

Vendia

<section>
  <div class="py-4 bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-center">
        <p class="mr-5 font-medium">This announcement bar can be used to inform visitors of something important.</p>
        <a class="inline-block py-1 px-2 text-sm text-white hover:text-black bg-black hover:bg-white rounded-full transition duration-200" href="#">Dismiss</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

Gradient announcement bar with dismiss button

A full-width horizontal announcement bar with a yellow-to-blue gradient background, centered message text, and a black pill-shaped Dismiss button on the right. It is used to inform visitors of a site-wide message and can be closed.

Tailwind Component #22

Tailwind CSS

Vendia

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-20 bg-black">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-4/12 xl:w-3/12 px-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-1 gap-6 md:gap-2 lg:gap-6 px-4 lg:pt-28 pb-20 lg:pb-9">
          <div>
            <h6 class="font-bold text-white mb-5">Average Rating</h6>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/stars5.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox" checked="">
              <img src="vendia-assets/images/search/stars4.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/stars3.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/stars2.svg" alt="">
            </div>
            <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

Tailwind Component #23

Tailwind CSS

Vendia

<section class="py-20 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row flex-wrap items-center justify-center">
      <div class="flex items-center">
        <div class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-yellow-500 text-sm font-bold">1</div>
        <span class="font-bold text-white">Shopping Cart</span>
      </div>
      <span class="my-4 md:my-0 md:mx-8 lg:mx-16">
        <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <div class="flex items-center">
        <div class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-blueGray-800 text-sm font-bold text-white">2</div>
        <span class="font-bold text-white">Payment &amp; Delivery Options</span>
      </div>
      <span class="my-4 md:my-0 md:mx-8 lg:mx-16">
        <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <div class="flex items-center">
        <div class="inline-flex w-7 h-7 mr-4 justify-center items-center rounded-full bg-blueGray-800 text-sm font-bold text-white">3</div>
        <span class="font-bold text-white">Order Received</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

Three-Step Checkout Progress Indicator

A horizontal checkout progress indicator showing three numbered steps: Shopping Cart, Payment & Delivery Options, and Order Received. The first step is highlighted with a bright yellow-green numbered circle, while the remaining steps use dark gray circles, with arrow connectors between them.

Tailwind Component #24

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:pb-32 bg-black" x-data="{ deliveryMethod: '' }" x-init="deliveryMethod = $refs.standard.textContent">
  <div class="container mx-auto px-4">
    <div class="max-w-md lg:max-w-lg xl:max-w-none mx-auto">
      <h3 class="font-heading text-4xl text-white font-bold mb-12">Checkout</h3>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full xl:w-1/2 px-4 mb-8 xl:mb-0">
          <div class="max-w-2xl">
            <form action="">
              <div class="mb-10 pb-12 border-b border-blueGray-800">
                <h6 class="font-bold text-white mb-6">Contact Information</h6>
                <div class="pb-12 mb-8 border-b border-blueGray-800">
                  <label class="block mb-2 text-gray-400 text-sm font-medium" for="">Email Address</label>
                  <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="email">
                </div>
                <h6 class="font-bold text-white mb-6">Contact Information</h6>
                <div class="flex flex-wrap -mx-2 mb-6">
                  <div class="w-full md:w-1/2 px-2 mb-6 md:mb-0">
                    <label class="block mb-2 text-gray-400 text-sm font-medium" for="">First Name</label>
                    <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="text">
                  </div>
                  <div class="w-full md:w-1/2 px-2">
                    <label class="block mb-2 text-gray-400 text-sm font-medium" for="">Last Name</label>
                    <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="text">
                  </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 #25

Tailwind CSS

Vendia

<section class="pt-12 md:pt-20 pb-8 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 pb-20 border-b border-blueGray-800">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-xs sm:max-w-md">
          <a class="inline-block mb-20" href="#">
            <img class="block h-7" src="vendia-assets/logos/vendia.svg" alt="">
          </a>
          <p class="sm:text-xl text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum aliquet accumsan porta lectus ridiculus in mattis.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/3 lg:w-2/12 px-4 mb-12 sm:mb-0">
        <div>
          <span class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 mb-6">Company</span>
          <ul class="list-unstyled mb-0">
            <li class="mb-4"><a class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">About</a></li>
            <li class="mb-4"><a class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Support</a></li>
            <li class="mb-4"><a class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Products</a></li>
            <li><a class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Career</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full sm:w-1/3 lg:w-2/12 px-4 mb-12 sm: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

Dark Site Footer with Logo, Link Columns, and Payment Icons

A dark-themed website footer showing the Vendia logo, a short lorem ipsum blurb, three link columns (Company, Help, Resources), a divider, copyright text, and payment method badges. Lime-accented column headings organize navigation links into a multi-column layout.

Tailwind Component #26

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:pb-32 bg-black" x-data="{ deliveryMethod: '' }" x-init="deliveryMethod = $refs.standard.textContent">
  <div class="container mx-auto px-4">
    <div class="max-w-md lg:max-w-lg xl:max-w-none mx-auto">
      <h3 class="font-heading text-4xl text-white font-bold mb-12">Checkout</h3>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full xl:w-1/2 px-4 mb-8 xl:mb-0">
          <div class="max-w-2xl">
            <form action="">
              <div class="mb-10 pb-12 border-b border-blueGray-800">
                <h6 class="font-bold text-white mb-6">Contact Information</h6>
                <div class="pb-12 mb-8 border-b border-blueGray-800">
                  <label class="block mb-2 text-gray-400 text-sm font-medium" for="">Email Address</label>
                  <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="email">
                </div>
                <h6 class="font-bold text-white mb-6">Contact Information</h6>
                <div class="flex flex-wrap -mx-2 mb-6">
                  <div class="w-full md:w-1/2 px-2 mb-6 md:mb-0">
                    <label class="block mb-2 text-gray-400 text-sm font-medium" for="">First Name</label>
                    <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="text">
                  </div>
                  <div class="w-full md:w-1/2 px-2">
                    <label class="block mb-2 text-gray-400 text-sm font-medium" for="">Last Name</label>
                    <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="text">
                  </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 #27

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-md mx-auto h-full flex flex-col px-10 pt-8 pb-12 bg-blueGray-900">
          <h4 class="text-4xl text-white font-bold mb-3">
            <span class="block">100% Quality</span>
            <span>checked</span>
          </h4>
          <span class="font-medium text-gray-400">Reliable</span>
          <div class="mt-auto pt-8 flex justify-end">
            <div class="inline-flex w-32 lg:w-40 h-32 lg:h-40 items-center justify-center bg-yellow-500 rounded-full">
              <svg width="56" height="64" viewBox="0 0 56 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M53.6668 15.9583L28.0002 3.125L2.3335 15.9583M53.6668 15.9583L28.0002 28.7917M53.6668 15.9583V48.0417L28.0002 60.875M28.0002 28.7917L2.3335 15.9583M28.0002 28.7917V60.875M2.3335 15.9583V48.0417L28.0002 60.875" stroke="black" stroke-width="4.5" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-md mx-auto h-full flex flex-col px-10 pt-8 pb-12 bg-blueGray-900">
          <h4 class="text-4xl text-white font-bold mb-3">
            <span class="block">Get Instant</span>
            <span>support all day.</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

Dark Feature Cards with Yellow Icons and Brand Rating

A dark-themed section with three feature cards in a horizontal row, each showing a heading, subtext, and yellow circular icon, followed by a centered testimonial-style rating block reading 'Top Rated Fashion Brand' with five stars and 4.8 rating from 30k reviews.

Tailwind Component #28

Tailwind CSS

Vendia

<section class="bg-black">
  <div class="px-4">
    <div class="lg:flex">
      <div class="max-w-2xl mx-auto pt-24 pb-32 px-5 lg:px-10 text-center">
        <img class="block mb-12 mx-auto" src="vendia-assets/images/order/happy.png" alt="">
        <p class="text-gray-400 font-medium mb-4">You have successfully ordered all items</p>
        <h4 class="font-heading text-4xl sm:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-green-300 to-blue-500 mb-5">Thank you for the order</h4>
        <p class="text-gray-400 mb-32 lg:mb-64">Really nicely designed theme and quite fast loading. The quickness of page loads you can really appreciate once for you turn off page of the transition preloader in theme options. Custom of a support was really quick.</p>
        <div>
          <span class="text-gray-400 font-medium">Share with your friends</span>
          <div class="mt-5 mb-16 flex items-center justify-center">
            <a class="inline-block mr-5" href="#">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M36 18.1102C36 8.10799 27.9415 0 18.0022 0C8.05849 0.00224972 0 8.10799 0 18.1125C0 27.1496 6.58268 34.6412 15.1856 36V23.3453H10.6187V18.1125H15.1901V14.1192C15.1901 9.58155 17.8785 7.07537 21.9888 7.07537C23.9595 7.07537 26.018 7.42857 26.018 7.42857V11.883H23.748C21.5141 11.883 20.8166 13.2801 20.8166 14.7132V18.1102H25.8065L25.0101 23.3431H20.8144V35.9977C29.4173 34.6389 36 27.1474 36 18.1102Z" fill="#EAEDF0"></path>
              </svg>
            </a>
            <a class="inline-block mr-5" href="#">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 0C8.05875 0 0 8.05875 0 18C0 27.9412 8.05875 36 18 36C27.9412 36 36 27.9412 36 18C36 8.05875 27.9412 0 18 0ZM13.5937 25.4606H9.94875V13.7306H13.5937V25.4606ZM11.7487 12.2906C10.5975 12.2906 9.85312 11.475 9.85312 10.4662C9.85312 9.43687 10.62 8.64562 11.7956 8.64562C12.9712 8.64562 13.6912 9.43687 13.7137 10.4662C13.7137 11.475 12.9712 12.2906 11.7487 12.2906ZM26.9062 25.4606H23.2612V18.96C23.2612 17.4469 22.7325 16.4194 21.4144 16.4194C20.4075 16.4194 19.8094 17.115 19.545 17.7844C19.4475 18.0225 19.4231 18.36 19.4231 18.6956V25.4587H15.7762V17.4713C15.7762 16.0069 15.7294 14.7825 15.6806 13.7287H18.8475L19.0144 15.3581H19.0875C19.5675 14.5931 20.7431 13.4644 22.71 13.4644C25.1081 13.4644 26.9062 15.0712 26.9062 18.525V25.4606Z" fill="#EAEDF0"></path>
              </svg>
            </a>
            <a class="inline-block" href="#">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 0C8.05875 0 0 8.05875 0 18C0 27.9412 8.05875 36 18 36C27.9412 36 36 27.9412 36 18C36 8.05875 27.9412 0 18 0ZM25.3219 14.745C25.3294 14.8987 25.3312 15.0525 25.3312 15.2025C25.3312 19.89 21.7669 25.2919 15.2456 25.2919C13.3187 25.2951 11.4318 24.7416 9.81187 23.6981C10.0875 23.7319 10.3706 23.745 10.6575 23.745C12.3187 23.745 13.8469 23.1806 15.06 22.2281C14.3207 22.2136 13.6044 21.9688 13.0108 21.5278C12.4173 21.0869 11.9761 20.4717 11.7487 19.7681C12.2797 19.8691 12.8266 19.8479 13.3481 19.7062C12.5457 19.544 11.8241 19.1092 11.3057 18.4756C10.7873 17.842 10.504 17.0486 10.5037 16.23V16.1869C10.9819 16.4513 11.5294 16.6125 12.1106 16.6313C11.3584 16.1305 10.8258 15.3613 10.622 14.4809C10.4181 13.6005 10.5582 12.6755 11.0137 11.895C11.9043 12.99 13.0149 13.8858 14.2736 14.5243C15.5323 15.1629 16.911 15.53 18.3206 15.6019C18.1414 14.8412 18.2185 14.0426 18.54 13.3303C18.8615 12.618 19.4093 12.0319 20.0983 11.663C20.7872 11.2941 21.5788 11.1632 22.3498 11.2906C23.1208 11.418 23.8282 11.7966 24.3619 12.3675C25.1553 12.2105 25.9162 11.9195 26.6119 11.5069C26.3474 12.3284 25.7938 13.026 25.0537 13.47C25.7566 13.3853 26.4429 13.1964 27.09 12.9094C26.6147 13.6217 26.0159 14.2433 25.3219 14.745Z" fill="#EAEDF0"></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

Tailwind Component #29

Tailwind CSS

Vendia

<section x-data="{ dropdown: false, mobileNavOpen: false, nav: '' }">
  <nav class="relative px-6 lg:px-16 py-9 bg-black">
    <div class="flex items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex ml-16 lg:w-auto lg:space-x-12">
        <li class="relative group" x-on:mouseover="dropdown = true" x-on:mouseleave="dropdown = false">
          <a class="inline-flex items-center text-yellow-500 font-medium" href="#">
            <span class="mr-3">Why Vendia?</span>
            <span :class="{'rotate-180': !dropdown, 'rotate-0': dropdown }" class="block transform rotate-180">
                <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 6L6.00001 1.33333L1.33334 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </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

Dark top navigation bar with Why Vendia dropdown menu

A black site header with logo, primary links, search, cart badge, and account control, with an open dropdown panel listing three category entries and documentation links. The dropdown sits below the Why Vendia trigger on a light gray background.

Tailwind Component #30

Tailwind CSS

Vendia

<section>
  <div class="py-4 bg-yellow-500">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-center">
        <p class="mr-5 font-medium">This announcement bar can be used to inform visitors of something important.</p>
        <a class="inline-block py-1 px-2 text-sm text-white hover:text-black bg-black hover:bg-white rounded-full transition duration-200" href="#">Dismiss</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

Yellow Announcement Bar with Dismiss Button

A full-width announcement bar with a bright yellow background displaying a single line of informational text and a black rounded Dismiss button centered on the right side. It is used to inform visitors of a message and allow them to close it.

Tailwind Component #31

Tailwind CSS

Vendia

<section x-data="{ dropdown: false, mobileNavOpen: false }">
  <nav class="relative px-6 lg:px-16 py-9 bg-black">
    <div class="flex items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex ml-16 lg:w-auto lg:space-x-12">
        <li class="relative group" x-on:mouseover="dropdown = true" x-on:mouseleave="dropdown = false">
          <a class="inline-flex items-center font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500" href="#">
            <span class="mr-3">Why Vendia?</span>
            <span :class="{'rotate-180': !dropdown, 'rotate-0': dropdown }" class="block transform rotate-180">
                <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 6L6.00001 1.33333L1.33334 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </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

Vendia Top Navigation Bar with Open Mega Menu Dropdown

A dark top navigation bar with the Vendia logo, menu links, search, cart badge, and account control, showing an open dropdown panel under "Why Vendia?" with three icon-led category entries and a documentation section with links. The dropdown is a black panel beneath the header over a light gray-blue background.

Tailwind Component #32

Tailwind CSS

Vendia

<section class="py-12 md:py-24 bg-black">
  <div class="container mx-auto px-4">
    <h3 class="text-4xl text-white font-bold mb-12">Shopping Cart</h3>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-7/12 px-4 mb-12 lg:mb-0">
        <div x-data="{ item: true }" :class="{ 'hidden': !item }">
          <div class="pt-px bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500"></div>
          <div class="py-10 relative">
            <button x-on:click="item = false" class="inline-block p-0 absolute top-0 right-0 mt-10 w-auto text-gray-400 hover:text-gray-200">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 11L11 1M1 1L11 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
            <div class="flex flex-wrap -mx-4">
              <div class="w-full sm:w-1/3 px-4 mb-6 sm:mb-0">
                <img class="block w-full" src="vendia-assets/images/cart/cart-item1.png" alt="">
              </div>
              <div class="w-full sm:w-2/3 px-4">
                <div class="flex flex-col h-full">
                  <div>
                    <div class="sm:flex items-start">
                      <div class="flex-shrink-0 mr-4 md:mr-12 lg:mr-32 mb-6 sm:mb-4">
                        <span class="text-white font-medium">Basic Tee</span>
                        <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 #33

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <div class="mb-14">
      <h4 class="text-4xl text-white font-bold mb-5">Order history</h4>
      <p class="text-sm text-gray-400">Check the status of recent orders, manage return orders, and discover similar products.</p>
    </div>
    <div class="mb-10 border border-blueGray-800">
      <div class="p-8 border-b border-blueGray-800">
        <div class="flex flex-wrap -mb-6 -mx-4">
          <div class="w-full sm:w-1/3 lg:w-auto px-4 mb-6">
            <span class="block mb-1 font-medium text-gray-400">Order number</span>
            <span class="font-bold text-white">WU88191111</span>
          </div>
          <div class="w-full sm:w-1/3 lg:w-auto px-4 mb-6">
            <span class="block mb-1 font-medium text-gray-400">Date placed</span>
            <span class="font-bold text-white">Jul 6, 2021</span>
          </div>
          <div class="w-full sm:w-1/3 lg:w-auto px-4 mb-6">
            <span class="block mb-1 font-medium text-gray-400">Total amount</span>
            <span class="font-bold text-white">$160.00</span>
          </div>
          <div class="w-full lg:w-auto ml-auto mb-6">
            <div class="flex flex-col sm:flex-row flex-wrap items-center"><a class="inline-block w-full sm:w-auto mb-3 sm:mb-0 sm:mr-5 px-4 py-2 text-center font-bold text-sm text-white border border-gray-800 hover:bg-gray-900 transition duration-200" href="#">View Order</a><a class="inline-block w-full sm:w-auto px-4 py-2 text-center font-bold text-sm text-white border border-gray-800 hover:bg-gray-900 transition duration-200" href="#">View Invoice</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

Tailwind Component #34

Tailwind CSS

Vendia

<section class="py-12 md:py-24 bg-black">
  <div class="container mx-auto px-4">
    <h3 class="text-4xl text-white font-bold mb-12">Shopping Cart</h3>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-7/12 px-4 mb-12 lg:mb-0">
        <div x-data="{ item: true }" :class="{ 'hidden': !item }" class="py-10 border-t border-b border-gray-800 relative">
          <button x-on:click="item = false" class="inline-block p-0 absolute top-0 right-0 mt-10 w-auto">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 11L11 1M1 1L11 11" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <div class="flex flex-wrap -mx-4">
            <div class="w-full sm:w-1/3 px-4 mb-6 sm:mb-0">
              <img class="block w-full" src="vendia-assets/images/cart/cart-item1.png" alt="">
            </div>
            <div class="w-full sm:w-2/3 px-4">
              <div class="flex flex-col h-full">
                <div>
                  <div class="sm:flex items-start">
                    <div class="flex-shrink-0 mr-4 md:mr-12 lg:mr-32 mb-6 sm:mb-4">
                      <span class="text-white font-medium">Basic Tee</span>
                      <div>
                        <span class="inline-block mr-5 text-sm font-medium text-gray-400">Sienna</span>
                        <span class="inline-block mr-5 text-sm font-medium text-gray-400">Large</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 #35

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <h3 class="font-heading text-3xl font-bold text-white mb-8">Recent reviews</h3>
    <div class="pt-px bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 mb-5"></div>
    <div class="flex flex-wrap -mx-4 -mb-12 py-10">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
        <div>
          <h6 class="text-white font-bold">Risako M</h6>
          <span class="text-sm text-gray-400">May 16, 2021</span>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
        <div class="flex items-center md:justify-end lg:justify-start">
          <div class="flex items-center">
            <svg width="116" height="23" viewBox="0 0 116 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.2387 4.44347C10.5774 3.40101 12.0522 3.40101 12.3909 4.44347L13.6012 8.16814C13.7526 8.63434 14.1871 8.94998 14.6773 8.94998H18.5936C19.6897 8.94998 20.1455 10.3526 19.2587 10.9969L16.0903 13.2989C15.6937 13.587 15.5278 14.0977 15.6793 14.5639L16.8895 18.2886C17.2282 19.331 16.0351 20.1979 15.1483 19.5536L11.9799 17.2517C11.5833 16.9635 11.0463 16.9635 10.6497 17.2517L7.48135 19.5536C6.59458 20.1979 5.40143 19.331 5.74015 18.2886L6.95037 14.5639C7.10185 14.0977 6.9359 13.587 6.53933 13.2989L3.37093 10.9969C2.48416 10.3526 2.9399 8.94998 4.03601 8.94998H7.95236C8.44256 8.94998 8.877 8.63434 9.02848 8.16814L10.2387 4.44347Z" fill="#EDFF7C"></path>
              <path d="M33.5795 4.44347C33.9182 3.40101 35.393 3.40101 35.7318 4.44347L36.942 8.16814C37.0935 8.63434 37.5279 8.94998 38.0181 8.94998H41.9344C43.0306 8.94998 43.4863 10.3526 42.5995 10.9969L39.4311 13.2989C39.0346 13.587 38.8686 14.0977 39.0201 14.5639L40.2303 18.2886C40.569 19.331 39.3759 20.1979 38.4891 19.5536L35.3207 17.2517C34.9241 16.9635 34.3871 16.9635 33.9906 17.2517L30.8222 19.5536C29.9354 20.1979 28.7423 19.331 29.081 18.2886L30.2912 14.5639C30.4427 14.0977 30.2767 13.587 29.8801 13.2989L26.7118 10.9969C25.825 10.3526 26.2807 8.94998 27.3768 8.94998H31.2932C31.7834 8.94998 32.2178 8.63434 32.3693 8.16814L33.5795 4.44347Z" fill="#EDFF7C"></path>
              <path d="M56.9213 4.44347C57.26 3.40101 58.7348 3.40101 59.0736 4.44347L60.2838 8.16814C60.4353 8.63434 60.8697 8.94998 61.3599 8.94998H65.2762C66.3724 8.94998 66.8281 10.3526 65.9413 10.9969L62.7729 13.2989C62.3764 13.587 62.2104 14.0977 62.3619 14.5639L63.5721 18.2886C63.9108 19.331 62.7177 20.1979 61.8309 19.5536L58.6625 17.2517C58.2659 16.9635 57.7289 16.9635 57.3324 17.2517L54.164 19.5536C53.2772 20.1979 52.084 19.331 52.4228 18.2886L53.633 14.5639C53.7845 14.0977 53.6185 13.587 53.2219 13.2989L50.0536 10.9969C49.1668 10.3526 49.6225 8.94998 50.7186 8.94998H54.635C55.1252 8.94998 55.5596 8.63434 55.7111 8.16814L56.9213 4.44347Z" fill="#EDFF7C"></path>
              <path d="M80.2631 4.44347C80.6018 3.40101 82.0766 3.40101 82.4154 4.44347L83.6256 8.16814C83.7771 8.63434 84.2115 8.94998 84.7017 8.94998H88.618C89.7142 8.94998 90.1699 10.3526 89.2831 10.9969L86.1147 13.2989C85.7182 13.587 85.5522 14.0977 85.7037 14.5639L86.9139 18.2886C87.2526 19.331 86.0595 20.1979 85.1727 19.5536L82.0043 17.2517C81.6077 16.9635 81.0707 16.9635 80.6742 17.2517L77.5058 19.5536C76.619 20.1979 75.4258 19.331 75.7646 18.2886L76.9748 14.5639C77.1263 14.0977 76.9603 13.587 76.5637 13.2989L73.3953 10.9969C72.5086 10.3526 72.9643 8.94998 74.0604 8.94998H77.9768C78.467 8.94998 78.9014 8.63434 79.0529 8.16814L80.2631 4.44347Z" fill="#EDFF7C"></path>
              <path d="M103.605 4.44347C103.944 3.40101 105.418 3.40101 105.757 4.44347L106.967 8.16814C107.119 8.63434 107.553 8.94998 108.043 8.94998H111.96C113.056 8.94998 113.512 10.3526 112.625 10.9969L109.457 13.2989C109.06 13.587 108.894 14.0977 109.045 14.5639L110.256 18.2886C110.594 19.331 109.401 20.1979 108.515 19.5536L105.346 17.2517C104.95 16.9635 104.413 16.9635 104.016 17.2517L100.848 19.5536C99.9608 20.1979 98.7676 19.331 99.1064 18.2886L100.317 14.5639C100.468 14.0977 100.302 13.587 99.9055 13.2989L96.7371 10.9969C95.8504 10.3526 96.3061 8.94998 97.4022 8.94998H101.319C101.809 8.94998 102.243 8.63434 102.395 8.16814L103.605 4.44347Z" fill="#EDFF7C"></path>
            </svg>
          </div>
          <span class="ml-3 text-white font-bold">5</span>
        </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

Recent Reviews Testimonials List on Dark Background

A dark-themed testimonials section titled "Recent reviews" listing three customer reviews in rows, each with reviewer name, date, star rating, review headline, and body text. Rows are separated by thin gradient dividers in a vertical list layout.

Tailwind Component #36

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <div class="mb-14">
      <h4 class="text-4xl text-white font-bold mb-5">Order history</h4>
      <p class="text-sm text-gray-400">Check the status of recent orders, manage return orders, and discover similar products.</p>
    </div>
    <div class="mb-10 border border-blueGray-800">
      <div class="p-8 border-b border-blueGray-800">
        <div class="flex flex-wrap -mb-6 -mx-4">
          <div class="w-full sm:w-1/3 lg:w-auto px-4 mb-6">
            <span class="block mb-1 font-medium text-gray-400">Order number</span>
            <span class="font-bold text-white">WU88191111</span>
          </div>
          <div class="w-full sm:w-1/3 lg:w-auto px-4 mb-6">
            <span class="block mb-1 font-medium text-gray-400">Date placed</span>
            <span class="font-bold text-white">Jul 6, 2021</span>
          </div>
          <div class="w-full sm:w-1/3 lg:w-auto px-4 mb-6">
            <span class="block mb-1 font-medium text-gray-400">Total amount</span>
            <span class="font-bold text-white">$160.00</span>
          </div>
          <div class="w-full lg:w-auto ml-auto mb-6">
            <div class="flex flex-col sm:flex-row flex-wrap items-center"><a class="inline-block w-full sm:w-auto mb-3 sm:mb-0 sm:mr-5 px-4 py-2 text-center font-bold text-sm text-white border border-gray-800 hover:bg-gray-900 transition duration-200" href="#">View Order</a><a class="inline-block w-full sm:w-auto px-4 py-2 text-center font-bold text-sm text-white border border-gray-800 hover:bg-gray-900 transition duration-200" href="#">View Invoice</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

Tailwind Component #37

Tailwind CSS

Vendia

<section class="py-12 md:py-24 bg-black">
  <div class="container mx-auto px-4">
    <div class="max-w-sm md:max-w-xl mx-auto lg:max-w-none">
      <div class="mb-16">
        <span class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-green-300 to-blue-500">Trending</span>
        <h1 class="font-heading text-4xl text-white font-bold mt-6 mb-2">The best of the best</h1>
        <p class="text-sm text-gray-400">The coolest, hottest furniture pieces.</p>
      </div>
      <div class="flex flex-wrap -mb-8 -mx-4 xl:-mx-8">
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">
          <a class="group block" href="#">
            <img class="block mb-5 h-88 w-full object-cover transition-transform duration-500 transform group-hover:scale-102" src="vendia-assets/images/item-cards/shirt-products4.png" alt="">
            <span class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-green-300 to-blue-500">$99.63</span>
            <h6 class="font-bold text-sm text-white mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">
          <a class="group block" href="#">
            <img class="block mb-5 h-88 w-full object-cover transition-transform duration-500 transform group-hover:scale-102" src="vendia-assets/images/item-cards/shirt-products3.png" alt="">
            <span class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-green-300 to-blue-500">$99.63</span>
            <h6 class="font-bold text-sm text-white mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 mb-8 px-4 xl:px-8">

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

Tailwind CSS

Vendia

<section class="py-12 md:py-14 bg-black" x-data="{ quantity: 1 }">
  <div class="container mx-auto px-4">
    <div class="max-w-md md:max-w-none mx-auto">
      <ul class="flex items-center">
        <li class="mr-3">
          <a class="text-gray-400 font-medium" href="#">Home</a>
          <span class="pl-2 text-gray-400">/</span>
        </li>
        <li class="mr-3">
          <a class="text-gray-400 font-medium" href="#">Fashion</a>
          <span class="pl-2 text-gray-400">/</span>
        </li>
        <li><a class="inline-block text-transparent bg-clip-text font-bold bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500" href="#">Basic Gray T-Shirt</a></li>
      </ul>
      <div class="flex flex-wrap mt-10 -mx-4">
        <div class="w-full md:w-1/2 lg:w-3/5 xl:w-2/3 mb-12 md:mb-0 px-4">
          <div class="max-w-3xl">
            <div class="lg:flex h-full">
              <div class="lg:flex-shrink-0 lg:w-20 lg:mr-6">
                <div class="flex lg:-mb-4 lg:block justify-between">
                  <a class="block mb-4" href="#">
                    <img class="block sm:w-20 h-20" src="vendia-assets/images/product-details/clothes1.png" alt="">
                  </a>
                  <a class="block mb-4" 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 #39

Tailwind CSS

Vendia

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-md mx-auto h-full flex flex-col px-10 pt-8 pb-12 bg-blueGray-900">
          <h4 class="text-4xl text-white font-bold mb-3">
            <span class="block">100% Quality</span>
            <span>checked</span>
          </h4>
          <span class="font-medium text-gray-400">Reliable</span>
          <div class="mt-auto pt-8 flex justify-end">
            <div class="inline-flex w-32 lg:w-40 h-32 lg:h-40 items-center justify-center bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500 rounded-full">
              <svg width="56" height="64" viewBox="0 0 56 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M53.6668 15.9583L28.0002 3.125L2.3335 15.9583M53.6668 15.9583L28.0002 28.7917M53.6668 15.9583V48.0417L28.0002 60.875M28.0002 28.7917L2.3335 15.9583M28.0002 28.7917V60.875M2.3335 15.9583V48.0417L28.0002 60.875" stroke="black" stroke-width="4.5" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-md mx-auto h-full flex flex-col px-10 pt-8 pb-12 bg-blueGray-900">
          <h4 class="text-4xl text-white font-bold mb-3">
            <span class="block">Get Instant</span>
            <span>support all day.</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

Three-Card Feature Row with Brand Rating Banner

A dark-themed section showing three equal feature cards in a horizontal row, each with a bold heading, small subtext, and gradient icon circle, followed by a centered brand heading, testimonial quote, and star rating. It appears to be a marketing feature section highlighting quality, support, and consultation benefits.

Tailwind Component #40

Tailwind CSS

Vendia

<section x-data="{ active: 1 }" class="py-12 bg-black">
  <div class="container mx-auto px-4">
    <nav>
      <ul class="flex items-center justify-center">
        <li class="mr-5"><a x-ref="page1" x-on:click.prevent="active = $refs.page1.textContent" :class="{'text-black bg-yellow-500': $refs.page1.textContent == active, 'text-white hover:bg-gray-900': $refs.page1.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-black font-bold bg-yellow-500" href="#">1</a></li>
        <li class="mr-5"><a x-ref="page2" x-on:click.prevent="active = $refs.page2.textContent" :class="{'text-black bg-yellow-500': $refs.page2.textContent == active, 'text-white hover:bg-gray-900': $refs.page2.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white font-bold hover:bg-gray-900" href="#">2</a></li>
        <li class="mr-5"><a x-ref="page3" x-on:click.prevent="active = $refs.page3.textContent" :class="{'text-black bg-yellow-500': $refs.page3.textContent == active, 'text-white hover:bg-gray-900': $refs.page3.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white font-bold hover:bg-gray-900" href="#">3</a></li>
        <li class="mr-5"><a x-ref="page4" x-on:click.prevent="active = $refs.page4.textContent" :class="{'text-black bg-yellow-500': $refs.page4.textContent == active, 'text-white hover:bg-gray-900': $refs.page4.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white font-bold hover:bg-gray-900" href="#">4</a></li>
        <li><a x-ref="page5" x-on:click.prevent="active = $refs.page5.textContent" :class="{'text-black bg-yellow-500': $refs.page5.textContent == active, 'text-white hover:bg-gray-900': $refs.page5.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white font-bold hover:bg-gray-900" href="#">5</a></li>
      </ul>
    </nav>
  </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 Pagination Control with Yellow Active Page

A horizontal pagination bar on a black background showing page numbers 1 through 5, with page 1 highlighted by a yellow square. It appears to be an isolated pagination component with no surrounding content visible.

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 – Vendia Library

Framework

UI Library

Components

Tailwind Component #21

Get the code for 13,400+ components

Gradient announcement bar with dismiss button

Tailwind Component #22

Get the code for 13,400+ components

Tailwind Component #23

Get the code for 13,400+ components

Three-Step Checkout Progress Indicator

Tailwind Component #24

Get the code for 13,400+ components

Tailwind Component #25

Get the code for 13,400+ components

Dark Site Footer with Logo, Link Columns, and Payment Icons

Tailwind Component #26

Get the code for 13,400+ components

Tailwind Component #27

Get the code for 13,400+ components

Dark Feature Cards with Yellow Icons and Brand Rating

Tailwind Component #28

Get the code for 13,400+ components

Tailwind Component #29

Get the code for 13,400+ components

Dark top navigation bar with Why Vendia dropdown menu

Tailwind Component #30

Get the code for 13,400+ components

Yellow Announcement Bar with Dismiss Button

Tailwind Component #31

Get the code for 13,400+ components

Vendia Top Navigation Bar with Open Mega Menu Dropdown

Tailwind Component #32

Get the code for 13,400+ components

Tailwind Component #33

Get the code for 13,400+ components

Tailwind Component #34

Get the code for 13,400+ components

Tailwind Component #35

Get the code for 13,400+ components

Recent Reviews Testimonials List on Dark Background

Tailwind Component #36

Get the code for 13,400+ components

Tailwind Component #37

Get the code for 13,400+ components

Tailwind Component #38

Get the code for 13,400+ components

Tailwind Component #39

Get the code for 13,400+ components

Three-Card Feature Row with Brand Rating Banner

Tailwind Component #40

Get the code for 13,400+ components

Dark Pagination Control with Yellow Active Page

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support