UI Components in Uinel library

Framework

UI Library

Components

Tailwind Component #1

Tailwind CSS

Uinel

<div x-data="{ mobileNavOpen: false }">
  <div class="text-gray-700 font-heading font-medium relative bg-gray-50 bg-opacity-50">
    <nav class="flex justify-between px-6 lg:px-12 py-8">
      <div class="flex w-full items-center">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/uinel-gray-black.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-32">
          <li class="mr-16"><a class="text-gray-400 hover:text-gray-500" href="#">New tools</a></li>
          <li class="mr-16">
            <a class="flex items-center text-gray-400 hover:text-gray-500" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li><a class="text-gray-400 hover:text-gray-500" href="#">Pricing</a></li>
        </ul>
        <div class="hidden xl:flex items-center ml-auto">
          <a class="text-gray-400 hover:text-gray-500" href="#">
            <svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.5219 18.016H2.70312V8.5933C2.70313 6.719 3.48375 4.92147 4.87328 3.59614C6.2628 2.27081 8.1474 1.52625 10.1125 1.52625C12.0776 1.52625 13.9622 2.27081 15.3517 3.59614C16.7412 4.92147 17.5219 6.719 17.5219 8.5933V18.016Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1 18.0121H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Uinel Hero Section with Header and Product Showcase

A marketing hero section for the Uinel product with a top navigation bar, a headline reading "A thousand tools for design", an email signup field with a Get started button, and an illustrated composition of floating tool badges, a task card with tabs, and a blue team card.

Tailwind Component #2

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full md:w-auto px-4 mb-14 md:mb-0">
        <h2 class="text-7xl md:text-8xl font-heading font-bold leading-relaxed">Product analysis</h2>
        <p class="text-darkBlueGray-400 leading-8">Achieve your goals and increase profits</p>
      </div>
      <div class="w-full md:w-auto px-4">
        <div class="flex items-center"><a class="inline-block py-4 px-8 mr-4 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">All</a><a class="inline-block py-4 px-8 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Settings</a></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Page header with title, subtitle, and action buttons

A horizontal page header on a light blue background showing the bold heading "Product analysis," a gray subtitle beneath it, and two rounded action buttons labeled "All" and "Settings" aligned to the right.

Tailwind Component #3

Tailwind CSS

Uinel

<section x-data="{ mobileNavOpen: false }">
  <div class="py-1 text-center text-sm border-b border-gray-100">
    <p class="font-medium text-darkBlueGray-300 leading-10">
      <span>Hello, you are new here.</span>
      <span class="text-darkBlueGray-900">Get 20% off card!</span>
    </p>
  </div>
  <div class="px-6 lg:px-12">
    <nav class="flex justify-between">
      <div class="flex w-full items-center py-6">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/ecommerce/uistore-gray-black.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-20 2xl:ml-40 mr-auto">
          <li class="mr-16"><a class="font-medium hover:text-darkBlueGray-400" href="#">Stories</a></li>
          <li class="relative mr-16">
            <a class="flex items-center font-medium hover:text-darkBlueGray-400" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
            <div class="product-menu hidden absolute top-0 left-0 mt-24 -ml-64 pl-24 pr-16 pt-16 pb-24 bg-white rounded-lg z-50">
              <div class="absolute top-0 left-0 ml-72 w-7 h-7 bg-white transform rotate-45 -translate-y-1/2"></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

Ecommerce Hero with Top Navigation and Tablet Product Mockups

A light-blue hero section for the Uistore ecommerce brand with a top announcement bar, a navigation header with search, cart, and account controls, a large headline, a Shop now button, a promotional headphones card, and tablet device mockups on the right.

Tailwind Component #4

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full lg:w-auto px-4 mb-14 lg:mb-0">
        <div class="flex flex-wrap items-center">
          <img class="mb-6 md:mb-0 mr-10" src="uinel-assets/images/dashboard-navigations/icon2.svg" alt="">
          <div class="w-full md:w-auto">
            <h2 class="text-7xl md:text-8xl font-heading font-bold leading-relaxed">Product analysis</h2>
            <p class="text-darkBlueGray-400 leading-8">Achieve your goals and increase profits</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="flex items-center"><a class="inline-block py-4 px-8 mr-4 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">All</a><a class="inline-block py-4 px-8 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Settings</a></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Product analysis page header with icon and action buttons

