Tailwind Components in Artemis 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 #21

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-green-50 border-l-4 border-green-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-green-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-green-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </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

Teal Left-Border Notification Banner with Dismiss Button

A full-width light green notification banner with a teal left accent bar, a short status message reading "Example for Banner", and a close icon on the right. It appears to convey an informational or success-style message in a horizontal row layout.

Alert generator

Tailwind Component #22

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-indigo-50 border-l-4 border-indigo-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-indigo-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-indigo-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </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

Alert generator

Tailwind Component #23

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 rounded bg-white">
          <div class="flex mb-2">
            <span class="inline-block mr-2">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.00013 0.666656C7.90578 0.666656 6.82215 0.882205 5.8111 1.30099C4.80006 1.71978 3.8814 2.33361 3.10758 3.10743C1.54477 4.67024 0.666799 6.78985 0.666799 8.99999C0.659514 10.9243 1.32579 12.7904 2.55013 14.275L0.883466 15.9417C0.767834 16.0588 0.689504 16.2077 0.658359 16.3693C0.627214 16.531 0.64465 16.6982 0.708466 16.85C0.777681 16.9999 0.889886 17.1259 1.03084 17.212C1.17179 17.298 1.33513 17.3403 1.50013 17.3333H9.00013C11.2103 17.3333 13.3299 16.4553 14.8927 14.8925C16.4555 13.3297 17.3335 11.2101 17.3335 8.99999C17.3335 6.78985 16.4555 4.67024 14.8927 3.10743C13.3299 1.54463 11.2103 0.666656 9.00013 0.666656ZM9.00013 15.6667H3.50847L4.28347 14.8917C4.43868 14.7355 4.52579 14.5243 4.52579 14.3042C4.52579 14.084 4.43868 13.8728 4.28347 13.7167C3.19229 12.6267 2.51278 11.1921 2.36071 9.65732C2.20864 8.12253 2.59342 6.58249 3.44949 5.29959C4.30556 4.01669 5.57996 3.07029 7.05556 2.62163C8.53117 2.17298 10.1167 2.24983 11.542 2.83908C12.9673 3.42834 14.1442 4.49355 14.8722 5.85323C15.6002 7.21291 15.8342 8.78294 15.5344 10.2958C15.2346 11.8087 14.4196 13.1709 13.2281 14.1502C12.0366 15.1295 10.5424 15.6654 9.00013 15.6667ZM13.1668 8.16666H4.83347C4.61245 8.16666 4.40049 8.25445 4.24421 8.41073C4.08793 8.56701 4.00013 8.77898 4.00013 8.99999C4.00013 9.221 4.08793 9.43296 4.24421 9.58924C4.40049 9.74553 4.61245 9.83332 4.83347 9.83332H13.1668C13.3878 9.83332 13.5998 9.74553 13.7561 9.58924C13.9123 9.43296 14.0001 9.221 14.0001 8.99999C14.0001 8.77898 13.9123 8.56701 13.7561 8.41073C13.5998 8.25445 13.3878 8.16666 13.1668 8.16666ZM11.5001 11.5H6.50013C6.27912 11.5 6.06716 11.5878 5.91088 11.7441C5.7546 11.9003 5.6668 12.1123 5.6668 12.3333C5.6668 12.5543 5.7546 12.7663 5.91088 12.9226C6.06716 13.0789 6.27912 13.1667 6.50013 13.1667H11.5001C11.7211 13.1667 11.9331 13.0789 12.0894 12.9226C12.2457 12.7663 12.3335 12.5543 12.3335 12.3333C12.3335 12.1123 12.2457 11.9003 12.0894 11.7441C11.9331 11.5878 11.7211 11.5 11.5001 11.5ZM6.50013 6.49999H11.5001C11.7211 6.49999 11.9331 6.41219 12.0894 6.25591C12.2457 6.09963 12.3335 5.88767 12.3335 5.66666C12.3335 5.44564 12.2457 5.23368 12.0894 5.0774C11.9331 4.92112 11.7211 4.83332 11.5001 4.83332H6.50013C6.27912 4.83332 6.06716 4.92112 5.91088 5.0774C5.7546 5.23368 5.6668 5.44564 5.6668 5.66666C5.6668 5.88767 5.7546 6.09963 5.91088 6.25591C6.06716 6.41219 6.27912 6.49999 6.50013 6.49999Z" fill="#382CDD"></path>
              </svg>
            </span>
            <h3 class="text-sm text-gray-600">Responses</h3>
            <span class="inline-block ml-auto px-2 py-1 text-xs text-gray-500 bg-gray-50 rounded-full">30 Days</span>
          </div>
          <h2 class="mb-2 text-3xl font-bold">1 450</h2>
          <span class="text-xs text-red-500">
            <span class="inline-block mr-2">
              <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.5 4.16667C16.3906 4.16661 16.2822 4.18812 16.181 4.22998C16.0799 4.27183 15.988 4.33322 15.9106 4.41061C15.8332 4.488 15.7719 4.57989 15.73 4.68103C15.6881 4.78216 15.6666 4.89055 15.6667 5V7.15495L10.4225 1.91084C10.3452 1.83344 10.2533 1.77204 10.1522 1.73015C10.0511 1.68825 9.94277 1.66669 9.83333 1.66669C9.7239 1.66669 9.61554 1.68825 9.51445 1.73015C9.41335 1.77204 9.3215 1.83344 9.24414 1.91084L6.50002 4.65495L2.08919 0.244171C1.93245 0.0902454 1.72127 0.00444584 1.50159 0.00544068C1.28191 0.00643553 1.07151 0.094144 0.91617 0.249483C0.760831 0.404822 0.673123 0.61522 0.672128 0.8349C0.671133 1.05458 0.756932 1.26576 0.910858 1.4225L5.91086 6.4225C5.98822 6.4999 6.08007 6.5613 6.18116 6.60319C6.28226 6.64508 6.39062 6.66665 6.50005 6.66665C6.60948 6.66665 6.71784 6.64508 6.81893 6.60319C6.92003 6.5613 7.01188 6.4999 7.08924 6.4225L9.83336 3.67839L14.4883 8.33334H12.3334C12.1123 8.33334 11.9004 8.42113 11.7441 8.57741C11.5878 8.7337 11.5 8.94566 11.5 9.16667C11.5 9.38768 11.5878 9.59965 11.7441 9.75593C11.9004 9.91221 12.1123 10 12.3334 10H16.5C16.6095 10.0001 16.7179 9.97855 16.819 9.9367C16.9201 9.89484 17.012 9.83346 17.0894 9.75607C17.1668 9.67867 17.2282 9.58678 17.2701 9.48565C17.3119 9.38452 17.3334 9.27612 17.3334 9.16667V5C17.3334 4.89055 17.3119 4.78216 17.2701 4.68103C17.2282 4.57989 17.1668 4.488 17.0894 4.41061C17.012 4.33322 16.9201 4.27183 16.819 4.22998C16.7179 4.18812 16.6095 4.16661 16.5 4.16667Z" fill="#E85444"></path>
              </svg>
            </span>
            <span>25% less</span>
          </span>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Four-Up KPI Stat Card Row with 30-Day Trends

