UI Components in Trizzle library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

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

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #1

Tailwind CSS

Trizzle

<section>
  <div class="px-8 pt-8 pb-2 bg-gray-600">
    <div class="pb-6 border-b-2 border-gray-500">
      <h4 class="text-2xl font-bold text-white tracking-wide leading-6 mb-1">Section header</h4>
      <p class="text-xs leading-5 text-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</p>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark section header with bold heading and lorem ipsum subtitle

A dark-themed section header showing a bold white heading "Section header" with a smaller gray subtitle line below and a thin divider beneath. It is a simple text-only heading block used to introduce a content section.

Navbar generator

Tailwind Component #2

Tailwind CSS

Trizzle

<section>
  <div class="pt-5 pb-6 px-8 bg-gray-700">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full lg:w-auto px-2 mb-6 lg:mb-0">
        <h4 class="text-2xl font-bold text-white tracking-wide leading-7 mb-1">Overview</h4>
        <p class="text-xs text-gray-300">Get daily review of your recent activities</p>
      </div>
      <div class="w-full lg:w-auto px-2">
        <div class="sm:flex items-center">
          <div class="w-full sm:w-auto mb-6 sm:mb-0 sm:mr-4">
            <div class="flex flex-wrap items-center -mb-2">
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 mr-4 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 mr-4 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.71 19.29L17 15.61C18.4401 13.8144 19.1375 11.5353 18.9488 9.24133C18.7601 6.94733 17.6997 4.81281 15.9855 3.27667C14.2714 1.74053 12.0338 0.919537 9.73295 0.982497C7.43207 1.04546 5.24275 1.98759 3.61517 3.61517C1.98759 5.24275 1.04546 7.43207 0.982497 9.73295C0.919537 12.0338 1.74053 14.2714 3.27667 15.9855C4.81281 17.6997 6.94733 18.7601 9.24133 18.9488C11.5353 19.1375 13.8144 18.4401 15.61 17L19.29 20.68C19.383 20.7738 19.4936 20.8482 19.6154 20.8989C19.7373 20.9497 19.868 20.9758 20 20.9758C20.132 20.9758 20.2627 20.9497 20.3846 20.8989C20.5065 20.8482 20.6171 20.7738 20.71 20.68C20.8903 20.4936 20.991 20.2444 20.991 19.985C20.991 19.7257 20.8903 19.4765 20.71 19.29ZM10 17C8.61556 17 7.26218 16.5895 6.11103 15.8203C4.95989 15.0511 4.06268 13.9579 3.53287 12.6788C3.00306 11.3997 2.86443 9.99226 3.13453 8.63439C3.40463 7.27653 4.07131 6.02925 5.05028 5.05028C6.02925 4.07131 7.27653 3.40463 8.63439 3.13453C9.99226 2.86443 11.3997 3.00306 12.6788 3.53287C13.9579 4.06268 15.0511 4.95989 15.8203 6.11103C16.5895 7.26218 17 8.61556 17 10C17 11.8565 16.2625 13.637 14.9498 14.9498C13.637 16.2625 11.8565 17 10 17Z" fill="currentColor"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Dark dashboard header with Overview title and user controls

A dark top header bar showing an Overview heading with a supporting subtitle on the left, and icon buttons for messages, notifications, and search plus a user avatar with name and dropdown chevron on the right. It functions as the page header for a dashboard-style application.

Navbar generator

Tailwind Component #3

Tailwind CSS

Trizzle

<section>
  <div class="px-8 pt-8 pb-2 bg-gray-600">
    <div class="pb-6 border-b-2 border-gray-500">
      <div class="flex justify-between -mx-4">
        <div class="px-4">
          <h4 class="text-2xl font-bold text-white tracking-wide leading-6 mb-1">Section header</h4>
          <p class="text-xs leading-5 text-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</p>
        </div>
        <div class="px-4">
          <a class="inline-block text-gray-400 hover:text-gray-300" href="#">
            <svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="currentColor"></path>
            </svg>
          </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

Navbar generator

Tailwind Component #4

Tailwind CSS

Trizzle

<section>
  <div class="pt-5 pb-6 px-8 bg-gray-700">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full sm:w-auto px-2 mb-6 lg:mb-0">
        <h4 class="text-2xl font-bold text-white tracking-wide leading-7 mb-1">Overview</h4>
        <div class="flex items-center">
          <a class="text-xs text-gray-300" href="#">Dashboard</a>
          <span class="inline-block h-1 w-1 mx-2 bg-gray-300 rounded-full"></span>
          <a class="text-xs text-gray-300" href="#">Overview</a>
        </div>
      </div>
      <div class="w-full lg:w-auto px-2">
        <div class="sm:flex items-center">
          <div class="w-full sm:w-auto mb-6 sm:mb-0 sm:mr-4">
            <div class="flex flex-wrap items-center -mb-2">
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 mr-4 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 mr-4 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
                </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #5

Tailwind CSS

Trizzle