A horizontal header row on a light background showing a circular gradient icon, a bold 'Product analysis' heading, a muted subtitle, and two rounded action buttons labeled 'All' and 'Settings' on the right.

Tailwind Component #5

Tailwind CSS

Uinel

<section class="relative" x-data="{ mobileNavOpen: false }">
  <div class="py-1 text-center text-sm border-b border-gray-100">
    <p class="font-medium text-darkBlueGray-300 leading-10">
      <span>Hello, you are new here.</span>
      <span class="text-darkBlueGray-900">Get 20% off card!</span>
    </p>
  </div>
  <img class="hidden md:block absolute top-1/2 right-0 z-10 md:w-2/5 lg:w-1/2 xl:w-auto" src="uinel-assets/images/ecommerce-headers/placeholder-right.png" alt="">
  <div class="px-6 lg:px-12">
    <nav class="flex justify-between">
      <div class="flex w-full items-center py-6">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/ecommerce/uistore-gray-black.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-20 2xl:ml-40 mr-auto">
          <li class="mr-16"><a class="font-medium hover:text-darkBlueGray-400" href="#">Stories</a></li>
          <li class="relative mr-16">
            <a class="flex items-center font-medium hover:text-darkBlueGray-400" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
            <div class="product-menu hidden absolute top-0 left-0 mt-24 -ml-64 pl-24 pr-16 pt-16 pb-24 bg-white rounded-lg z-50">

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

Tailwind CSS

Uinel

<div x-data="{ mobileNavOpen: false }">
  <div class="font-heading font-medium relative bg-blueGray-100">
    <nav class="flex justify-between px-6 lg:px-12 py-8">
      <div class="flex w-full items-center justify-between">
        <div class="flex items-center">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="hidden lg:block focus:outline-none">
            <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="black"></rect><rect y="14" width="25" height="2" fill="black"></rect></svg>
          </button>
          <div class="hidden lg:block w-px h-10 bg-gray-200 bg-opacity-50 mx-8 md:ml-14 md:mr-12"></div>
          <a href="#">
            <img class="h-12" src="uinel-assets/logos/uinel-white-black.svg" alt="">
          </a>
        </div>
        <div class="hidden xl:flex items-center">
          <a class="text-gray-300 hover:text-gray-400" href="#">
            <svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.5219 18.016H2.70312V8.5933C2.70313 6.719 3.48375 4.92147 4.87328 3.59614C6.2628 2.27081 8.1474 1.52625 10.1125 1.52625C12.0776 1.52625 13.9622 2.27081 15.3517 3.59614C16.7412 4.92147 17.5219 6.719 17.5219 8.5933V18.016Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1 18.0121H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.87891 22H10.8789" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="w-px h-12 bg-blueGray-200 ml-9 mr-11"></div>
          <a class="flex items-center mr-12" href="#">
            <span>Sona</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 #7

Tailwind CSS

Uinel

<div x-data="{ mobileNavOpen: false }">
  <div class="text-gray-50 font-heading font-medium relative bg-indigo-700">
    <nav class="flex justify-between px-6 lg:px-12 py-8">
      <div class="flex w-full items-center justify-between">
        <div class="flex items-center">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="hidden lg:block focus:outline-none">
            <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="white"></rect><rect y="14" width="25" height="2" fill="white"></rect></svg>
          </button>
          <div class="hidden lg:block w-px h-8 bg-white mx-8 md:ml-14 md:mr-12 bg-opacity-10"></div>
          <a href="#">
            <img class="h-12" src="uinel-assets/logos/uinel-gray-white.svg" alt="">
          </a>
        </div>
        <div class="hidden xl:flex items-center">
          <a class="flex items-center text-white" href="#">
            <span>Sona</span>
            <img class="ml-6" src="uinel-assets/elements/navigations/avatar-online.png" alt="">
            <img class="ml-6" src="uinel-assets/elements/navigations/arrow-down-white.svg" alt="">
          </a>
          <div class="w-px h-8 bg-white mx-9 bg-opacity-20"></div>
          <button class="uppercase text-white text-sm font-body font-bold border-2 border-white border-opacity-30 rounded-full py-3 px-5 tracking-wide hover:border-white">
            <span class="block mt-px">New project</span>
          </button>
        </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 #8