A horizontal row of four white metric cards on a pale blue background, each showing a labeled statistic (Responses, Projects, Reports, Users), a 30 Days badge, a large bold value, and a colored up or down trend indicator. The layout is a single row of equal-width cards for dashboard-style summary metrics.

Stats generator

Tailwind Component #24

Tailwind CSS

Artemis Dashboard

<section class="py-8" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="pt-4 bg-white shadow rounded">
      <div class="flex px-6 pb-4 border-b">
        <h3 class="text-xl font-bold">Recent Transactions</h3>
      </div>
      <div class="p-4 overflow-x-auto">
        <table class="table-auto w-full">
          <thead>
            <tr class="text-xs text-gray-500 text-left"><th class="pb-3 font-medium">Transaction ID</th><th class="pb-3 font-medium">Date</th><th class="pb-3 font-medium">E-mail</th><th class="pb-3 font-medium">Subscription</th><th class="pb-3 font-medium">Status</th></tr>
          </thead>
          <tbody>
            <tr class="text-xs bg-gray-50">
              <td class="py-5 px-6 font-medium">SR2451EW32</td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">name@shuffle.dev</td>
              <td class="font-medium">Monthly</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Completed</span>
              </td>
            </tr>
            <tr class="text-xs">
              <td class="py-5 px-6 font-medium">SR2451EW32</td>
              <td class="font-medium">08.04.2021</td>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Recent Transactions Table Card with Status Badges

A white card with a heading 'Recent Transactions' containing a table of transaction records with columns for ID, date, email, subscription, and status. Status values are shown as colored pill badges, and a centered 'Load more transactions' link sits below the rows.

Tables generator

Tailwind Component #25

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-gray-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-gray-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-gray-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </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

Alert generator

Tailwind Component #26

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-red-50 border-l-4 border-red-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-red-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-red-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </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

Alert generator

Tailwind Component #27

Tailwind CSS