<section>
  <div class="pt-5 pb-6 px-8 bg-gray-700">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-6 md:mb-0">
        <h4 class="text-2xl font-bold text-white tracking-wide leading-3">Overview</h4>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="sm:flex items-center">
          <div class="w-full sm:w-auto mb-6 sm:mb-0 sm:mr-4">
            <div class="flex flex-wrap items-center -mb-2">
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 mr-4 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 mr-4 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.71 19.29L17 15.61C18.4401 13.8144 19.1375 11.5353 18.9488 9.24133C18.7601 6.94733 17.6997 4.81281 15.9855 3.27667C14.2714 1.74053 12.0338 0.919537 9.73295 0.982497C7.43207 1.04546 5.24275 1.98759 3.61517 3.61517C1.98759 5.24275 1.04546 7.43207 0.982497 9.73295C0.919537 12.0338 1.74053 14.2714 3.27667 15.9855C4.81281 17.6997 6.94733 18.7601 9.24133 18.9488C11.5353 19.1375 13.8144 18.4401 15.61 17L19.29 20.68C19.383 20.7738 19.4936 20.8482 19.6154 20.8989C19.7373 20.9497 19.868 20.9758 20 20.9758C20.132 20.9758 20.2627 20.9497 20.3846 20.8989C20.5065 20.8482 20.6171 20.7738 20.71 20.68C20.8903 20.4936 20.991 20.2444 20.991 19.985C20.991 19.7257 20.8903 19.4765 20.71 19.29ZM10 17C8.61556 17 7.26218 16.5895 6.11103 15.8203C4.95989 15.0511 4.06268 13.9579 3.53287 12.6788C3.00306 11.3997 2.86443 9.99226 3.13453 8.63439C3.40463 7.27653 4.07131 6.02925 5.05028 5.05028C6.02925 4.07131 7.27653 3.40463 8.63439 3.13453C9.99226 2.86443 11.3997 3.00306 12.6788 3.53287C13.9579 4.06268 15.0511 4.95989 15.8203 6.11103C16.5895 7.26218 17 8.61556 17 10C17 11.8565 16.2625 13.637 14.9498 14.9498C13.637 16.2625 11.8565 17 10 17Z" fill="currentColor"></path>
                </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #6

Tailwind CSS

Trizzle

<section>
  <div class="px-8 pt-8 pb-2 bg-gray-600">
    <div class="pb-6 border-b-2 border-gray-500">
      <div class="flex flex-wrap justify-between -mx-4">
        <div class="w-full lg:w-auto px-4 mb-5 lg:mb-0">
          <h4 class="text-2xl font-bold text-white tracking-wide leading-6 mb-1">Section header</h4>
          <p class="text-xs leading-5 text-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</p>
        </div>
        <div class="w-full lg:w-auto px-4">
          <div class="flex flex-wrap items-center"><a class="inline-flex h-9 py-1 px-4 mb-2 mr-4 items-center text-center text-sm font-bold text-white hover:bg-gray-700 transition duration-200 rounded-lg" href="#">Secondary</a><a class="inline-flex h-9 py-1 px-4 mb-2 mr-4 items-center text-center text-sm font-bold text-white bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-200 rounded-lg" href="#">Secondary</a><a class="inline-flex h-9 py-1 px-4 mb-2 mr-4 items-center text-center text-sm font-bold text-white bg-blue-800 hover:bg-blue-700 transition duration-200 rounded-lg" href="#">Secondary</a><a class="inline-flex h-9 py-1 px-4 mb-2 items-center text-center text-sm font-bold text-white bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-lg" href="#">Primary</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #7

Tailwind CSS

Trizzle

<section>
  <div class="px-8 pt-8 pb-2 bg-gray-600">
    <div class="pb-6 border-b-2 border-gray-500">
      <div class="flex flex-wrap items-center justify-between -mx-4">
        <div class="w-full md:w-1/2 lg:w-auto px-4 mb-6 md:mb-0">
          <h4 class="text-2xl font-bold text-white tracking-wide leading-6 mb-1">Section header</h4>
          <p class="text-xs leading-5 text-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-auto px-4">
          <div class="md:flex items-center">
            <div class="flex px-4 h-8 mb-4 md:mb-0 md:mr-4 max-w-sm items-center border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="flex-shrink-0">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
                </svg>
              </span>
              <input class="block pl-2 text-sm font-medium text-gray-300 placeholder-gray-400 bg-transparent outline-none" id="pageHeaderInput8-1" type="search" placeholder="Search...">
            </div>
            <button class="inline-flex h-8 py-1 px-4 mr-4 items-center text-center text-sm font-bold text-white bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-lg">Primary</button>
          </div>
        </div>
      </div>
    </div>
  </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #8

Tailwind CSS

Trizzle

<section>
  <div class="pt-5 pb-6 px-8 bg-gray-700">
    <div class="flex flex-col sm:flex-row flex-wrap items-end justify-end">
      <div class="w-auto mb-6 sm:mb-0 sm:mr-4">
        <div class="flex flex-wrap items-center -mb-2">
          <a class="inline-flex items-center justify-center w-12 h-12 mb-2 mr-4 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
            <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-flex items-center justify-center w-12 h-12 mb-2 mr-4 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
            <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-flex items-center justify-center w-12 h-12 mb-2 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
            <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.71 19.29L17 15.61C18.4401 13.8144 19.1375 11.5353 18.9488 9.24133C18.7601 6.94733 17.6997 4.81281 15.9855 3.27667C14.2714 1.74053 12.0338 0.919537 9.73295 0.982497C7.43207 1.04546 5.24275 1.98759 3.61517 3.61517C1.98759 5.24275 1.04546 7.43207 0.982497 9.73295C0.919537 12.0338 1.74053 14.2714 3.27667 15.9855C4.81281 17.6997 6.94733 18.7601 9.24133 18.9488C11.5353 19.1375 13.8144 18.4401 15.61 17L19.29 20.68C19.383 20.7738 19.4936 20.8482 19.6154 20.8989C19.7373 20.9497 19.868 20.9758 20 20.9758C20.132 20.9758 20.2627 20.9497 20.3846 20.8989C20.5065 20.8482 20.6171 20.7738 20.71 20.68C20.8903 20.4936 20.991 20.2444 20.991 19.985C20.991 19.7257 20.8903 19.4765 20.71 19.29ZM10 17C8.61556 17 7.26218 16.5895 6.11103 15.8203C4.95989 15.0511 4.06268 13.9579 3.53287 12.6788C3.00306 11.3997 2.86443 9.99226 3.13453 8.63439C3.40463 7.27653 4.07131 6.02925 5.05028 5.05028C6.02925 4.07131 7.27653 3.40463 8.63439 3.13453C9.99226 2.86443 11.3997 3.00306 12.6788 3.53287C13.9579 4.06268 15.0511 4.95989 15.8203 6.11103C16.5895 7.26218 17 8.61556 17 10C17 11.8565 16.2625 13.637 14.9498 14.9498C13.637 16.2625 11.8565 17 10 17Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-auto">
        <a class="inline-flex items-center justify-center py-2 pl-2 pr-3 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #9