Tailwind CSS

Uinel

<section class="relative" x-data="{ mobileNavOpen: false }">
  <div class="py-1 text-center text-sm border-b border-gray-100">
    <p class="font-medium text-darkBlueGray-300 leading-10">
      <span>Hello, you are new here.</span>
      <span class="text-darkBlueGray-900">Get 20% off card!</span>
    </p>
  </div>
  <div class="px-6 lg:px-12">
    <nav class="flex justify-between">
      <div class="flex w-full items-center py-6">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/ecommerce/uistore-gray-black.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-20 2xl:ml-40 mr-auto">
          <li class="mr-16"><a class="font-medium hover:text-darkBlueGray-400" href="#">Stories</a></li>
          <li class="relative mr-16">
            <a class="flex items-center font-medium hover:text-darkBlueGray-400" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
            <div class="product-menu hidden absolute top-0 left-0 mt-24 -ml-64 pl-24 pr-16 pt-16 pb-24 bg-white rounded-lg z-50">
              <div class="absolute top-0 left-0 ml-72 w-7 h-7 bg-white transform rotate-45 -translate-y-1/2"></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 #9

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full md:w-auto px-4 mb-10 md:mb-0">
        <div class="flex flex-wrap items-center">
          <img class="mb-6 md:mb-0 md:mr-10" src="uinel-assets/images/dashboard-navigations/icon1.svg" alt="">
          <div class="w-full md:w-auto">
            <h2 class="text-5xl md:text-6xl font-heading font-bold leading-relaxed">Product analysis</h2>
          </div>
        </div>
      </div>
      <div class="w-full md:w-auto px-4">
        <div class="flex items-center"><a class="inline-block py-4 px-8 mr-4 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">All</a><a class="inline-block py-4 px-8 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Settings</a></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #10

Tailwind CSS

Uinel

<div class="relative overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="hidden md:flex md:flex-col items-center fixed top-0 left-0 z-10 h-full w-32 bg-white px-4">
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="p-2 mt-12 mb-auto hover:text-blueGray-800 flex items-center focus:outline-none">
      <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
    </button>
  </div>
  <section class="text-gray-50 font-heading font-medium relative bg-blueGray-100">
    <nav class="flex justify-between w-full px-6 lg:px-12 py-8">
      <div class="pr-12 flex w-full items-center justify-between">
        <a class="md:absolute md:top-1/2 md:left-1/2 md:transform md:-translate-y-1/2 md:-translate-x-1/2" href="#">
          <img src="uinel-assets/logos/uinel-white-black.svg" alt="">
        </a>
        <div class="relative hidden md:block ml-auto">
          <img class="absolute top-1/2 transform -translate-y-2/4 pl-6" src="uinel-assets/elements/navigations/search-gray-icon.svg" alt="">
          <input class="rounded-full py-3 pl-12 pr-5 text-gray-300 font-heading font-medium text-base focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 outline-none" style="width: 145px;">
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center md:hidden text-gray-400 hover:text-gray-500 focus:outline-none">
        <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
      </button>
    </nav>
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative flex flex-col py-8 h-full w-full bg-white overflow-y-auto">

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

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full md:w-auto px-4 mb-14 md:mb-0">
        <h2 class="mb-4 text-7xl md:text-8xl font-heading font-bold leading-relaxed">Product analysis</h2>
        <ul class="flex flex-wrap items-center">
          <li class="mr-6">
            <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
              <span>Home</span>
              <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li class="mr-6">
            <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
              <span>Tasks</span>
              <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li><a class="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#">Open tasks</a></li>
        </ul>

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