Artemis Dashboard

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="p-6 flex items-center bg-gray-800">
      <a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="#">
        <img class="h-10" src="artemis-assets/logos/artemis-logo.svg" alt="" width="auto">
      </a>
      <ul class="hidden xl:flex">
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.9066 3.12886C14.9005 3.12235 14.8987 3.1137 14.8923 3.10734C14.8859 3.10098 14.8771 3.09905 14.8706 3.0929C13.3119 1.53919 11.2008 0.666748 8.99996 0.666748C6.79914 0.666748 4.68807 1.53919 3.12935 3.0929C3.12279 3.09905 3.11404 3.10093 3.10763 3.10734C3.10122 3.11375 3.09944 3.12234 3.09334 3.12886C1.93189 4.29587 1.14217 5.7808 0.823851 7.39621C0.505534 9.01163 0.672885 10.6851 1.30478 12.2055C1.93668 13.7259 3.00481 15.0251 4.37435 15.939C5.7439 16.8529 7.35348 17.3406 8.99996 17.3406C10.6464 17.3406 12.256 16.8529 13.6256 15.939C14.9951 15.0251 16.0632 13.7259 16.6951 12.2055C17.327 10.6851 17.4944 9.01163 17.1761 7.39621C16.8578 5.7808 16.068 4.29587 14.9066 3.12886ZM8.99992 15.6667C8.00181 15.6664 7.01656 15.4415 6.11714 15.0088C5.21773 14.576 4.42719 13.9465 3.80409 13.1667H7.15015C7.38188 13.4287 7.66662 13.6385 7.98551 13.7821C8.3044 13.9258 8.65017 14.0001 8.99992 14.0001C9.34968 14.0001 9.69544 13.9258 10.0143 13.7821C10.3332 13.6385 10.618 13.4287 10.8497 13.1667H14.1958C13.5727 13.9465 12.7821 14.576 11.8827 15.0088C10.9833 15.4416 9.99804 15.6664 8.99992 15.6667ZM8.16659 11.5001C8.16659 11.3353 8.21546 11.1741 8.30703 11.0371C8.3986 10.9001 8.52875 10.7933 8.68102 10.7302C8.83329 10.6671 9.00085 10.6506 9.1625 10.6828C9.32415 10.7149 9.47263 10.7943 9.58918 10.9108C9.70572 11.0274 9.78509 11.1759 9.81724 11.3375C9.8494 11.4992 9.83289 11.6667 9.76982 11.819C9.70675 11.9713 9.59994 12.1014 9.4629 12.193C9.32586 12.2845 9.16474 12.3334 8.99992 12.3334C8.77898 12.3332 8.56714 12.2453 8.41091 12.0891C8.25468 11.9329 8.16681 11.721 8.16659 11.5001ZM15.1751 11.5018L15.1665 11.5001H11.4999C11.4983 10.9848 11.3373 10.4826 11.0389 10.0624C10.7405 9.64231 10.3193 9.32485 9.83325 9.15364V6.50008C9.83325 6.27907 9.74546 6.06711 9.58918 5.91083C9.4329 5.75455 9.22093 5.66675 8.99992 5.66675C8.77891 5.66675 8.56695 5.75455 8.41067 5.91083C8.25439 6.06711 8.16659 6.27907 8.16659 6.50008V9.15364C7.68054 9.32485 7.25939 9.64231 6.96098 10.0624C6.66256 10.4826 6.50151 10.9848 6.49992 11.5001H2.83334L2.82474 11.5018C2.60799 10.967 2.46221 10.4061 2.39114 9.83341H3.16659C3.3876 9.83341 3.59956 9.74562 3.75584 9.58934C3.91212 9.43306 3.99992 9.2211 3.99992 9.00008C3.99992 8.77907 3.91212 8.56711 3.75584 8.41083C3.59956 8.25455 3.3876 8.16675 3.16659 8.16675H2.39114C2.54005 6.98222 3.00621 5.85993 3.74037 4.91851L4.28597 5.46411C4.36335 5.54149 4.4552 5.60286 4.5563 5.64474C4.65739 5.68661 4.76574 5.70816 4.87517 5.70816C4.98459 5.70816 5.09294 5.68661 5.19404 5.64474C5.29513 5.60286 5.38699 5.54148 5.46436 5.46411C5.54173 5.38674 5.60311 5.29488 5.64498 5.19379C5.68686 5.09269 5.70841 4.98434 5.70841 4.87492C5.70841 4.76549 5.68686 4.65714 5.64498 4.55605C5.60311 4.45495 5.54173 4.3631 5.46435 4.28572L4.91881 3.74017C5.86016 3.00626 6.98227 2.54022 8.16659 2.3913V3.16675C8.16659 3.38776 8.25439 3.59972 8.41067 3.756C8.56695 3.91228 8.77891 4.00008 8.99992 4.00008C9.22093 4.00008 9.4329 3.91228 9.58918 3.756C9.74546 3.59972 9.83325 3.38776 9.83325 3.16675V2.3913C11.0176 2.54022 12.1397 3.00626 13.081 3.74017L12.5355 4.28572C12.3792 4.44199 12.2914 4.65393 12.2914 4.87492C12.2914 5.09591 12.3792 5.30785 12.5355 5.46411C12.6917 5.62037 12.9037 5.70816 13.1247 5.70816C13.3457 5.70816 13.5576 5.62038 13.7139 5.46411L14.2595 4.91851C14.9936 5.85993 15.4598 6.98222 15.6087 8.16675H14.8333C14.6122 8.16675 14.4003 8.25455 14.244 8.41083C14.0877 8.56711 13.9999 8.77907 13.9999 9.00008C13.9999 9.2211 14.0877 9.43306 14.244 9.58934C14.4003 9.74562 14.6122 9.83341 14.8333 9.83341H15.6087C15.5376 10.4061 15.3919 10.967 15.1751 11.5018Z" fill="currentColor"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.00017 0.666748C4.41684 0.666748 0.66684 4.41675 0.66684 9.00008C0.66684 13.5834 4.41684 17.3334 9.00017 17.3334C13.5835 17.3334 17.3335 13.5834 17.3335 9.00008C17.3335 4.41675 13.5835 0.666748 9.00017 0.666748ZM2.58351 10.6667C2.41684 10.0834 2.33351 9.58342 2.33351 9.00008C2.33351 8.41675 2.41684 7.91675 2.58351 7.33342H4.16684C4.00017 8.41675 4.00017 9.58342 4.16684 10.6667H2.58351ZM3.25017 12.3334H4.41684C4.58351 13.0834 4.83351 13.8334 5.25017 14.5001C4.41684 13.9167 3.75017 13.1667 3.25017 12.3334ZM4.41684 5.66675H3.25017C3.75017 4.83342 4.41684 4.08342 5.25017 3.50008C4.83351 4.16675 4.58351 4.91675 4.41684 5.66675ZM8.16684 15.4167C7.16684 14.6667 6.41684 13.5834 6.16684 12.3334H8.16684V15.4167ZM8.16684 10.6667H5.75017C5.66684 10.0834 5.66684 9.58342 5.66684 9.00008C5.66684 8.41675 5.66684 7.91675 5.75017 7.33342H8.16684V10.6667ZM8.16684 5.66675H6.16684C6.41684 4.41675 7.16684 3.33342 8.16684 2.58341V5.66675ZM14.7502 5.66675H13.5835C13.4168 4.91675 13.1668 4.16675 12.7502 3.50008C13.5835 4.08342 14.2502 4.83342 14.7502 5.66675ZM9.83351 2.58341C10.8335 3.33342 11.5835 4.41675 11.8335 5.66675H9.83351V2.58341ZM9.83351 15.4167V12.3334H11.8335C11.5835 13.5834 10.8335 14.6667 9.83351 15.4167ZM12.2502 10.6667H9.83351V7.33342H12.2502C12.3335 8.41675 12.3335 9.58342 12.2502 10.6667ZM12.8335 14.5001C13.1668 13.8334 13.4168 13.0834 13.6668 12.3334H14.8335C14.2502 13.1667 13.5835 13.9167 12.8335 14.5001ZM13.9168 10.6667C14.0835 9.58342 14.0835 8.41675 13.9168 7.33342H15.5002C15.8335 8.41675 15.8335 9.58342 15.5002 10.6667H13.9168Z" fill="currentColor"></path>
            </svg>
            <span>Discover</span>
          </a>
        </li>
        <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

Artemis Dashboard Top Navigation Bar with Secondary Utility Row

A two-tier application header with a dark primary bar containing the Artemis logo, main navigation links (Dashboard, Discover, Users, Documents, Applications), notification and message icons, and a user profile with avatar; a light secondary row below provides utility links such as Support Center, Inbox, File Manager, and Data List, plus settings and logout icons.

Navigation (horizontal) generator

Tailwind Component #28

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="pt-6 text-center bg-white rounded">
          <h4 class="mb-2 text-xs text-gray-500">Engaged Users</h4>
          <p class="mb-1 text-4xl font-bold">1 450</p>
          <span class="inline-block py-1 px-2 mb-2 text-xs text-white bg-green-500 rounded-full">+115</span>
          <div class="chart" data-type="area-small" data-variant="indigo"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="pt-6 text-center bg-white rounded">
          <h4 class="mb-2 text-xs text-gray-500">Total Profit</h4>
          <p class="mb-1 text-4xl font-bold">$9,054</p>
          <span class="inline-block py-1 px-2 mb-2 text-xs text-white bg-red-500 rounded-full">-$1,535</span>
          <div class="chart" data-type="area-small" data-variant="blue"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="pt-6 text-center bg-white rounded">
          <h4 class="mb-2 text-xs text-gray-500">Click Counter</h4>
          <p class="mb-1 text-4xl font-bold">73.5%</p>
          <span class="inline-block py-1 px-2 mb-2 text-xs text-white bg-green-500 rounded-full">+5.64%</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

Four-Up KPI Stat Card Row with Sparklines

A horizontal row of four white metric cards, each showing a small gray label, a large bold value, a colored change badge, and a filled wavy sparkline chart. The cards use distinct accent colors (purple, blue, green, orange) to differentiate each metric.

Graphs generator