Tailwind CSS

Trizzle

<section>
  <div class="py-5 px-8 bg-gray-700">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-6 md:mb-0">
        <div class="inline-flex h-14 w-full max-w-xs p-3 items-center bg-gray-700 border border-gray-400 rounded-lg">
          <a class="inline-block text-gray-400 hover:text-gray-300" href="#">
            <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.7099 19.29L16.9999 15.61C18.44 13.8144 19.1374 11.5353 18.9487 9.24133C18.76 6.94733 17.6996 4.81281 15.9854 3.27667C14.2713 1.74053 12.0337 0.919537 9.73283 0.982497C7.43194 1.04546 5.24263 1.98759 3.61505 3.61517C1.98747 5.24275 1.04534 7.43207 0.982375 9.73295C0.919414 12.0338 1.74041 14.2714 3.27655 15.9855C4.81269 17.6997 6.94721 18.7601 9.2412 18.9488C11.5352 19.1375 13.8143 18.4401 15.6099 17L19.2899 20.68C19.3829 20.7738 19.4935 20.8482 19.6153 20.8989C19.7372 20.9497 19.8679 20.9758 19.9999 20.9758C20.1319 20.9758 20.2626 20.9497 20.3845 20.8989C20.5063 20.8482 20.6169 20.7738 20.7099 20.68C20.8901 20.4936 20.9909 20.2444 20.9909 19.985C20.9909 19.7257 20.8901 19.4765 20.7099 19.29ZM9.9999 17C8.61544 17 7.26206 16.5895 6.11091 15.8203C4.95977 15.0511 4.06256 13.9579 3.53275 12.6788C3.00293 11.3997 2.86431 9.99226 3.13441 8.63439C3.4045 7.27653 4.07119 6.02925 5.05016 5.05028C6.02912 4.07131 7.27641 3.40463 8.63427 3.13453C9.99214 2.86443 11.3996 3.00306 12.6787 3.53287C13.9578 4.06268 15.051 4.95989 15.8202 6.11103C16.5894 7.26218 16.9999 8.61556 16.9999 10C16.9999 11.8565 16.2624 13.637 14.9497 14.9498C13.6369 16.2625 11.8564 17 9.9999 17Z" fill="currentColor"></path>
            </svg>
          </a>
          <input class="pl-3 bg-transparent text-gray-100 placeholder-gray-400 outline-none" id="headerInput5-1" type="text" placeholder="Search...">
        </div>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="sm:flex items-center">
          <div class="w-full sm:w-auto mb-6 sm:mb-0 sm:mr-4">
            <div class="flex flex-wrap items-center -mb-2">
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 mr-4 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 mb-2 p-1 text-gray-300 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-150 rounded-full" href="#">
                <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #10

Tailwind CSS

Trizzle

<section x-data="{ tab: 'tab1' }">
  <div class="px-8 pt-8 pb-4 bg-gray-600">
    <div class="pb-6 border-b-2 border-gray-500">
      <div class="flex flex-wrap justify-between -mx-4">
        <div class="w-full lg:w-auto px-4 mb-5 lg:mb-0">
          <h4 class="text-2xl font-bold text-white tracking-wide leading-6 mb-1">Section header</h4>
          <p class="text-xs leading-5 text-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</p>
        </div>
        <div class="w-full lg:w-auto px-4">
          <div class="flex flex-wrap items-center"><a class="inline-flex h-9 py-1 px-4 mb-2 mr-4 items-center text-center text-sm font-bold text-white hover:bg-gray-700 transition duration-200 rounded-lg" href="#">Secondary</a><a class="inline-flex h-9 py-1 px-4 mb-2 mr-4 items-center text-center text-sm font-bold text-white bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-200 rounded-lg" href="#">Secondary</a><a class="inline-flex h-9 py-1 px-4 mb-2 mr-4 items-center text-center text-sm font-bold text-white bg-blue-800 hover:bg-blue-700 transition duration-200 rounded-lg" href="#">Secondary</a><a class="inline-flex h-9 py-1 px-4 mb-2 items-center text-center text-sm font-bold text-white bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-lg" href="#">Primary</a></div>
        </div>
      </div>
      <ul class="flex flex-wrap items-center mt-5 lg:mt-4 -mb-2">
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab1'" :class="{'bg-gray-500': tab == 'tab1', 'bg-transparent': tab !== 'tab1'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 bg-gray-500 rounded-lg" href="#">Tab 1</a></li>
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab2'" :class="{'bg-gray-500': tab == 'tab2', 'bg-transparent': tab !== 'tab2'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 2</a></li>
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab3'" :class="{'bg-gray-500': tab == 'tab3', 'bg-transparent': tab !== 'tab3'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 3</a></li>
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab4'" :class="{'bg-gray-500': tab == 'tab4', 'bg-transparent': tab !== 'tab4'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 4</a></li>
        <li class="mb-2"><a x-on:click.prevent="tab = 'tab5'" :class="{'bg-gray-500': tab == 'tab5', 'bg-transparent': tab !== 'tab5'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 5</a></li>
      </ul>
    </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

Navbar generator

Tailwind Component #11

Tailwind CSS

Trizzle