Tailwind CSS

Uinel

<section x-data="{ mobileNavOpen: false }">
  <div class="px-6 lg:px-12">
    <nav class="flex justify-between">
      <div class="flex w-full items-center py-6">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/ecommerce/uistore-gray-black.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-20 2xl:ml-40 mr-auto">
          <li class="mr-16"><a class="font-medium hover:text-darkBlueGray-400" href="#">Stories</a></li>
          <li class="relative mr-16">
            <a class="flex items-center font-medium hover:text-darkBlueGray-400" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
            <div class="product-menu hidden absolute top-0 left-0 mt-24 -ml-64 pl-24 pr-16 pt-16 pb-24 bg-white rounded-lg z-50">
              <div class="absolute top-0 left-0 ml-72 w-7 h-7 bg-white transform rotate-45 -translate-y-1/2"></div>
              <div class="flex flex-wrap min-w-max -mx-4 lg:-mx-10">
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 lg:px-10">
                  <div>
                    <h3 class="mb-4 text-xl font-heading font-medium">Smartphone</h3>
                    <ul class="w-full">
                      <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">View all</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

Tailwind Component #13

Tailwind CSS

Uinel

<section class="bg-blueGray-100 pb-20 md:pb-0 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="text-gray-50 font-heading font-medium relative bg-blueGray-100">
    <nav class="flex justify-between px-6 lg:px-12 py-8">
      <div class="flex w-full items-center justify-between">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/uinel-white-black.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="mx-auto px-4 hidden xl:block hover:text-blueGray-800 focus:outline-none">
          <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
        </button>
        <div class="relative hidden xl:block">
          <img class="absolute top-1/2 transform -translate-y-2/4 pl-6 mt-px" src="uinel-assets/elements/navigations/search-gray-icon.svg" alt="">
          <input class="rounded-full py-3 pl-12 pr-5 text-gray-300 font-heading font-medium text-base focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 outline-none" style="width: 145px;">
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center xl:hidden text-gray-400 hover:text-gray-500 focus:outline-none">
        <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
      </button>
    </nav>
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative flex flex-col py-8 h-full w-full bg-white overflow-y-auto">
        <div class="flex items-center pl-16 mb-8">
          <a class="text-2xl text-gray-800 font-bold" 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 #14

Tailwind CSS

Uinel