Tailwind Component #29

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="py-12 bg-indigo-500 rounded overflow-hidden">
      <div class="flex flex-wrap">
        <div class="w-full md:w-1/2 px-6 md:pl-12 lg:pr-0 mb-10 md:mb-0">
          <h3 class="mb-2 text-6xl font-medium text-white">
            <span class="text-green-300">7 Days</span>
            <span>Free Demo</span>
          </h3>
          <p class="text-xl font-medium text-blue-100">No charge for seven days</p>
        </div>
        <div class="relative w-full md:w-1/2 px-12">
          <img class="lg:absolute top-0 lg:mr-12 right-0 lg:-mt-24 lg:h-80 object-cover" src="artemis-assets/images/chart-folder.png" alt="">
        </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

Blue Banner with 7 Days Free Demo Heading and 3D Illustration

A horizontal promotional banner with a bold blue background, a two-tone heading announcing a 7 days free demo, a short supporting line, and decorative 3D illustrations of folders, charts, and a pie chart on the right. It functions as a compact call-out or promotional strip.

Banners generator

Tailwind Component #30

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-green-50 border-l-4 border-green-500 rounded-r-lg">
    <div class="flex items-center">
      <span class="inline-block mr-2">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM14.2 8.3L9.4 13.1C9 13.5 8.4 13.5 8 13.1L5.8 10.9C5.4 10.5 5.4 9.9 5.8 9.5C6.2 9.1 6.8 9.1 7.2 9.5L8.7 11L12.8 6.9C13.2 6.5 13.8 6.5 14.2 6.9C14.6 7.3 14.6 7.9 14.2 8.3Z" fill="#17BB84"></path>
        </svg>
      </span>
      <h3 class="text-green-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-green-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </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

Alert generator

Tailwind Component #31

Tailwind CSS

Artemis Dashboard

<section class="bg-gray-50 py-8 px-4">
  <table class="table-auto w-full bg-white shadow rounded">
    <thead class="border-b border-gray-100">
      <tr>
        <th class="pl-6 py-6 border-r border-gray-200">
          <a class="flex items-center text-xs text-gray-500" href="#">
            <p>Name</p>
            <svg class="ml-1 w-2 h-3" width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.85956 7.52666L4.99956 10.3933L2.13956 7.52666C2.01403 7.40113 1.84376 7.3306 1.66623 7.3306C1.48869 7.3306 1.31843 7.40113 1.1929 7.52666C1.06736 7.6522 0.996835 7.82246 0.996835 8C0.996835 8.17753 1.06736 8.34779 1.1929 8.47333L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17235 12.0005 5.34132 11.9308 5.46623 11.8067L8.79956 8.47333C8.86172 8.41117 8.91103 8.33738 8.94467 8.25616C8.97831 8.17495 8.99562 8.0879 8.99562 8C8.99562 7.91209 8.97831 7.82504 8.94467 7.74383C8.91103 7.66262 8.86172 7.58882 8.79956 7.52666C8.7374 7.4645 8.66361 7.4152 8.5824 7.38156C8.50118 7.34792 8.41414 7.3306 8.32623 7.3306C8.23832 7.3306 8.15128 7.34792 8.07006 7.38156C7.98885 7.4152 7.91506 7.4645 7.8529 7.52666H7.85956ZM2.13956 4.47333L4.99956 1.60666L7.85956 4.47333C7.98447 4.5975 8.15344 4.66719 8.32956 4.66719C8.50569 4.66719 8.67465 4.5975 8.79956 4.47333C8.92373 4.34842 8.99342 4.17945 8.99342 4.00333C8.99342 3.82721 8.92373 3.65824 8.79956 3.53333L5.46623 0.199997C5.40425 0.137511 5.33052 0.0879151 5.24928 0.0540694C5.16804 0.0202236 5.0809 0.00279808 4.9929 0.00279808C4.90489 0.00279808 4.81775 0.0202236 4.73651 0.0540694C4.65527 0.0879151 4.58154 0.137511 4.51956 0.199997L1.18623 3.53333C1.06158 3.65975 0.992251 3.83051 0.993501 4.00804C0.994751 4.18558 1.06648 4.35534 1.1929 4.48C1.31932 4.60465 1.49008 4.67397 1.66761 4.67272C1.84514 4.67147 2.01491 4.59975 2.13956 4.47333Z" fill="#67798E"></path>
            </svg>
          </a>
        </th>
        <th class="pl-6 border-r border-gray-200">
          <a class="flex items-center text-xs text-gray-500" href="#">
            <p>Position</p>
            <svg class="ml-1 w-2 h-3" width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.85956 7.52666L4.99956 10.3933L2.13956 7.52666C2.01403 7.40113 1.84376 7.3306 1.66623 7.3306C1.48869 7.3306 1.31843 7.40113 1.1929 7.52666C1.06736 7.6522 0.996835 7.82246 0.996835 8C0.996835 8.17753 1.06736 8.34779 1.1929 8.47333L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17235 12.0005 5.34132 11.9308 5.46623 11.8067L8.79956 8.47333C8.86172 8.41117 8.91103 8.33738 8.94467 8.25616C8.97831 8.17495 8.99562 8.0879 8.99562 8C8.99562 7.91209 8.97831 7.82504 8.94467 7.74383C8.91103 7.66262 8.86172 7.58882 8.79956 7.52666C8.7374 7.4645 8.66361 7.4152 8.5824 7.38156C8.50118 7.34792 8.41414 7.3306 8.32623 7.3306C8.23832 7.3306 8.15128 7.34792 8.07006 7.38156C7.98885 7.4152 7.91506 7.4645 7.8529 7.52666H7.85956ZM2.13956 4.47333L4.99956 1.60666L7.85956 4.47333C7.98447 4.5975 8.15344 4.66719 8.32956 4.66719C8.50569 4.66719 8.67465 4.5975 8.79956 4.47333C8.92373 4.34842 8.99342 4.17945 8.99342 4.00333C8.99342 3.82721 8.92373 3.65824 8.79956 3.53333L5.46623 0.199997C5.40425 0.137511 5.33052 0.0879151 5.24928 0.0540694C5.16804 0.0202236 5.0809 0.00279808 4.9929 0.00279808C4.90489 0.00279808 4.81775 0.0202236 4.73651 0.0540694C4.65527 0.0879151 4.58154 0.137511 4.51956 0.199997L1.18623 3.53333C1.06158 3.65975 0.992251 3.83051 0.993501 4.00804C0.994751 4.18558 1.06648 4.35534 1.1929 4.48C1.31932 4.60465 1.49008 4.67397 1.66761 4.67272C1.84514 4.67147 2.01491 4.59975 2.13956 4.47333Z" fill="#67798E"></path>
            </svg>
          </a>
        </th>
        <th class="pl-6 border-r border-gray-200">
          <a class="flex items-center text-xs text-gray-500" href="#">
            <p>Office</p>
            <svg class="ml-1 w-2 h-3" width="9" height="12" viewBox="0 0 9 12" 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