<section x-data="{ tab: 'tab1' }">
  <div class="px-8 pt-8 pb-4 bg-gray-600">
    <div class="pb-6 border-b-2 border-gray-500">
      <div class="flex flex-wrap justify-between -mx-4">
        <div class="w-full lg:w-auto px-4 mb-5 lg:mb-0">
          <h4 class="text-2xl font-bold text-white tracking-wide leading-6 mb-1">Section header</h4>
          <p class="text-xs leading-5 text-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</p>
        </div>
        <div class="w-full lg:w-auto px-4">
          <div class="md:flex items-center">
            <div class="flex px-4 h-8 mb-4 md:mb-0 md:mr-4 max-w-sm items-center border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="flex-shrink-0">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
                </svg>
              </span>
              <input class="block pl-2 text-sm font-medium text-gray-300 placeholder-gray-400 bg-transparent outline-none" id="pageHeaderInput8-1" type="search" placeholder="Search...">
            </div>
            <button class="inline-flex h-8 py-1 px-4 mr-4 items-center text-center text-sm font-bold text-white bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-lg">Primary</button>
          </div>
        </div>
      </div>
      <ul class="flex flex-wrap items-center mt-5 lg:mt-4 -mb-2">
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab1'" :class="{'bg-gray-500': tab == 'tab1', 'bg-transparent': tab !== 'tab1'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 bg-gray-500 rounded-lg" href="#">Tab 1</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

Navbar generator

Tailwind Component #12

Tailwind CSS

Trizzle

<section>
  <div class="p-8 bg-gray-600">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-6 md:mb-0">
        <h4 class="text-2xl font-bold text-white leading-5">Subpage name</h4>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto p-2">
            <a class="inline-flex h-12 py-1 px-6 items-center font-semibold text-gray-200 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-200 rounded-lg" href="#">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.5 9C16.279 9 16.067 9.0878 15.9107 9.24408C15.7545 9.40036 15.6667 9.61232 15.6667 9.83333V14.8333C15.6667 15.0543 15.5789 15.2663 15.4226 15.4226C15.2663 15.5789 15.0543 15.6667 14.8333 15.6667H3.16666C2.94564 15.6667 2.73368 15.5789 2.5774 15.4226C2.42112 15.2663 2.33332 15.0543 2.33332 14.8333V3.16667C2.33332 2.94565 2.42112 2.73369 2.5774 2.57741C2.73368 2.42113 2.94564 2.33333 3.16666 2.33333H8.16666C8.38767 2.33333 8.59963 2.24554 8.75591 2.08926C8.91219 1.93298 8.99999 1.72101 8.99999 1.5C8.99999 1.27899 8.91219 1.06702 8.75591 0.910744C8.59963 0.754464 8.38767 0.666667 8.16666 0.666667H3.16666C2.50362 0.666667 1.86773 0.930059 1.39889 1.3989C0.930049 1.86774 0.666656 2.50363 0.666656 3.16667V14.8333C0.666656 15.4964 0.930049 16.1323 1.39889 16.6011C1.86773 17.0699 2.50362 17.3333 3.16666 17.3333H14.8333C15.4964 17.3333 16.1322 17.0699 16.6011 16.6011C17.0699 16.1323 17.3333 15.4964 17.3333 14.8333V9.83333C17.3333 9.61232 17.2455 9.40036 17.0892 9.24408C16.933 9.0878 16.721 9 16.5 9ZM3.99999 9.63333V13.1667C3.99999 13.3877 4.08779 13.5996 4.24407 13.7559C4.40035 13.9122 4.61231 14 4.83332 14H8.36666C8.47633 14.0006 8.58505 13.9796 8.68658 13.9381C8.78811 13.8967 8.88046 13.8356 8.95832 13.7583L14.725 7.98333L17.0917 5.66667C17.1698 5.5892 17.2318 5.49703 17.2741 5.39548C17.3164 5.29393 17.3382 5.18501 17.3382 5.075C17.3382 4.96499 17.3164 4.85607 17.2741 4.75452C17.2318 4.65297 17.1698 4.5608 17.0917 4.48333L13.5583 0.908333C13.4809 0.830226 13.3887 0.768231 13.2871 0.725924C13.1856 0.683617 13.0767 0.661835 12.9667 0.661835C12.8566 0.661835 12.7477 0.683617 12.6462 0.725924C12.5446 0.768231 12.4525 0.830226 12.375 0.908333L10.025 3.26667L4.24166 9.04167C4.16442 9.11953 4.10332 9.21188 4.06185 9.31341C4.02038 9.41494 3.99936 9.52366 3.99999 9.63333ZM12.9667 2.675L15.325 5.03333L14.1417 6.21667L11.7833 3.85833L12.9667 2.675ZM5.66666 9.975L10.6083 5.03333L12.9667 7.39167L8.02499 12.3333H5.66666V9.975Z" fill="#3D485B"></path>
              </svg>
              <span class="ml-2">Edit</span>
            </a>
          </div>
          <div class="w-auto p-2">
            <a class="inline-flex h-12 py-1 px-5 items-center font-semibold text-blue-50 bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-lg" href="#">
              <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.3333 6.16668H8.33334V1.16668C8.33334 0.945663 8.24555 0.733702 8.08927 0.577421C7.93299 0.421141 7.72102 0.333344 7.50001 0.333344C7.279 0.333344 7.06703 0.421141 6.91075 0.577421C6.75447 0.733702 6.66668 0.945663 6.66668 1.16668V6.16668H1.66668C1.44566 6.16668 1.2337 6.25447 1.07742 6.41075C0.921141 6.56703 0.833344 6.779 0.833344 7.00001C0.833344 7.22102 0.921141 7.43299 1.07742 7.58927C1.2337 7.74555 1.44566 7.83334 1.66668 7.83334H6.66668V12.8333C6.66668 13.0544 6.75447 13.2663 6.91075 13.4226C7.06703 13.5789 7.279 13.6667 7.50001 13.6667C7.72102 13.6667 7.93299 13.5789 8.08927 13.4226C8.24555 13.2663 8.33334 13.0544 8.33334 12.8333V7.83334H13.3333C13.5544 7.83334 13.7663 7.74555 13.9226 7.58927C14.0789 7.43299 14.1667 7.22102 14.1667 7.00001C14.1667 6.779 14.0789 6.56703 13.9226 6.41075C13.7663 6.25447 13.5544 6.16668 13.3333 6.16668Z" fill="#5E81FC"></path>
              </svg>
              <span class="ml-2">Create</span>
            </a>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #13