<section class="overflow-hidden bg-darkBlueGray-50" x-data="{ mobileNavOpen: false, activeSlide: 1, slideCount: 3 }">
  <div class="bg-blue-500">
    <div class="px-6 md:px-12">
      <nav class="flex justify-between py-6">
        <div class="relative flex w-full items-center">
          <a class="hidden md:inline-block mr-12 text-white hover:text-gray-100" href="#">
            <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
          </a>
          <div class="hidden md:block flex-shrink-0 w-px h-12 bg-blue-400 opacity-40 mx-12"></div>
          <div class="relative hidden xl:flex items-center px-6 py-4 border-2 border-blue-400 border-opacity-40 rounded-xl">
            <span class="inline-block mr-6">
              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.0015 15.2219L5.43359 11.21" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.93063 12.5306C13.1138 12.5306 15.6943 9.94935 15.6943 6.76528C15.6943 3.5812 13.1138 1 9.93063 1C6.74746 1 4.16699 3.5812 4.16699 6.76528C4.16699 9.94935 6.74746 12.5306 9.93063 12.5306Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <input class="rounded-4xl text-sm text-white placeholder-white font-heading font-medium bg-blue-500 outline-none" placeholder="SEARCH">
          </div>
          <a class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2" href="#">
            <img class="h-12" src="uinel-assets/logos/ecommerce/uistore-white-white.svg" alt="">
          </a>
          <div class="hidden md:block flex-shrink-0 w-px h-12 bg-blue-400 opacity-40 ml-auto mr-12"></div>
          <div class="hidden xl:flex items-center">
            <a class="inline-block mr-10 text-white hover:text-gray-100" 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 #15

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-100" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4 mb-14 lg:mb-8">
      <div class="w-full md:w-auto px-4 mb-8 md:mb-0 flex-grow">
        <h2 class="text-7xl md:text-8xl font-heading font-bold leading-relaxed">Product analysis</h2>
      </div>
      <div class="w-full md:w-auto px-4">
        <div class="flex items-center"><a class="inline-block py-4 px-8 mr-4 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">All</a><a class="inline-block py-4 px-8 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Settings</a></div>
      </div>
    </div>
    <div class="xl:w-4/5 border-t border-darkBlueGray-100">
      <ul class="relative flex flex-wrap items-center hidden">
        <div class="absolute top-0 left-0 w-32 py-px bg-blue-500"></div>
        <li class="relative w-1/2 sm:w-auto sm:mr-16 md:mr-28"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{'text-blue-500': $refs.tab1.textContent == tab, 'text-darkBlueGray-400 hover:text-darkBlueGray-500': $refs.tab1.textContent != tab}" class="inline-block font-heading font-medium text-blue-500 leading-10" href="#">General</a></li>
        <li class="w-1/2 sm:w-auto sm:mr-16 md:mr-28"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{'text-blue-500': $refs.tab2.textContent == tab, 'text-darkBlueGray-400': $refs.tab2.textContent != tab}" class="inline-block font-heading font-medium text-darkBlueGray-400 hover:text-darkBlueGray-500 leading-10" href="#">Others</a></li>
        <li class="w-1/2 sm:w-auto sm:mr-16 md:mr-28"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{'text-blue-500': $refs.tab3.textContent == tab, 'text-darkBlueGray-400': $refs.tab3.textContent != tab}" class="inline-block font-heading font-medium text-darkBlueGray-400 hover:text-darkBlueGray-500 leading-10" href="#">Returns</a></li>
        <li><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{'text-blue-500': $refs.tab4.textContent == tab, 'text-darkBlueGray-400': $refs.tab4.textContent != tab}" class="inline-block font-heading font-medium text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Archive</a></li>
      </ul>
      <ul class="relative flex flex-wrap items-center">
        <li :class="{'border-blue-500': $refs.tab1.textContent == tab, 'border-transparent': $refs.tab1.textContent != tab}" class="relative w-1/2 sm:w-auto sm:pr-16 md:pr-28 border-t-2 border-blue-500"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{'text-blue-500': $refs.tab1.textContent == tab, 'text-darkBlueGray-400 hover:text-darkBlueGray-500': $refs.tab1.textContent != tab}" class="inline-block font-heading font-medium text-blue-500 leading-10" href="#">General</a></li>
        <li :class="{'border-blue-500': $refs.tab2.textContent == tab, 'border-transparent': $refs.tab2.textContent != tab}" class="w-1/2 sm:w-auto sm:pr-16 md:pr-28 border-t-2 border-transaprent"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{'text-blue-500': $refs.tab2.textContent == tab, 'text-darkBlueGray-400': $refs.tab2.textContent != tab}" class="inline-block font-heading font-medium text-darkBlueGray-400 hover:text-darkBlueGray-500 leading-10" href="#">Others</a></li>
        <li :class="{'border-blue-500': $refs.tab3.textContent == tab, 'border-transparent': $refs.tab3.textContent != tab}" class="w-1/2 sm:w-auto sm:pr-16 md:pr-28 border-t-2 border-transaprent"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{'text-blue-500': $refs.tab3.textContent == tab, 'text-darkBlueGray-400': $refs.tab3.textContent != tab}" class="inline-block font-heading font-medium text-darkBlueGray-400 hover:text-darkBlueGray-500 leading-10" href="#">Returns</a></li>
        <li :class="{'border-blue-500': $refs.tab4.textContent == tab, 'border-transparent': $refs.tab4.textContent != tab}" class="w-1/2 sm:w-auto sm:pr-16 md:pr-28 border-t-2 border-transaprent"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{'text-blue-500': $refs.tab4.textContent == tab, 'text-darkBlueGray-400': $refs.tab4.textContent != tab}" class="inline-block font-heading font-medium text-darkBlueGray-400 hover:text-darkBlueGray-500 leading-10" href="#">Archive</a></li>
      </ul>

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

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full lg:w-auto px-4 mb-14 lg:mb-0">
        <div class="flex flex-wrap items-center">
          <div class="flex items-center justify-center h-20 w-20 mb-6 md:mb-0 mr-12 md:mt-4 bg-white rounded-xl shadow-xl">
            <img class="h-12" src="uinel-assets/images/dashboard-navigations/bell.png" alt="">
          </div>
          <div class="w-full md:w-auto">
            <h2 class="text-7xl md:text-8xl font-heading font-bold leading-relaxed">Product analysis</h2>
            <p class="text-darkBlueGray-400 leading-8">Achieve your goals and increase profits</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="flex items-center"><a class="inline-block py-4 px-8 mr-4 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">All</a><a class="inline-block py-4 px-8 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Settings</a></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #17

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full lg:w-auto px-4 mb-14 lg:mb-0">
        <div class="flex flex-wrap items-center">
          <h2 class="mr-5 text-7xl md:text-8xl font-heading font-bold leading-relaxed">Notifications</h2>
          <img class="h-10" src="uinel-assets/images/dashboard-navigations/bell.png" alt="">
        </div>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="flex items-center"><a class="inline-block py-4 px-8 mr-4 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">All</a><a class="inline-block py-4 px-8 text-lg leading-6 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Settings</a></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #18