Tables generator

Tailwind Component #32

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-white shadow rounded overflow-hidden">
          <div class="pt-6 px-6 mb-10 flex justify-between items-center">
            <span class="inline-flex items-center justify-center w-9 h-10 bg-gray-50 rounded">
              <img class="h-6" src="artemis-assets/mini-logos/spotify.svg" alt="">
            </span>
            <a class="py-1 px-2 bg-blue-50 text-xs text-indigo-500 rounded-full" href="#">Pending</a>
          </div>
          <div class="px-6 mb-6">
            <h4 class="text-xl font-bold">Spotify</h4>
            <p class="text-xs text-gray-500">Example of the team working on a project</p>
          </div>
          <div class="p-6 bg-lightGray-50">
            <div class="flex -mx-2 mb-6">
              <div class="w-1/2 px-2">
                <p class="mb-2 text-xs font-medium">Final Date</p>
                <span class="inline-block py-1 px-2 bg-orange-50 rounded-full text-xs text-red-500">14 March 2021</span>
              </div>
              <div class="w-1/2 px-2">
                <p class="mb-2 text-xs font-medium">Budget</p>
                <span class="inline-block py-1 px-2 bg-green-50 rounded-full text-xs text-green-500">$12,500</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

Project Card Grid with Pagination

A grid of nine project cards, each showing a Spotify logo, Pending status badge, final date, budget, avatar stack, and a progress bar, with a footer showing page-size selector and numbered pagination controls. The layout uses three columns of white cards on a light background.

Content generator

Tailwind Component #33

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-indigo-50 border-l-4 border-indigo-500 rounded-r-lg">
    <div class="flex items-center">
      <span class="inline-block mr-2">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM11 14C11 14.6 10.6 15 10 15C9.4 15 9 14.6 9 14V10C9 9.4 9.4 9 10 9C10.6 9 11 9.4 11 10V14ZM10 7C9.4 7 9 6.6 9 6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6C11 6.6 10.6 7 10 7Z" fill="#382CDD"></path>
        </svg>
      </span>
      <h3 class="text-indigo-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-indigo-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </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

Alert generator

Tailwind Component #34

Tailwind CSS