Tailwind CSS

Trizzle

<section x-data="{ tab: ''}" x-init="tab = $refs.tab1.textContent">
  <div class="p-8 bg-gray-600">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-8 md:mb-0">
        <h4 class="text-2xl font-bold text-white leading-5">Subpage name</h4>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto p-2">
            <a class="inline-flex h-12 py-1 px-6 items-center font-semibold text-gray-200 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-200 rounded-lg" href="#">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.5 9C16.279 9 16.067 9.0878 15.9107 9.24408C15.7545 9.40036 15.6667 9.61232 15.6667 9.83333V14.8333C15.6667 15.0543 15.5789 15.2663 15.4226 15.4226C15.2663 15.5789 15.0543 15.6667 14.8333 15.6667H3.16666C2.94564 15.6667 2.73368 15.5789 2.5774 15.4226C2.42112 15.2663 2.33332 15.0543 2.33332 14.8333V3.16667C2.33332 2.94565 2.42112 2.73369 2.5774 2.57741C2.73368 2.42113 2.94564 2.33333 3.16666 2.33333H8.16666C8.38767 2.33333 8.59963 2.24554 8.75591 2.08926C8.91219 1.93298 8.99999 1.72101 8.99999 1.5C8.99999 1.27899 8.91219 1.06702 8.75591 0.910744C8.59963 0.754464 8.38767 0.666667 8.16666 0.666667H3.16666C2.50362 0.666667 1.86773 0.930059 1.39889 1.3989C0.930049 1.86774 0.666656 2.50363 0.666656 3.16667V14.8333C0.666656 15.4964 0.930049 16.1323 1.39889 16.6011C1.86773 17.0699 2.50362 17.3333 3.16666 17.3333H14.8333C15.4964 17.3333 16.1322 17.0699 16.6011 16.6011C17.0699 16.1323 17.3333 15.4964 17.3333 14.8333V9.83333C17.3333 9.61232 17.2455 9.40036 17.0892 9.24408C16.933 9.0878 16.721 9 16.5 9ZM3.99999 9.63333V13.1667C3.99999 13.3877 4.08779 13.5996 4.24407 13.7559C4.40035 13.9122 4.61231 14 4.83332 14H8.36666C8.47633 14.0006 8.58505 13.9796 8.68658 13.9381C8.78811 13.8967 8.88046 13.8356 8.95832 13.7583L14.725 7.98333L17.0917 5.66667C17.1698 5.5892 17.2318 5.49703 17.2741 5.39548C17.3164 5.29393 17.3382 5.18501 17.3382 5.075C17.3382 4.96499 17.3164 4.85607 17.2741 4.75452C17.2318 4.65297 17.1698 4.5608 17.0917 4.48333L13.5583 0.908333C13.4809 0.830226 13.3887 0.768231 13.2871 0.725924C13.1856 0.683617 13.0767 0.661835 12.9667 0.661835C12.8566 0.661835 12.7477 0.683617 12.6462 0.725924C12.5446 0.768231 12.4525 0.830226 12.375 0.908333L10.025 3.26667L4.24166 9.04167C4.16442 9.11953 4.10332 9.21188 4.06185 9.31341C4.02038 9.41494 3.99936 9.52366 3.99999 9.63333ZM12.9667 2.675L15.325 5.03333L14.1417 6.21667L11.7833 3.85833L12.9667 2.675ZM5.66666 9.975L10.6083 5.03333L12.9667 7.39167L8.02499 12.3333H5.66666V9.975Z" fill="#3D485B"></path>
              </svg>
              <span class="ml-2">Edit</span>
            </a>
          </div>
          <div class="w-auto p-2">
            <a class="inline-flex h-12 py-1 px-5 items-center font-semibold text-blue-50 bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-lg" href="#">
              <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.3333 6.16668H8.33334V1.16668C8.33334 0.945663 8.24555 0.733702 8.08927 0.577421C7.93299 0.421141 7.72102 0.333344 7.50001 0.333344C7.279 0.333344 7.06703 0.421141 6.91075 0.577421C6.75447 0.733702 6.66668 0.945663 6.66668 1.16668V6.16668H1.66668C1.44566 6.16668 1.2337 6.25447 1.07742 6.41075C0.921141 6.56703 0.833344 6.779 0.833344 7.00001C0.833344 7.22102 0.921141 7.43299 1.07742 7.58927C1.2337 7.74555 1.44566 7.83334 1.66668 7.83334H6.66668V12.8333C6.66668 13.0544 6.75447 13.2663 6.91075 13.4226C7.06703 13.5789 7.279 13.6667 7.50001 13.6667C7.72102 13.6667 7.93299 13.5789 8.08927 13.4226C8.24555 13.2663 8.33334 13.0544 8.33334 12.8333V7.83334H13.3333C13.5544 7.83334 13.7663 7.74555 13.9226 7.58927C14.0789 7.43299 14.1667 7.22102 14.1667 7.00001C14.1667 6.779 14.0789 6.56703 13.9226 6.41075C13.7663 6.25447 13.5544 6.16668 13.3333 6.16668Z" fill="#5E81FC"></path>
              </svg>
              <span class="ml-2">Create</span>
            </a>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #14

Tailwind CSS

Trizzle