Tailwind CSS

Uinel

<section class="overflow-hidden">
  <div class="px-6 lg:px-12 py-6 bg-blueGray-50">
    <nav class="flex justify-between">
      <div class="flex w-full items-center">
        <a class="inline-block text-darkBlueGray-300 hover:text-darkBlueGray-400" href="#">
          <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.22603 16.1331L5.22266 11.6871" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.82614 12.5306C13.0093 12.5306 15.5898 9.94935 15.5898 6.76528C15.5898 3.5812 13.0093 1 9.82614 1C6.64297 1 4.0625 3.5812 4.0625 6.76528C4.0625 9.94935 6.64297 12.5306 9.82614 12.5306Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <ul class="hidden xl:flex px-4 ml-80 2xl:ml-96 mr-auto">
          <li class="mr-14"><a class="inline-block font-heading text-sm font-medium text-darkBlueGray-300 hover:text-darkBlueGray-400 leading-6" href="#">New tools</a></li>
          <li class="mr-14">
            <a class="inline-flex items-center text-sm font-heading font-medium text-darkBlueGray-300 hover:text-darkBlueGray-400 leading-6" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li class="mr-14"><a class="inline-block font-heading text-sm font-medium text-darkBlueGray-300 hover:text-darkBlueGray-400 leading-6" href="#">Pricing</a></li>
        </ul>
        <div class="hidden xl:flex items-center">
          <a class="relative inline-block text-darkBlueGray-300 hover:text-darkBlueGray-400" 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 #19

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="mb-9 block font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">Discover special tools</span>
      <h2 class="mb-12 font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Free your ideas</h2>
      <p class="mb-20 xl:mb-32 font-heading text-lg leading-8 text-darkBlueGray-400 max-w-lg mx-auto">Newest haretra neque non mi aliquam, finibus mollis is the nulla aliquet in molestie odio congue.</p>
    </div>
    <div class="grid lg:grid-cols-2 lg:items-center gap-14 lg:gap-16 xl:gap-44">
      <img src="uinel-assets/images/content/widget.png" alt="">
      <div class="lg:max-w-lg">
        <img class="h-18 mb-9" src="uinel-assets/elements/content/icon-orange-pencil.svg" alt="">
        <h2 class="mb-10 font-heading font-medium text-7xl xl:text-8xl leading-snug">A spatial system is a set of rules for how you measure and size your UI elements.</h2>
        <p class="mb-14 text-lg leading-6 text-darkBlueGray-400">The nulla commodo, commodo eros a, tristique lectus.</p>
        <a class="inline-flex items-center text-green-600 hover:text-green-700 border-b border-green-600 pb-1 hover:border-green-700" href="#">
          <span class="text-xl font-bold tracking-tight">Official website</span>
          <svg class="ml-4" width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.8 1L15 7H1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M11 12L15 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </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