Artemis Dashboard

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="p-6 flex items-center bg-gray-800">
      <a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="#">
        <img class="h-10" src="artemis-assets/logos/artemis-logo.svg" alt="" width="auto">
      </a>
      <ul class="hidden xl:flex">
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.9066 3.12886C14.9005 3.12235 14.8987 3.1137 14.8923 3.10734C14.8859 3.10098 14.8771 3.09905 14.8706 3.0929C13.3119 1.53919 11.2008 0.666748 8.99996 0.666748C6.79914 0.666748 4.68807 1.53919 3.12935 3.0929C3.12279 3.09905 3.11404 3.10093 3.10763 3.10734C3.10122 3.11375 3.09944 3.12234 3.09334 3.12886C1.93189 4.29587 1.14217 5.7808 0.823851 7.39621C0.505534 9.01163 0.672885 10.6851 1.30478 12.2055C1.93668 13.7259 3.00481 15.0251 4.37435 15.939C5.7439 16.8529 7.35348 17.3406 8.99996 17.3406C10.6464 17.3406 12.256 16.8529 13.6256 15.939C14.9951 15.0251 16.0632 13.7259 16.6951 12.2055C17.327 10.6851 17.4944 9.01163 17.1761 7.39621C16.8578 5.7808 16.068 4.29587 14.9066 3.12886ZM8.99992 15.6667C8.00181 15.6664 7.01656 15.4415 6.11714 15.0088C5.21773 14.576 4.42719 13.9465 3.80409 13.1667H7.15015C7.38188 13.4287 7.66662 13.6385 7.98551 13.7821C8.3044 13.9258 8.65017 14.0001 8.99992 14.0001C9.34968 14.0001 9.69544 13.9258 10.0143 13.7821C10.3332 13.6385 10.618 13.4287 10.8497 13.1667H14.1958C13.5727 13.9465 12.7821 14.576 11.8827 15.0088C10.9833 15.4416 9.99804 15.6664 8.99992 15.6667ZM8.16659 11.5001C8.16659 11.3353 8.21546 11.1741 8.30703 11.0371C8.3986 10.9001 8.52875 10.7933 8.68102 10.7302C8.83329 10.6671 9.00085 10.6506 9.1625 10.6828C9.32415 10.7149 9.47263 10.7943 9.58918 10.9108C9.70572 11.0274 9.78509 11.1759 9.81724 11.3375C9.8494 11.4992 9.83289 11.6667 9.76982 11.819C9.70675 11.9713 9.59994 12.1014 9.4629 12.193C9.32586 12.2845 9.16474 12.3334 8.99992 12.3334C8.77898 12.3332 8.56714 12.2453 8.41091 12.0891C8.25468 11.9329 8.16681 11.721 8.16659 11.5001ZM15.1751 11.5018L15.1665 11.5001H11.4999C11.4983 10.9848 11.3373 10.4826 11.0389 10.0624C10.7405 9.64231 10.3193 9.32485 9.83325 9.15364V6.50008C9.83325 6.27907 9.74546 6.06711 9.58918 5.91083C9.4329 5.75455 9.22093 5.66675 8.99992 5.66675C8.77891 5.66675 8.56695 5.75455 8.41067 5.91083C8.25439 6.06711 8.16659 6.27907 8.16659 6.50008V9.15364C7.68054 9.32485 7.25939 9.64231 6.96098 10.0624C6.66256 10.4826 6.50151 10.9848 6.49992 11.5001H2.83334L2.82474 11.5018C2.60799 10.967 2.46221 10.4061 2.39114 9.83341H3.16659C3.3876 9.83341 3.59956 9.74562 3.75584 9.58934C3.91212 9.43306 3.99992 9.2211 3.99992 9.00008C3.99992 8.77907 3.91212 8.56711 3.75584 8.41083C3.59956 8.25455 3.3876 8.16675 3.16659 8.16675H2.39114C2.54005 6.98222 3.00621 5.85993 3.74037 4.91851L4.28597 5.46411C4.36335 5.54149 4.4552 5.60286 4.5563 5.64474C4.65739 5.68661 4.76574 5.70816 4.87517 5.70816C4.98459 5.70816 5.09294 5.68661 5.19404 5.64474C5.29513 5.60286 5.38699 5.54148 5.46436 5.46411C5.54173 5.38674 5.60311 5.29488 5.64498 5.19379C5.68686 5.09269 5.70841 4.98434 5.70841 4.87492C5.70841 4.76549 5.68686 4.65714 5.64498 4.55605C5.60311 4.45495 5.54173 4.3631 5.46435 4.28572L4.91881 3.74017C5.86016 3.00626 6.98227 2.54022 8.16659 2.3913V3.16675C8.16659 3.38776 8.25439 3.59972 8.41067 3.756C8.56695 3.91228 8.77891 4.00008 8.99992 4.00008C9.22093 4.00008 9.4329 3.91228 9.58918 3.756C9.74546 3.59972 9.83325 3.38776 9.83325 3.16675V2.3913C11.0176 2.54022 12.1397 3.00626 13.081 3.74017L12.5355 4.28572C12.3792 4.44199 12.2914 4.65393 12.2914 4.87492C12.2914 5.09591 12.3792 5.30785 12.5355 5.46411C12.6917 5.62037 12.9037 5.70816 13.1247 5.70816C13.3457 5.70816 13.5576 5.62038 13.7139 5.46411L14.2595 4.91851C14.9936 5.85993 15.4598 6.98222 15.6087 8.16675H14.8333C14.6122 8.16675 14.4003 8.25455 14.244 8.41083C14.0877 8.56711 13.9999 8.77907 13.9999 9.00008C13.9999 9.2211 14.0877 9.43306 14.244 9.58934C14.4003 9.74562 14.6122 9.83341 14.8333 9.83341H15.6087C15.5376 10.4061 15.3919 10.967 15.1751 11.5018Z" fill="currentColor"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.00017 0.666748C4.41684 0.666748 0.66684 4.41675 0.66684 9.00008C0.66684 13.5834 4.41684 17.3334 9.00017 17.3334C13.5835 17.3334 17.3335 13.5834 17.3335 9.00008C17.3335 4.41675 13.5835 0.666748 9.00017 0.666748ZM2.58351 10.6667C2.41684 10.0834 2.33351 9.58342 2.33351 9.00008C2.33351 8.41675 2.41684 7.91675 2.58351 7.33342H4.16684C4.00017 8.41675 4.00017 9.58342 4.16684 10.6667H2.58351ZM3.25017 12.3334H4.41684C4.58351 13.0834 4.83351 13.8334 5.25017 14.5001C4.41684 13.9167 3.75017 13.1667 3.25017 12.3334ZM4.41684 5.66675H3.25017C3.75017 4.83342 4.41684 4.08342 5.25017 3.50008C4.83351 4.16675 4.58351 4.91675 4.41684 5.66675ZM8.16684 15.4167C7.16684 14.6667 6.41684 13.5834 6.16684 12.3334H8.16684V15.4167ZM8.16684 10.6667H5.75017C5.66684 10.0834 5.66684 9.58342 5.66684 9.00008C5.66684 8.41675 5.66684 7.91675 5.75017 7.33342H8.16684V10.6667ZM8.16684 5.66675H6.16684C6.41684 4.41675 7.16684 3.33342 8.16684 2.58341V5.66675ZM14.7502 5.66675H13.5835C13.4168 4.91675 13.1668 4.16675 12.7502 3.50008C13.5835 4.08342 14.2502 4.83342 14.7502 5.66675ZM9.83351 2.58341C10.8335 3.33342 11.5835 4.41675 11.8335 5.66675H9.83351V2.58341ZM9.83351 15.4167V12.3334H11.8335C11.5835 13.5834 10.8335 14.6667 9.83351 15.4167ZM12.2502 10.6667H9.83351V7.33342H12.2502C12.3335 8.41675 12.3335 9.58342 12.2502 10.6667ZM12.8335 14.5001C13.1668 13.8334 13.4168 13.0834 13.6668 12.3334H14.8335C14.2502 13.1667 13.5835 13.9167 12.8335 14.5001ZM13.9168 10.6667C14.0835 9.58342 14.0835 8.41675 13.9168 7.33342H15.5002C15.8335 8.41675 15.8335 9.58342 15.5002 10.6667H13.9168Z" fill="currentColor"></path>
            </svg>
            <span>Discover</span>
          </a>
        </li>
        <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

Dark Top Navigation Bar with Logo, Menu Links, and User Profile

A horizontal dark navigation bar displaying the Artemis logo, text links for Dashboard, Discover, Users, Documents, and Applications, plus notification and message icons and a user profile with avatar, name, and role on the right. It is a primary app navigation header.

Navigation (horizontal) generator

Tailwind Component #35

Tailwind CSS

Artemis Dashboard

<section class="py-8" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="pt-6 bg-white shadow rounded">
      <div class="px-6 border-b">
        <div class="flex flex-wrap items-center mb-6">
          <h3 class="text-xl font-bold">Recent Transactions</h3>
          <a class="ml-auto flex items-center py-2 px-3 text-xs text-white bg-indigo-500 hover:bg-indigo-600 rounded" href="#">
            <span class="mr-1">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13 8.33337C12.6 8.33337 12.3333 8.60004 12.3333 9.00004V11.6667C12.3333 12.0667 12.0666 12.3334 11.6666 12.3334H2.33331C1.93331 12.3334 1.66665 12.0667 1.66665 11.6667V9.00004C1.66665 8.60004 1.39998 8.33337 0.99998 8.33337C0.59998 8.33337 0.333313 8.60004 0.333313 9.00004V11.6667C0.333313 12.8 1.19998 13.6667 2.33331 13.6667H11.6666C12.8 13.6667 13.6666 12.8 13.6666 11.6667V9.00004C13.6666 8.60004 13.4 8.33337 13 8.33337ZM4.79998 4.13337L6.33331 2.60004V9.00004C6.33331 9.40004 6.59998 9.66671 6.99998 9.66671C7.39998 9.66671 7.66665 9.40004 7.66665 9.00004V2.60004L9.19998 4.13337C9.46665 4.40004 9.86665 4.40004 10.1333 4.13337C10.4 3.86671 10.4 3.46671 10.1333 3.20004L7.46665 0.533374C7.19998 0.266707 6.79998 0.266707 6.53331 0.533374L3.86665 3.20004C3.59998 3.46671 3.59998 3.86671 3.86665 4.13337C4.13331 4.40004 4.53331 4.40004 4.79998 4.13337Z" fill="#AFABF1"></path>
              </svg>
            </span>
            <span>Export</span>
          </a>
        </div>
        <div>
          <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{'text-indigo-500 border-indigo-500': tab == $refs.tab1.textContent, 'text-gray-500 border-transparent': tab != $refs.tab1.textContent}" class="inline-block px-4 pb-2 text-sm font-medium border-b-2 text-indigo-500 border-indigo-500" href="#">Incoming</a>
          <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{'text-indigo-500 border-indigo-500': tab == $refs.tab2.textContent, 'text-gray-500 border-transparent': tab != $refs.tab2.textContent}" class="inline-block px-4 pb-2 text-sm font-medium border-b-2 text-gray-500 border-transparent" href="#">Invoices</a>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table class="table-auto w-full">
          <thead>
            <tr class="text-xs text-gray-500 text-left">

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