<section x-data="{ tab: 'tab1' }">
  <div class="px-8 pt-8 pb-4 bg-gray-600">
    <div class="pb-6 border-b-2 border-gray-500">
      <div class="flex justify-between -mx-4">
        <div class="px-4">
          <h4 class="text-2xl font-bold text-white tracking-wide leading-6 mb-1">Section header</h4>
          <p class="text-xs leading-5 text-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</p>
        </div>
        <div class="px-4">
          <a class="inline-block text-gray-400 hover:text-gray-300" href="#">
            <svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 4C2.39556 4 2.78224 3.8827 3.11114 3.66294C3.44004 3.44318 3.69639 3.13082 3.84776 2.76537C3.99914 2.39992 4.03874 1.99778 3.96157 1.60982C3.8844 1.22186 3.69392 0.865492 3.41421 0.585787C3.13451 0.306082 2.77814 0.115601 2.39018 0.0384303C2.00222 -0.0387401 1.60009 0.000866562 1.23463 0.152242C0.869182 0.303617 0.556825 0.559962 0.337062 0.88886C0.117299 1.21776 1.07779e-06 1.60444 1.07779e-06 2C1.07779e-06 2.53043 0.210715 3.03914 0.585788 3.41421C0.960861 3.78929 1.46957 4 2 4ZM2 14C1.60444 14 1.21776 14.1173 0.888861 14.3371C0.559963 14.5568 0.303617 14.8692 0.152242 15.2346C0.000866562 15.6001 -0.0387401 16.0022 0.0384303 16.3902C0.115601 16.7781 0.306083 17.1345 0.585788 17.4142C0.865493 17.6939 1.22186 17.8844 1.60982 17.9616C1.99778 18.0387 2.39992 17.9991 2.76537 17.8478C3.13082 17.6964 3.44318 17.44 3.66294 17.1111C3.8827 16.7822 4 16.3956 4 16C4 15.4696 3.78929 14.9609 3.41421 14.5858C3.03914 14.2107 2.53043 14 2 14ZM2 7C1.60444 7 1.21776 7.1173 0.888861 7.33706C0.559963 7.55682 0.303617 7.86918 0.152242 8.23463C0.000866562 8.60009 -0.0387401 9.00222 0.0384303 9.39018C0.115601 9.77814 0.306083 10.1345 0.585788 10.4142C0.865493 10.6939 1.22186 10.8844 1.60982 10.9616C1.99778 11.0387 2.39992 10.9991 2.76537 10.8478C3.13082 10.6964 3.44318 10.44 3.66294 10.1111C3.8827 9.78224 4 9.39556 4 9C4 8.46957 3.78929 7.96086 3.41421 7.58579C3.03914 7.21071 2.53043 7 2 7Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <ul class="flex flex-wrap items-center mt-5 lg:mt-4 -mb-2">
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab1'" :class="{'bg-gray-500': tab == 'tab1', 'bg-transparent': tab !== 'tab1'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 bg-gray-500 rounded-lg" href="#">Tab 1</a></li>
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab2'" :class="{'bg-gray-500': tab == 'tab2', 'bg-transparent': tab !== 'tab2'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 2</a></li>
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab3'" :class="{'bg-gray-500': tab == 'tab3', 'bg-transparent': tab !== 'tab3'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 3</a></li>
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab4'" :class="{'bg-gray-500': tab == 'tab4', 'bg-transparent': tab !== 'tab4'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 4</a></li>
        <li class="mb-2"><a x-on:click.prevent="tab = 'tab5'" :class="{'bg-gray-500': tab == 'tab5', 'bg-transparent': tab !== 'tab5'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 5</a></li>
      </ul>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #15

Tailwind CSS

Trizzle

<section x-data="{ tab: 'tab1' }">
  <div class="px-8 pt-8 pb-4 bg-gray-600">
    <div class="pb-6 border-b-2 border-gray-500">
      <h4 class="text-2xl font-bold text-white tracking-wide leading-6 mb-1">Section header</h4>
      <p class="text-xs leading-5 text-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</p>
      <ul class="flex flex-wrap items-center mt-5 lg:mt-4 -mb-2">
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab1'" :class="{'bg-gray-500': tab == 'tab1', 'bg-transparent': tab !== 'tab1'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 bg-gray-500 rounded-lg" href="#">Tab 1</a></li>
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab2'" :class="{'bg-gray-500': tab == 'tab2', 'bg-transparent': tab !== 'tab2'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 2</a></li>
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab3'" :class="{'bg-gray-500': tab == 'tab3', 'bg-transparent': tab !== 'tab3'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 3</a></li>
        <li class="mb-2 mr-8"><a x-on:click.prevent="tab = 'tab4'" :class="{'bg-gray-500': tab == 'tab4', 'bg-transparent': tab !== 'tab4'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 4</a></li>
        <li class="mb-2"><a x-on:click.prevent="tab = 'tab5'" :class="{'bg-gray-500': tab == 'tab5', 'bg-transparent': tab !== 'tab5'}" class="inline-block py-1.5 px-4 text-sm text-white font-bold leading-6 hover:bg-gray-700 rounded-lg" href="#">Tab 5</a></li>
      </ul>
    </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

Navbar generator

Tailwind Component #16

Tailwind CSS

Trizzle