Split-screen feature section with prototype illustration and heading

A marketing feature section headed "Free your ideas" with a centered intro, followed by a split layout: a light gray panel showing an illustrative prototype card and a blue "1.3k Templates" tile on the left, and an orange icon, large heading, supporting text, and green "Official website" text link on the right.

Tailwind Component #20

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 font-normal bg-white">
  <div class="container px-4 mx-auto">
    <div class="mb-28">
      <span class="mb-9 block font-medium uppercase tracking-widest text-xs text-gray-300 leading-4">More data</span>
      <h2 class="font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Workable</h2>
    </div>
    <div class="overflow-x-auto">
      <img class="ml-10" src="uinel-assets/elements/tables/border-top-purple.png" alt="">
      <div class="inline-block min-w-full border border-gray-100 overflow-hidden rounded-5xl">
        <table class="table-auto w-full">
          <thead>
            <tr class="border-b border-gray-100">
              <th class="min-w-max flex items-center pr-24 pl-16 lg:pl-32 h-20 font-semibold uppercase text-left text-lg bg-gray-50">
                <div class="flex">
                  <input class="mr-9 border-none form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                </div>
                <span>Our plans and pricing</span>
              </th>
              <th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 1</th><th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 2</th><th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 3</th><th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 4</th><th class="pr-16 lg:pr-32 font-semibold uppercase h-20 text-lg bg-gray-50">Feature 5</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b border-gray-100">
              <td class="relative pl-16 lg:pl-32 h-24 font-medium text-lg">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Pricing Plan Comparison Table with Feature Checkmarks

A tabular pricing comparison with a header row of plan features and rows of plan attributes, using checkboxes, numeric values, checkmarks, and colored percentage change badges. It sits beneath a section label and large 'Workable' heading, under a purple accent bar along the top edge.

Uinel UI Components by Shuffle

Choose from 285 of ready-made UI components available in Shuffle Editor.

By subscribing to the editor, you get access to all of them.

The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.

Try for Free →

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

UI Components – Uinel Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Uinel Hero Section with Header and Product Showcase

Tailwind Component #2

Get the code for 13,400+ components

Page header with title, subtitle, and action buttons

Tailwind Component #3

Get the code for 13,400+ components

Ecommerce Hero with Top Navigation and Tablet Product Mockups

Tailwind Component #4

Get the code for 13,400+ components

Product analysis page header with icon and action buttons

Tailwind Component #5

Get the code for 13,400+ components

Tailwind Component #6

Get the code for 13,400+ components

Tailwind Component #7

Get the code for 13,400+ components

Tailwind Component #8

Get the code for 13,400+ components

Tailwind Component #9

Get the code for 13,400+ components

Tailwind Component #10

Get the code for 13,400+ components

Tailwind Component #11

Get the code for 13,400+ components

Tailwind Component #12

Get the code for 13,400+ components

Tailwind Component #13

Get the code for 13,400+ components

Tailwind Component #14

Get the code for 13,400+ components

Tailwind Component #15

Get the code for 13,400+ components

Tailwind Component #16

Get the code for 13,400+ components

Tailwind Component #17

Get the code for 13,400+ components

Tailwind Component #18

Get the code for 13,400+ components

Tailwind Component #19

Get the code for 13,400+ components

Split-screen feature section with prototype illustration and heading

Tailwind Component #20

Get the code for 13,400+ components

Pricing Plan Comparison Table with Feature Checkmarks

Uinel UI Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support