Tables generator

Tailwind Component #36

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-white rounded">
          <div class="flex items-center py-5 px-6 border-b">
            <h3 class="text-2xl font-bold">Balance</h3>
            <div class="ml-auto inline-block py-2 px-3 border rounded text-xs text-gray-500">
              <select class="pr-1" name="" id="">
                <option value="1">Monthly</option>
                <option value="1">Yearly</option>
                <option value="1">Weekly</option>
              </select>
            </div>
          </div>
          <div class="pt-4 px-6">
            <div class="flex flex-wrap -m-4 pb-16">
              <div class="w-full md:w-1/2 p-4">
                <div class="py-4 px-6 border rounded">
                  <h4 class="text-xs text-gray-500">Earnings</h4>
                  <div class="flex items-center">
                    <span class="mr-2 text-3xl font-bold">43.41%</span>
                    <span class="py-1 px-2 bg-green-500 text-xs text-white rounded-full">+2.5%</span>
                  </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Stats generator

Tailwind Component #37

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-orange-50 border-l-4 border-orange-500 rounded-r-lg">
    <div class="flex items-center">
      <span class="inline-block mr-2">
        <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22.7 15.5001L14.6 1.50011C13.8 0.100109 11.9 -0.399891 10.5 0.400109C10 0.700109 9.60001 1.10011 9.40001 1.50011L1.30001 15.5001C0.500011 16.9001 1.00001 18.8001 2.40001 19.6001C2.90001 19.9001 3.40001 20.0001 3.90001 20.0001H20C21.7 20.0001 23 18.6001 23 17.0001C23.1 16.4001 22.9 15.9001 22.7 15.5001ZM12 16.0001C11.4 16.0001 11 15.6001 11 15.0001C11 14.4001 11.4 14.0001 12 14.0001C12.6 14.0001 13 14.4001 13 15.0001C13 15.6001 12.6 16.0001 12 16.0001ZM13 11.0001C13 11.6001 12.6 12.0001 12 12.0001C11.4 12.0001 11 11.6001 11 11.0001V7.00011C11 6.40011 11.4 6.00011 12 6.00011C12.6 6.00011 13 6.40011 13 7.00011V11.0001Z" fill="#F67A28"></path>
        </svg>
      </span>
      <h3 class="text-orange-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-orange-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </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

Alert generator

Tailwind Component #38

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-red-50 border-l-4 border-red-500 rounded-r-lg">
    <div class="flex items-center">
      <span class="inline-block mr-2">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM10 15C9.4 15 9 14.6 9 14C9 13.4 9.4 13 10 13C10.6 13 11 13.4 11 14C11 14.6 10.6 15 10 15ZM11 10C11 10.6 10.6 11 10 11C9.4 11 9 10.6 9 10V6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6V10Z" fill="#E85444"></path>
        </svg>
      </span>
      <h3 class="text-red-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-red-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </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

Alert generator