<section>
  <div class="p-8 bg-gray-600">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-6 md:mb-0">
        <div class="flex items-center">
          <img class="w-14 h-14 rounded-full mr-3" src="trizzle-assets/images/placeholder-subpage-avatar.png" alt="">
          <h4 class="text-2xl font-bold text-white leading-5">Subpage name</h4>
        </div>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto p-2">
            <a class="inline-flex h-12 py-1 px-6 items-center font-semibold text-gray-200 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-200 rounded-lg" href="#">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.5 9C16.279 9 16.067 9.0878 15.9107 9.24408C15.7545 9.40036 15.6667 9.61232 15.6667 9.83333V14.8333C15.6667 15.0543 15.5789 15.2663 15.4226 15.4226C15.2663 15.5789 15.0543 15.6667 14.8333 15.6667H3.16666C2.94564 15.6667 2.73368 15.5789 2.5774 15.4226C2.42112 15.2663 2.33332 15.0543 2.33332 14.8333V3.16667C2.33332 2.94565 2.42112 2.73369 2.5774 2.57741C2.73368 2.42113 2.94564 2.33333 3.16666 2.33333H8.16666C8.38767 2.33333 8.59963 2.24554 8.75591 2.08926C8.91219 1.93298 8.99999 1.72101 8.99999 1.5C8.99999 1.27899 8.91219 1.06702 8.75591 0.910744C8.59963 0.754464 8.38767 0.666667 8.16666 0.666667H3.16666C2.50362 0.666667 1.86773 0.930059 1.39889 1.3989C0.930049 1.86774 0.666656 2.50363 0.666656 3.16667V14.8333C0.666656 15.4964 0.930049 16.1323 1.39889 16.6011C1.86773 17.0699 2.50362 17.3333 3.16666 17.3333H14.8333C15.4964 17.3333 16.1322 17.0699 16.6011 16.6011C17.0699 16.1323 17.3333 15.4964 17.3333 14.8333V9.83333C17.3333 9.61232 17.2455 9.40036 17.0892 9.24408C16.933 9.0878 16.721 9 16.5 9ZM3.99999 9.63333V13.1667C3.99999 13.3877 4.08779 13.5996 4.24407 13.7559C4.40035 13.9122 4.61231 14 4.83332 14H8.36666C8.47633 14.0006 8.58505 13.9796 8.68658 13.9381C8.78811 13.8967 8.88046 13.8356 8.95832 13.7583L14.725 7.98333L17.0917 5.66667C17.1698 5.5892 17.2318 5.49703 17.2741 5.39548C17.3164 5.29393 17.3382 5.18501 17.3382 5.075C17.3382 4.96499 17.3164 4.85607 17.2741 4.75452C17.2318 4.65297 17.1698 4.5608 17.0917 4.48333L13.5583 0.908333C13.4809 0.830226 13.3887 0.768231 13.2871 0.725924C13.1856 0.683617 13.0767 0.661835 12.9667 0.661835C12.8566 0.661835 12.7477 0.683617 12.6462 0.725924C12.5446 0.768231 12.4525 0.830226 12.375 0.908333L10.025 3.26667L4.24166 9.04167C4.16442 9.11953 4.10332 9.21188 4.06185 9.31341C4.02038 9.41494 3.99936 9.52366 3.99999 9.63333ZM12.9667 2.675L15.325 5.03333L14.1417 6.21667L11.7833 3.85833L12.9667 2.675ZM5.66666 9.975L10.6083 5.03333L12.9667 7.39167L8.02499 12.3333H5.66666V9.975Z" fill="#3D485B"></path>
              </svg>
              <span class="ml-2">Edit</span>
            </a>
          </div>
          <div class="w-auto p-2"><a class="inline-flex h-12 py-1 px-5 items-center font-semibold text-blue-50 bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-lg" href="#">Publish</a></div>
        </div>
      </div>
    </div>
  </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #17

Tailwind CSS

Trizzle

<section>
  <div class="p-8 bg-gray-600">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-6 md:mb-0">
        <div>
          <ul class="flex mb-2 items-center">
            <li><a class="text-xs text-gray-300 opacity-50 hover:opacity-80" href="#">Dashboard</a></li>
            <div class="w-1 h-1 mx-1 transform translate-y-1/2 bg-gray-300 bg-opacity-50 rounded-full"></div>
            <li><a class="text-xs text-gray-300 opacity-50 hover:opacity-80" href="#">Overview</a></li>
          </ul>
          <h4 class="text-2xl font-bold text-white leading-5">Subpage name</h4>
        </div>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto p-2">
            <a class="inline-flex h-12 py-1 px-6 items-center font-semibold text-gray-200 bg-gray-500 hover:bg-gray-400 hover:bg-opacity-40 transition duration-200 rounded-lg" href="#">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.5 9C16.279 9 16.067 9.0878 15.9107 9.24408C15.7545 9.40036 15.6667 9.61232 15.6667 9.83333V14.8333C15.6667 15.0543 15.5789 15.2663 15.4226 15.4226C15.2663 15.5789 15.0543 15.6667 14.8333 15.6667H3.16666C2.94564 15.6667 2.73368 15.5789 2.5774 15.4226C2.42112 15.2663 2.33332 15.0543 2.33332 14.8333V3.16667C2.33332 2.94565 2.42112 2.73369 2.5774 2.57741C2.73368 2.42113 2.94564 2.33333 3.16666 2.33333H8.16666C8.38767 2.33333 8.59963 2.24554 8.75591 2.08926C8.91219 1.93298 8.99999 1.72101 8.99999 1.5C8.99999 1.27899 8.91219 1.06702 8.75591 0.910744C8.59963 0.754464 8.38767 0.666667 8.16666 0.666667H3.16666C2.50362 0.666667 1.86773 0.930059 1.39889 1.3989C0.930049 1.86774 0.666656 2.50363 0.666656 3.16667V14.8333C0.666656 15.4964 0.930049 16.1323 1.39889 16.6011C1.86773 17.0699 2.50362 17.3333 3.16666 17.3333H14.8333C15.4964 17.3333 16.1322 17.0699 16.6011 16.6011C17.0699 16.1323 17.3333 15.4964 17.3333 14.8333V9.83333C17.3333 9.61232 17.2455 9.40036 17.0892 9.24408C16.933 9.0878 16.721 9 16.5 9ZM3.99999 9.63333V13.1667C3.99999 13.3877 4.08779 13.5996 4.24407 13.7559C4.40035 13.9122 4.61231 14 4.83332 14H8.36666C8.47633 14.0006 8.58505 13.9796 8.68658 13.9381C8.78811 13.8967 8.88046 13.8356 8.95832 13.7583L14.725 7.98333L17.0917 5.66667C17.1698 5.5892 17.2318 5.49703 17.2741 5.39548C17.3164 5.29393 17.3382 5.18501 17.3382 5.075C17.3382 4.96499 17.3164 4.85607 17.2741 4.75452C17.2318 4.65297 17.1698 4.5608 17.0917 4.48333L13.5583 0.908333C13.4809 0.830226 13.3887 0.768231 13.2871 0.725924C13.1856 0.683617 13.0767 0.661835 12.9667 0.661835C12.8566 0.661835 12.7477 0.683617 12.6462 0.725924C12.5446 0.768231 12.4525 0.830226 12.375 0.908333L10.025 3.26667L4.24166 9.04167C4.16442 9.11953 4.10332 9.21188 4.06185 9.31341C4.02038 9.41494 3.99936 9.52366 3.99999 9.63333ZM12.9667 2.675L15.325 5.03333L14.1417 6.21667L11.7833 3.85833L12.9667 2.675ZM5.66666 9.975L10.6083 5.03333L12.9667 7.39167L8.02499 12.3333H5.66666V9.975Z" fill="#3D485B"></path>
              </svg>
              <span class="ml-2">Edit</span>
            </a>
          </div>
          <div class="w-auto p-2">

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