Tailwind Component #39

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="p-6 rounded bg-white">
          <div class="flex mb-2">
            <span class="inline-block mr-2">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.00013 0.666656C7.90578 0.666656 6.82215 0.882205 5.8111 1.30099C4.80006 1.71978 3.8814 2.33361 3.10758 3.10743C1.54477 4.67024 0.666799 6.78985 0.666799 8.99999C0.659514 10.9243 1.32579 12.7904 2.55013 14.275L0.883466 15.9417C0.767834 16.0588 0.689504 16.2077 0.658359 16.3693C0.627214 16.531 0.64465 16.6982 0.708466 16.85C0.777681 16.9999 0.889886 17.1259 1.03084 17.212C1.17179 17.298 1.33513 17.3403 1.50013 17.3333H9.00013C11.2103 17.3333 13.3299 16.4553 14.8927 14.8925C16.4555 13.3297 17.3335 11.2101 17.3335 8.99999C17.3335 6.78985 16.4555 4.67024 14.8927 3.10743C13.3299 1.54463 11.2103 0.666656 9.00013 0.666656ZM9.00013 15.6667H3.50847L4.28347 14.8917C4.43868 14.7355 4.52579 14.5243 4.52579 14.3042C4.52579 14.084 4.43868 13.8728 4.28347 13.7167C3.19229 12.6267 2.51278 11.1921 2.36071 9.65732C2.20864 8.12253 2.59342 6.58249 3.44949 5.29959C4.30556 4.01669 5.57996 3.07029 7.05556 2.62163C8.53117 2.17298 10.1167 2.24983 11.542 2.83908C12.9673 3.42834 14.1442 4.49355 14.8722 5.85323C15.6002 7.21291 15.8342 8.78294 15.5344 10.2958C15.2346 11.8087 14.4196 13.1709 13.2281 14.1502C12.0366 15.1295 10.5424 15.6654 9.00013 15.6667ZM13.1668 8.16666H4.83347C4.61245 8.16666 4.40049 8.25445 4.24421 8.41073C4.08793 8.56701 4.00013 8.77898 4.00013 8.99999C4.00013 9.221 4.08793 9.43296 4.24421 9.58924C4.40049 9.74553 4.61245 9.83332 4.83347 9.83332H13.1668C13.3878 9.83332 13.5998 9.74553 13.7561 9.58924C13.9123 9.43296 14.0001 9.221 14.0001 8.99999C14.0001 8.77898 13.9123 8.56701 13.7561 8.41073C13.5998 8.25445 13.3878 8.16666 13.1668 8.16666ZM11.5001 11.5H6.50013C6.27912 11.5 6.06716 11.5878 5.91088 11.7441C5.7546 11.9003 5.6668 12.1123 5.6668 12.3333C5.6668 12.5543 5.7546 12.7663 5.91088 12.9226C6.06716 13.0789 6.27912 13.1667 6.50013 13.1667H11.5001C11.7211 13.1667 11.9331 13.0789 12.0894 12.9226C12.2457 12.7663 12.3335 12.5543 12.3335 12.3333C12.3335 12.1123 12.2457 11.9003 12.0894 11.7441C11.9331 11.5878 11.7211 11.5 11.5001 11.5ZM6.50013 6.49999H11.5001C11.7211 6.49999 11.9331 6.41219 12.0894 6.25591C12.2457 6.09963 12.3335 5.88767 12.3335 5.66666C12.3335 5.44564 12.2457 5.23368 12.0894 5.0774C11.9331 4.92112 11.7211 4.83332 11.5001 4.83332H6.50013C6.27912 4.83332 6.06716 4.92112 5.91088 5.0774C5.7546 5.23368 5.6668 5.44564 5.6668 5.66666C5.6668 5.88767 5.7546 6.09963 5.91088 6.25591C6.06716 6.41219 6.27912 6.49999 6.50013 6.49999Z" fill="#382CDD"></path>
              </svg>
            </span>
            <h3 class="text-sm text-gray-600">Responses</h3>
            <span class="inline-block ml-auto px-2 py-1 text-xs text-gray-500 bg-gray-50 rounded-full">30 Days</span>
          </div>
          <h2 class="mb-2 text-3xl font-bold">1 450</h2>
          <span class="text-xs text-red-500">
            <span class="inline-block mr-2">
              <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.5 4.16667C16.3906 4.16661 16.2822 4.18812 16.181 4.22998C16.0799 4.27183 15.988 4.33322 15.9106 4.41061C15.8332 4.488 15.7719 4.57989 15.73 4.68103C15.6881 4.78216 15.6666 4.89055 15.6667 5V7.15495L10.4225 1.91084C10.3452 1.83344 10.2533 1.77204 10.1522 1.73015C10.0511 1.68825 9.94277 1.66669 9.83333 1.66669C9.7239 1.66669 9.61554 1.68825 9.51445 1.73015C9.41335 1.77204 9.3215 1.83344 9.24414 1.91084L6.50002 4.65495L2.08919 0.244171C1.93245 0.0902454 1.72127 0.00444584 1.50159 0.00544068C1.28191 0.00643553 1.07151 0.094144 0.91617 0.249483C0.760831 0.404822 0.673123 0.61522 0.672128 0.8349C0.671133 1.05458 0.756932 1.26576 0.910858 1.4225L5.91086 6.4225C5.98822 6.4999 6.08007 6.5613 6.18116 6.60319C6.28226 6.64508 6.39062 6.66665 6.50005 6.66665C6.60948 6.66665 6.71784 6.64508 6.81893 6.60319C6.92003 6.5613 7.01188 6.4999 7.08924 6.4225L9.83336 3.67839L14.4883 8.33334H12.3334C12.1123 8.33334 11.9004 8.42113 11.7441 8.57741C11.5878 8.7337 11.5 8.94566 11.5 9.16667C11.5 9.38768 11.5878 9.59965 11.7441 9.75593C11.9004 9.91221 12.1123 10 12.3334 10H16.5C16.6095 10.0001 16.7179 9.97855 16.819 9.9367C16.9201 9.89484 17.012 9.83346 17.0894 9.75607C17.1668 9.67867 17.2282 9.58678 17.2701 9.48565C17.3119 9.38452 17.3334 9.27612 17.3334 9.16667V5C17.3334 4.89055 17.3119 4.78216 17.2701 4.68103C17.2282 4.57989 17.1668 4.488 17.0894 4.41061C17.012 4.33322 16.9201 4.27183 16.819 4.22998C16.7179 4.18812 16.6095 4.16661 16.5 4.16667Z" fill="#E85444"></path>
              </svg>
            </span>
            <span>25% less</span>
          </span>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Stats generator

Tailwind Component #40

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="bg-white rounded">
      <div class="flex flex-wrap items-center pt-5 pb-12 px-6">
        <h3 class="w-full md:w-auto mb-4 md:mb-0 text-2xl font-bold">Traffic Analysis</h3>
        <div class="ml-auto inline-flex text-xs text-gray-500">
          <span class="mr-2">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.4" d="M8 16C12.4183 16 16 12.4183 16 8H8V16Z" fill="#382CDD"></path>
              <path d="M0 8C0 12.4183 3.58172 16 8 16V0C3.58172 0 0 3.58172 0 8Z" fill="#382CDD"></path>
            </svg>
          </span>
          <span>Total Visitors</span>
        </div>
        <div class="ml-6 inline-flex text-xs text-gray-500">
          <span class="mr-2">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.4" d="M8 16C12.4183 16 16 12.4183 16 8H8V16Z" fill="#8128DE"></path>
              <path d="M0 8C0 12.4183 3.58172 16 8 16V0C3.58172 0 0 3.58172 0 8Z" fill="#8128DE"></path>
            </svg>
          </span>
          <span>Engaged Visitors</span>
        </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

Graphs generator

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Components – Artemis Library

Framework

UI Library

Components

Tailwind Component #21

Get the code for 13,400+ components

Teal Left-Border Notification Banner with Dismiss Button

Tailwind Component #22

Get the code for 13,400+ components

Tailwind Component #23

Get the code for 13,400+ components

Four-Up KPI Stat Card Row with 30-Day Trends

Tailwind Component #24

Get the code for 13,400+ components

Recent Transactions Table Card with Status Badges

Tailwind Component #25

Get the code for 13,400+ components

Tailwind Component #26

Get the code for 13,400+ components

Tailwind Component #27

Get the code for 13,400+ components

Artemis Dashboard Top Navigation Bar with Secondary Utility Row

Tailwind Component #28

Get the code for 13,400+ components

Four-Up KPI Stat Card Row with Sparklines

Tailwind Component #29

Get the code for 13,400+ components

Blue Banner with 7 Days Free Demo Heading and 3D Illustration

Tailwind Component #30

Get the code for 13,400+ components

Tailwind Component #31

Get the code for 13,400+ components

Tailwind Component #32

Get the code for 13,400+ components

Project Card Grid with Pagination

Tailwind Component #33

Get the code for 13,400+ components

Tailwind Component #34

Get the code for 13,400+ components

Dark Top Navigation Bar with Logo, Menu Links, and User Profile

Tailwind Component #35

Get the code for 13,400+ components

Tailwind Component #36

Get the code for 13,400+ components

Tailwind Component #37

Get the code for 13,400+ components

Tailwind Component #38

Get the code for 13,400+ components

Tailwind Component #39

Get the code for 13,400+ components

Tailwind Component #40

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support