Navbar generator

Tailwind Component #18

Tailwind CSS

Trizzle

<section x-data="{ tab: ''}" x-init="tab = $refs.tab1.textContent">
  <div class="p-8 bg-gray-600">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-6 md:mb-0">
        <h4 class="text-2xl font-bold text-white leading-5">Subpage name</h4>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="flex px-4 h-14 max-w-sm items-center border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
          <span class="flex-shrink-0">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
            </svg>
          </span>
          <input class="pl-2 text-sm font-medium text-gray-300 placeholder-gray-400 bg-transparent outline-none" id="pageHeaderInput5-1" type="search" placeholder="Search...">
        </div>
      </div>
      <div class="w-full px-2 mt-8">
        <ul class="flex flex-wrap -mb-4">
          <li class="mb-4 mr-8"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :xclass="{'text-blue-500 border-blue-500': tab == $refs.tab1.textContent, 'text-gray-400 border-transparent': tab !== $refs.tab1.textContent}" class="inline-block pb-4 text-blue-500 font-semibold border-b border-blue-500 hover:border-gray-400 transition duration-200" href="#">Subpage 1</a></li>
          <li class="mb-4 mr-8"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :xclass="{'text-blue-500 border-blue-500': tab == $refs.tab2.textContent, 'text-gray-400 border-transparent': tab !== $refs.tab2.textContent}" class="inline-block pb-4 text-gray-400 font-semibold border-b border-transparent hover:border-gray-400 transition duration-200" href="#">Subpage 2</a></li>
          <li class="mb-4"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :xclass="{'text-blue-500 border-blue-500': tab == $refs.tab3.textContent, 'text-gray-400 border-transparent': tab !== $refs.tab3.textContent}" class="inline-block pb-4 text-gray-400 font-semibold border-b border-transparent hover:border-gray-400 transition duration-200" href="#">Subpage 3</a></li>
        </ul>
      </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

Navbar generator

Tailwind Component #19

Tailwind CSS

Trizzle

<section>
  <div class="p-8 bg-gray-600">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-6 md:mb-0">
        <div class="flex items-center">
          <img class="w-14 h-14 rounded-full mr-3" src="trizzle-assets/images/placeholder-subpage-avatar.png" alt="">
          <h4 class="text-2xl font-bold text-white leading-5">Subpage name</h4>
        </div>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="flex px-4 h-14 max-w-sm items-center border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
          <span class="flex-shrink-0">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
            </svg>
          </span>
          <input class="pl-2 text-sm font-medium text-gray-300 placeholder-gray-400 bg-transparent outline-none" id="pageHeaderInput6-1" type="search" placeholder="Search...">
        </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

Navbar generator

Tailwind Component #20

Tailwind CSS

Trizzle

<section>
  <div class="p-8 bg-gray-600">
    <div class="flex flex-wrap items-center justify-between -mx-2">
      <div class="w-full md:w-auto px-2 mb-6 md:mb-0">
        <div>
          <h4 class="text-2xl font-bold text-white leading-5 mb-2">Subpage name</h4>
          <ul class="flex items-center">
            <li><a class="text-xs text-gray-300 opacity-50 hover:opacity-80" href="#">Dashboard</a></li>
            <div class="w-1 h-1 mx-1 transform translate-y-1/2 bg-gray-300 bg-opacity-50 rounded-full"></div>
            <li><a class="text-xs text-gray-300 opacity-50 hover:opacity-80" href="#">Overview</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-auto px-2">
        <div class="flex px-4 h-14 max-w-sm items-center border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
          <span class="flex-shrink-0">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
            </svg>
          </span>
          <input class="pl-2 text-sm font-medium text-gray-300 placeholder-gray-400 bg-transparent outline-none" id="pageHeaderInput7-1" type="search" placeholder="Search...">
        </div>
      </div>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Trizzle UI Components by Shuffle

Choose from 239 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 – Trizzle Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Dark section header with bold heading and lorem ipsum subtitle

Tailwind Component #2

Get the code for 13,400+ components

Dark dashboard header with Overview title and user controls

Tailwind Component #3

Get the code for 13,400+ components

Tailwind Component #4

Get the code for 13,400+ components

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

Tailwind Component #20

Get the code for 13,400+ components

Trizzle UI Components by Shuffle

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support