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

Tailwind CSS

Artemis Dashboard

<section class="py-8" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="relative px-6 pb-6 py-4 bg-white rounded">
          <div class="mb-6">
            <h3 class="text-xl font-bold">Workflow Activity</h3>
            <p class="text-sm text-gray-500">Changes in current tasks</p>
          </div>
          <div class="relative">
            <div class="absolute inset-0 h-full ml-1 w-px px-px bg-gray-300"></div>
            <div class="relative">
              <div class="flex items-center mb-8">
                <span class="inline-block w-2 h-2 ml-px mr-4 rounded-full bg-green-500"></span>
                <div>
                  <a class="mb-1 text-sm font-medium" href="#">Example of task change</a>
                  <div class="flex items-center text-xs text-gray-500">
                    <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="M6.99992 0.333328C5.68138 0.333328 4.39245 0.724321 3.29612 1.45686C2.19979 2.18941 1.34531 3.2306 0.840725 4.44877C0.336141 5.66695 0.204118 7.00739 0.461353 8.3006C0.718588 9.5938 1.35353 10.7817 2.28588 11.714C3.21823 12.6464 4.40611 13.2813 5.69932 13.5386C6.99253 13.7958 8.33297 13.6638 9.55114 13.1592C10.7693 12.6546 11.8105 11.8001 12.5431 10.7038C13.2756 9.60747 13.6666 8.31854 13.6666 7C13.6646 5.23249 12.9616 3.53794 11.7118 2.28812C10.462 1.0383 8.76743 0.335294 6.99992 0.333328ZM6.99992 12.3333C5.94509 12.3333 4.91394 12.0205 4.03688 11.4345C3.15982 10.8485 2.47623 10.0155 2.07256 9.04097C1.6689 8.06643 1.56328 6.99408 1.76907 5.95951C1.97485 4.92495 2.48281 3.97464 3.22869 3.22876C3.97457 2.48288 4.92487 1.97493 5.95944 1.76914C6.99401 1.56335 8.06636 1.66897 9.0409 2.07264C10.0154 2.47631 10.8484 3.15989 11.4344 4.03695C12.0205 4.91402 12.3333 5.94516 12.3333 7C12.3316 8.41399 11.7692 9.7696 10.7694 10.7694C9.76953 11.7693 8.41391 12.3317 6.99992 12.3333ZM8.39868 5.42252L7.66659 5.84538V3.66666C7.66659 3.48985 7.59635 3.32028 7.47133 3.19526C7.3463 3.07023 7.17673 2.99999 6.99992 2.99999C6.82311 2.99999 6.65354 3.07023 6.52852 3.19526C6.40349 3.32028 6.33325 3.48985 6.33325 3.66666V7C6.33328 7.11701 6.3641 7.23196 6.42262 7.33329C6.48114 7.43463 6.56529 7.51878 6.66662 7.57729C6.76795 7.63581 6.8829 7.66663 6.99991 7.66666C7.11693 7.66669 7.23189 7.63593 7.33325 7.57747L9.06535 6.57747C9.14123 6.53372 9.20775 6.47545 9.2611 6.40598C9.31446 6.33652 9.3536 6.25722 9.3763 6.17262C9.399 6.08802 9.40481 5.99978 9.3934 5.91294C9.38198 5.82609 9.35357 5.74235 9.30978 5.66649C9.266 5.59063 9.20769 5.52414 9.1382 5.47082C9.0687 5.4175 8.98939 5.3784 8.90478 5.35574C8.82017 5.33309 8.73192 5.32732 8.64509 5.33878C8.55825 5.35024 8.47452 5.37869 8.39868 5.42252Z" fill="#67798E"></path>
                      </svg>
                    </span>
                    <p>1h ago</p>
                  </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

Tables generator

Tailwind Component #122

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-gray-600 bg-gray-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-white 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 #123

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 p-4">
        <div class="p-6 bg-white rounded shadow">
          <span>
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.9998 0.666656C12.2489 0.666656 10.5151 1.01153 8.89738 1.6816C7.2797 2.35166 5.80985 3.33379 4.57173 4.5719C2.07125 7.07238 0.666488 10.4638 0.666488 14C0.654832 17.0788 1.72088 20.0647 3.67982 22.44L1.01315 25.1067C0.828145 25.2942 0.702816 25.5323 0.652984 25.7909C0.603152 26.0496 0.631049 26.3172 0.733155 26.56C0.843899 26.7999 1.02343 27.0015 1.24895 27.1392C1.47447 27.2769 1.73582 27.3444 1.99982 27.3333H13.9998C17.536 27.3333 20.9274 25.9286 23.4279 23.4281C25.9284 20.9276 27.3332 17.5362 27.3332 14C27.3332 10.4638 25.9284 7.07238 23.4279 4.5719C20.9274 2.07141 17.536 0.666656 13.9998 0.666656V0.666656ZM13.9998 24.6667H5.21316L6.45316 23.4267C6.70149 23.1768 6.84088 22.8389 6.84088 22.4867C6.84088 22.1344 6.70149 21.7965 6.45316 21.5467C4.70727 19.8027 3.62005 17.5074 3.37674 15.0517C3.13343 12.5961 3.74908 10.132 5.11879 8.07935C6.4885 6.02671 8.52754 4.51247 10.8885 3.79462C13.2495 3.07677 15.7863 3.19973 18.0668 4.14254C20.3473 5.08535 22.2303 6.78969 23.3951 8.96518C24.5599 11.1407 24.9343 13.6527 24.4547 16.0733C23.975 18.494 22.6709 20.6734 20.7645 22.2403C18.8582 23.8072 16.4675 24.6647 13.9998 24.6667V24.6667ZM20.6665 12.6667H7.33316C6.97953 12.6667 6.6404 12.8071 6.39035 13.0572C6.1403 13.3072 5.99982 13.6464 5.99982 14C5.99982 14.3536 6.1403 14.6928 6.39035 14.9428C6.6404 15.1928 6.97953 15.3333 7.33316 15.3333H20.6665C21.0201 15.3333 21.3593 15.1928 21.6093 14.9428C21.8593 14.6928 21.9998 14.3536 21.9998 14C21.9998 13.6464 21.8593 13.3072 21.6093 13.0572C21.3593 12.8071 21.0201 12.6667 20.6665 12.6667ZM17.9998 18H9.99982C9.6462 18 9.30706 18.1405 9.05701 18.3905C8.80697 18.6406 8.66649 18.9797 8.66649 19.3333C8.66649 19.6869 8.80697 20.0261 9.05701 20.2761C9.30706 20.5262 9.6462 20.6667 9.99982 20.6667H17.9998C18.3534 20.6667 18.6926 20.5262 18.9426 20.2761C19.1927 20.0261 19.3332 19.6869 19.3332 19.3333C19.3332 18.9797 19.1927 18.6406 18.9426 18.3905C18.6926 18.1405 18.3534 18 17.9998 18ZM9.99982 9.99999H17.9998C18.3534 9.99999 18.6926 9.85951 18.9426 9.60947C19.1927 9.35942 19.3332 9.02028 19.3332 8.66666C19.3332 8.31303 19.1927 7.9739 18.9426 7.72385C18.6926 7.4738 18.3534 7.33332 17.9998 7.33332H9.99982C9.6462 7.33332 9.30706 7.4738 9.05701 7.72385C8.80697 7.9739 8.66649 8.31303 8.66649 8.66666C8.66649 9.02028 8.80697 9.35942 9.05701 9.60947C9.30706 9.85951 9.6462 9.99999 9.99982 9.99999V9.99999Z" fill="#8128DE"></path>
            </svg>
          </span>
          <h3 class="mt-3 mb-1 text-3xl font-bold">1 450</h3>
          <p class="text-sm text-gray-600 font-medium">Responses</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="p-6 bg-white rounded shadow">
          <span>
            <svg width="28" height="26" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.3332 5.66668H19.3332V4.33334C19.3332 3.27248 18.9117 2.25506 18.1616 1.50492C17.4115 0.754771 16.394 0.333344 15.3332 0.333344H12.6665C11.6056 0.333344 10.5882 0.754771 9.83808 1.50492C9.08793 2.25506 8.6665 3.27248 8.6665 4.33334V5.66668H4.6665C3.60564 5.66668 2.58822 6.0881 1.83808 6.83825C1.08793 7.58839 0.666504 8.60581 0.666504 9.66668V21.6667C0.666504 22.7275 1.08793 23.745 1.83808 24.4951C2.58822 25.2452 3.60564 25.6667 4.6665 25.6667H23.3332C24.394 25.6667 25.4115 25.2452 26.1616 24.4951C26.9117 23.745 27.3332 22.7275 27.3332 21.6667V9.66668C27.3332 8.60581 26.9117 7.58839 26.1616 6.83825C25.4115 6.0881 24.394 5.66668 23.3332 5.66668ZM11.3332 4.33334C11.3332 3.97972 11.4736 3.64058 11.7237 3.39053C11.9737 3.14049 12.3129 3.00001 12.6665 3.00001H15.3332C15.6868 3.00001 16.0259 3.14049 16.276 3.39053C16.526 3.64058 16.6665 3.97972 16.6665 4.33334V5.66668H11.3332V4.33334ZM24.6665 21.6667C24.6665 22.0203 24.526 22.3594 24.276 22.6095C24.0259 22.8595 23.6868 23 23.3332 23H4.6665C4.31288 23 3.97374 22.8595 3.7237 22.6095C3.47365 22.3594 3.33317 22.0203 3.33317 21.6667V14.3333C4.63376 14.8492 5.97075 15.2681 7.33317 15.5867V16.3733C7.33317 16.727 7.47365 17.0661 7.7237 17.3161C7.97374 17.5662 8.31288 17.7067 8.6665 17.7067C9.02013 17.7067 9.35927 17.5662 9.60931 17.3161C9.85936 17.0661 9.99984 16.727 9.99984 16.3733V16.0933C11.3256 16.2738 12.6618 16.3674 13.9998 16.3733C15.3379 16.3674 16.674 16.2738 17.9998 16.0933V16.3733C17.9998 16.727 18.1403 17.0661 18.3904 17.3161C18.6404 17.5662 18.9796 17.7067 19.3332 17.7067C19.6868 17.7067 20.0259 17.5662 20.276 17.3161C20.526 17.0661 20.6665 16.727 20.6665 16.3733V15.5867C22.0289 15.2681 23.3659 14.8492 24.6665 14.3333V21.6667ZM24.6665 11.4133C23.3697 11.9607 22.0323 12.4065 20.6665 12.7467V12.3333C20.6665 11.9797 20.526 11.6406 20.276 11.3905C20.0259 11.1405 19.6868 11 19.3332 11C18.9796 11 18.6404 11.1405 18.3904 11.3905C18.1403 11.6406 17.9998 11.9797 17.9998 12.3333V13.32C15.3482 13.7201 12.6515 13.7201 9.99984 13.32V12.3333C9.99984 11.9797 9.85936 11.6406 9.60931 11.3905C9.35927 11.1405 9.02013 11 8.6665 11C8.31288 11 7.97374 11.1405 7.7237 11.3905C7.47365 11.6406 7.33317 11.9797 7.33317 12.3333V12.7733C5.96733 12.4331 4.62998 11.9873 3.33317 11.44V9.66668C3.33317 9.31305 3.47365 8.97392 3.7237 8.72387C3.97374 8.47382 4.31288 8.33334 4.6665 8.33334H23.3332C23.6868 8.33334 24.0259 8.47382 24.276 8.72387C24.526 8.97392 24.6665 9.31305 24.6665 9.66668V11.4133Z" fill="#17BB84"></path>
            </svg>
          </span>
          <h3 class="mt-3 mb-1 text-3xl font-bold">54</h3>
          <p class="text-sm text-gray-600 font-medium">Projects</p>
        </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 #124

Tailwind CSS

Artemis Dashboard

<section class="py-8 px-6 bg-white shadow">
  <nav class="relative">
    <div class="flex items-center">
      <div class="flex items-center mr-auto">
        <a class="flex items-center text-sm hover:text-gray-800" href="#">
          <span class="inline-block mr-2">
            <svg class="text-indigo-500" width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6667 5.66667L9.66668 1.28333C9.20833 0.87337 8.61496 0.646723 8.00002 0.646723C7.38507 0.646723 6.7917 0.87337 6.33335 1.28333L1.33335 5.66667C1.06866 5.90339 0.857435 6.1938 0.713745 6.51854C0.570054 6.84328 0.497195 7.1949 0.500018 7.55V14.8333C0.500018 15.4964 0.76341 16.1323 1.23225 16.6011C1.70109 17.0699 2.33698 17.3333 3.00002 17.3333H13C13.6631 17.3333 14.2989 17.0699 14.7678 16.6011C15.2366 16.1323 15.5 15.4964 15.5 14.8333V7.54167C15.5017 7.18797 15.4282 6.83795 15.2846 6.51473C15.1409 6.19152 14.9303 5.90246 14.6667 5.66667V5.66667ZM9.66668 15.6667H6.33335V11.5C6.33335 11.279 6.42115 11.067 6.57743 10.9107C6.73371 10.7545 6.94567 10.6667 7.16668 10.6667H8.83335C9.05436 10.6667 9.26633 10.7545 9.42261 10.9107C9.57889 11.067 9.66668 11.279 9.66668 11.5V15.6667ZM13.8334 14.8333C13.8334 15.0543 13.7456 15.2663 13.5893 15.4226C13.433 15.5789 13.221 15.6667 13 15.6667H11.3334V11.5C11.3334 10.837 11.07 10.2011 10.6011 9.73223C10.1323 9.26339 9.49639 9 8.83335 9H7.16668C6.50364 9 5.86776 9.26339 5.39892 9.73223C4.93008 10.2011 4.66668 10.837 4.66668 11.5V15.6667H3.00002C2.779 15.6667 2.56704 15.5789 2.41076 15.4226C2.25448 15.2663 2.16668 15.0543 2.16668 14.8333V7.54167C2.16683 7.42334 2.19218 7.30641 2.24103 7.19865C2.28989 7.09088 2.36113 6.99476 2.45002 6.91667L7.45002 2.54167C7.60209 2.40807 7.79759 2.33439 8.00002 2.33439C8.20244 2.33439 8.39794 2.40807 8.55002 2.54167L13.55 6.91667C13.6389 6.99476 13.7101 7.09088 13.759 7.19865C13.8079 7.30641 13.8332 7.42334 13.8334 7.54167V14.8333Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Start</span>
        </a>
        <span class="inline-block mx-3">
          <svg class="text-indigo-500" width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.23242 9.3689C1.06762 9.36887 0.906542 9.31997 0.769534 9.2284C0.632526 9.13683 0.525742 9.0067 0.462684 8.85445C0.399625 8.7022 0.383124 8.53467 0.415263 8.37304C0.447403 8.21141 0.526741 8.06294 0.643249 7.9464L3.58916 5L0.643224 2.05364C0.486959 1.89737 0.399171 1.68543 0.39917 1.46444C0.399169 1.24345 0.486957 1.03151 0.64322 0.875248C0.799483 0.718984 1.01142 0.631195 1.23241 0.631194C1.4534 0.631193 1.66534 0.718981 1.82161 0.875244L5.35676 4.41084C5.43416 4.48819 5.49556 4.58004 5.53745 4.68114C5.57934 4.78224 5.6009 4.89059 5.6009 5.00003C5.6009 5.10946 5.57934 5.21782 5.53745 5.31891C5.49556 5.42001 5.43416 5.51186 5.35676 5.58922L1.82161 9.12478C1.74432 9.20228 1.65249 9.26375 1.55137 9.30564C1.45026 9.34754 1.34186 9.36903 1.23242 9.3689Z" fill="currentColor"></path>
          </svg>
        </span>
        <a class="flex items-center text-sm hover:text-gray-800" href="#">
          <span class="inline-block mr-2">
            <svg class="text-indigo-500" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.09179 13.575C3.01254 13.4991 2.91908 13.4397 2.81679 13.4C2.6139 13.3167 2.38634 13.3167 2.18346 13.4C2.08116 13.4397 1.98771 13.4991 1.90846 13.575C1.83259 13.6543 1.77312 13.7477 1.73346 13.85C1.66964 14.0018 1.6522 14.169 1.68335 14.3307C1.71449 14.4923 1.79282 14.6411 1.90846 14.7583C1.98946 14.8319 2.08247 14.8911 2.18346 14.9333C2.28321 14.9774 2.39106 15.0002 2.50012 15.0002C2.60918 15.0002 2.71704 14.9774 2.81679 14.9333C2.91778 14.8911 3.01079 14.8319 3.09179 14.7583C3.20742 14.6411 3.28575 14.4923 3.3169 14.3307C3.34804 14.169 3.33061 14.0018 3.26679 13.85C3.22713 13.7477 3.16766 13.6543 3.09179 13.575ZM5.83346 6.66667H17.5001C17.7211 6.66667 17.9331 6.57887 18.0894 6.42259C18.2457 6.26631 18.3335 6.05435 18.3335 5.83333C18.3335 5.61232 18.2457 5.40036 18.0894 5.24408C17.9331 5.0878 17.7211 5 17.5001 5H5.83346C5.61244 5 5.40048 5.0878 5.2442 5.24408C5.08792 5.40036 5.00012 5.61232 5.00012 5.83333C5.00012 6.05435 5.08792 6.26631 5.2442 6.42259C5.40048 6.57887 5.61244 6.66667 5.83346 6.66667ZM3.09179 9.40833C2.9746 9.2927 2.82579 9.21437 2.66413 9.18323C2.50248 9.15208 2.33521 9.16952 2.18346 9.23333C2.08247 9.27554 1.98946 9.33472 1.90846 9.40833C1.83259 9.48759 1.77312 9.58104 1.73346 9.68333C1.68937 9.78308 1.6666 9.89094 1.6666 10C1.6666 10.1091 1.68937 10.2169 1.73346 10.3167C1.77566 10.4177 1.83485 10.5107 1.90846 10.5917C1.98946 10.6653 2.08247 10.7245 2.18346 10.7667C2.28321 10.8108 2.39106 10.8335 2.50012 10.8335C2.60918 10.8335 2.71704 10.8108 2.81679 10.7667C2.91778 10.7245 3.01079 10.6653 3.09179 10.5917C3.1654 10.5107 3.22459 10.4177 3.26679 10.3167C3.31088 10.2169 3.33365 10.1091 3.33365 10C3.33365 9.89094 3.31088 9.78308 3.26679 9.68333C3.22713 9.58104 3.16766 9.48759 3.09179 9.40833ZM17.5001 9.16667H5.83346C5.61244 9.16667 5.40048 9.25446 5.2442 9.41074C5.08792 9.56703 5.00012 9.77899 5.00012 10C5.00012 10.221 5.08792 10.433 5.2442 10.5893C5.40048 10.7455 5.61244 10.8333 5.83346 10.8333H17.5001C17.7211 10.8333 17.9331 10.7455 18.0894 10.5893C18.2457 10.433 18.3335 10.221 18.3335 10C18.3335 9.77899 18.2457 9.56703 18.0894 9.41074C17.9331 9.25446 17.7211 9.16667 17.5001 9.16667ZM3.09179 5.24167C3.01254 5.1658 2.91908 5.10633 2.81679 5.06667C2.66503 5.00285 2.49777 4.98542 2.33611 5.01656C2.17445 5.04771 2.02564 5.12604 1.90846 5.24167C1.83485 5.32267 1.77566 5.41568 1.73346 5.51667C1.68937 5.61642 1.6666 5.72427 1.6666 5.83333C1.6666 5.94239 1.68937 6.05025 1.73346 6.15C1.77566 6.25099 1.83485 6.344 1.90846 6.425C1.98946 6.49861 2.08247 6.5578 2.18346 6.6C2.33521 6.66382 2.50248 6.68125 2.66413 6.65011C2.82579 6.61896 2.9746 6.54063 3.09179 6.425C3.1654 6.344 3.22459 6.25099 3.26679 6.15C3.31088 6.05025 3.33365 5.94239 3.33365 5.83333C3.33365 5.72427 3.31088 5.61642 3.26679 5.51667C3.22459 5.41568 3.1654 5.32267 3.09179 5.24167ZM17.5001 13.3333H5.83346C5.61244 13.3333 5.40048 13.4211 5.2442 13.5774C5.08792 13.7337 5.00012 13.9457 5.00012 14.1667C5.00012 14.3877 5.08792 14.5996 5.2442 14.7559C5.40048 14.9122 5.61244 15 5.83346 15H17.5001C17.7211 15 17.9331 14.9122 18.0894 14.7559C18.2457 14.5996 18.3335 14.3877 18.3335 14.1667C18.3335 13.9457 18.2457 13.7337 18.0894 13.5774C17.9331 13.4211 17.7211 13.3333 17.5001 13.3333Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Main Tasks</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

Navbar generator

Tailwind Component #125

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="relative pt-14 bg-white shadow rounded overflow-hidden">
      <button class="absolute top-0 right-0 mr-6 mt-7 z-10 focus:outline-none">
        <svg class="h-3 w-3 text-white" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 0.666504C5.26667 0.666504 4.66667 1.2665 4.66667 1.99984C4.66667 2.73317 5.26667 3.33317 6 3.33317C6.73333 3.33317 7.33333 2.73317 7.33333 1.99984C7.33333 1.2665 6.73333 0.666504 6 0.666504ZM1.33333 0.666504C0.6 0.666504 0 1.2665 0 1.99984C0 2.73317 0.6 3.33317 1.33333 3.33317C2.06667 3.33317 2.66667 2.73317 2.66667 1.99984C2.66667 1.2665 2.06667 0.666504 1.33333 0.666504ZM10.6667 0.666504C9.93333 0.666504 9.33333 1.2665 9.33333 1.99984C9.33333 2.73317 9.93333 3.33317 10.6667 3.33317C11.4 3.33317 12 2.73317 12 1.99984C12 1.2665 11.4 0.666504 10.6667 0.666504Z" fill="currentColor"></path>
        </svg>
      </button>
      <img class="absolute top-0 left-0 w-full h-24 object-cover" src="https://images.unsplash.com/photo-1592580119984-d31e3833fa78?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80">
      <img class="relative w-16 h-16 mb-4 mx-auto rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="">
      <div class="px-6 text-center">
        <h3 class="font-medium">Jane Thomas</h3>
        <p class="mb-6 text-sm text-gray-500">Designer &amp; Front-End Developer</p>
        <div class="flex items-center justify-center mb-6">
          <span class="mr-2">
            <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.8332 0.333496H3.16656C2.50352 0.333496 1.86764 0.596888 1.3988 1.06573C0.929957 1.53457 0.666565 2.17045 0.666565 2.8335V11.1668C0.666565 11.8299 0.929957 12.4658 1.3988 12.9346C1.86764 13.4034 2.50352 13.6668 3.16656 13.6668H14.8332C15.4963 13.6668 16.1322 13.4034 16.601 12.9346C17.0698 12.4658 17.3332 11.8299 17.3332 11.1668V2.8335C17.3332 2.17045 17.0698 1.53457 16.601 1.06573C16.1322 0.596888 15.4963 0.333496 14.8332 0.333496ZM3.16656 2.00016H14.8332C15.0542 2.00016 15.2662 2.08796 15.4225 2.24424C15.5788 2.40052 15.6666 2.61248 15.6666 2.8335L8.9999 6.90016L2.33323 2.8335C2.33323 2.61248 2.42103 2.40052 2.57731 2.24424C2.73359 2.08796 2.94555 2.00016 3.16656 2.00016ZM15.6666 11.1668C15.6666 11.3878 15.5788 11.5998 15.4225 11.7561C15.2662 11.9124 15.0542 12.0002 14.8332 12.0002H3.16656C2.94555 12.0002 2.73359 11.9124 2.57731 11.7561C2.42103 11.5998 2.33323 11.3878 2.33323 11.1668V4.7335L8.56657 8.54183C8.69325 8.61497 8.83695 8.65347 8.98323 8.65347C9.12951 8.65347 9.27322 8.61497 9.3999 8.54183L15.6666 4.7335V11.1668Z" fill="#382CDD"></path>
            </svg>
          </span>
          <p class="text-sm">jane.thomas@shuffle.dev</p>
        </div>
        <div class="mb-6">
          <a class="inline-flex items-center justify-center mr-6 w-10 h-10 bg-gray-50 rounded-full" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" 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

Content generator

Tailwind Component #126

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-red-600 bg-red-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-white 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 #127

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-orange-600 bg-orange-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-white 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 #128

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-indigo-600 bg-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="#D7D5F8"></path>
        </svg>
      </span>
      <h3 class="text-white 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 #129

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-gray-600 bg-gray-500 rounded-r-lg">
    <div class="flex items-center">
      <span class="inline-block mr-2">
        <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 0C3.6 0 0 3.6 0 8C0 13.4 7 19.5 7.3 19.8C7.7 20.1 8.2 20.1 8.6 19.8C9 19.5 16 13.4 16 8C16 3.6 12.4 0 8 0ZM8 12C5.8 12 4 10.2 4 8C4 5.8 5.8 4 8 4C10.2 4 12 5.8 12 8C12 10.2 10.2 12 8 12Z" fill="#E1E4E8"></path>
        </svg>
      </span>
      <h3 class="text-white 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 #130

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="px-6 pb-6 pt-4 bg-white shadow rounded">
      <div class="flex flex-wrap items-center mb-3">
        <div>
          <div class="flex items-center">
            <h3 class="mr-2 text-xl font-bold">Projects In Progress</h3>
            <span class="py-1 px-2 bg-indigo-500 text-xs text-white rounded-full">14 New</span>
          </div>
          <p class="text-sm text-gray-500">Information about recent tasks</p>
        </div>
        <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 class="h-4 w-4 text-indigo-300" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.8334 0.666656H3.16675C1.75008 0.666656 0.666748 1.74999 0.666748 3.16666V14.8333C0.666748 16.25 1.75008 17.3333 3.16675 17.3333H14.8334C16.2501 17.3333 17.3334 16.25 17.3334 14.8333V3.16666C17.3334 1.74999 16.2501 0.666656 14.8334 0.666656ZM12.3334 9.83332H9.83342V12.3333C9.83342 12.8333 9.50008 13.1667 9.00008 13.1667C8.50008 13.1667 8.16675 12.8333 8.16675 12.3333V9.83332H5.66675C5.16675 9.83332 4.83342 9.49999 4.83342 8.99999C4.83342 8.49999 5.16675 8.16666 5.66675 8.16666H8.16675V5.66666C8.16675 5.16666 8.50008 4.83332 9.00008 4.83332C9.50008 4.83332 9.83342 5.16666 9.83342 5.66666V8.16666H12.3334C12.8334 8.16666 13.1667 8.49999 13.1667 8.99999C13.1667 9.49999 12.8334 9.83332 12.3334 9.83332Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Add new</span>
        </a>
      </div>
      <div class="flex justify-between items-center mb-2 p-4 bg-gray-50 rounded">
        <div class="flex items-center">
          <span class="inline-flex w-10 h-10 mr-3 justify-center items-center bg-purple-50 rounded">
            <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

Tables generator

Tailwind Component #131

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-green-600 bg-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="#D1F1E6"></path>
        </svg>
      </span>
      <h3 class="text-white 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 #132

Tailwind CSS

Artemis Dashboard

<section class="py-5 px-6 bg-white shadow">
  <nav>
    <div class="relative flex items-center">
      <div class="flex items-center mr-auto">
        <a class="flex items-center text-sm hover:text-gray-800" href="#">
          <span class="inline-block mr-2">
            <svg class="text-indigo-500" width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6667 5.66667L9.66668 1.28333C9.20833 0.87337 8.61496 0.646723 8.00002 0.646723C7.38507 0.646723 6.7917 0.87337 6.33335 1.28333L1.33335 5.66667C1.06866 5.90339 0.857435 6.1938 0.713745 6.51854C0.570054 6.84328 0.497195 7.1949 0.500018 7.55V14.8333C0.500018 15.4964 0.76341 16.1323 1.23225 16.6011C1.70109 17.0699 2.33698 17.3333 3.00002 17.3333H13C13.6631 17.3333 14.2989 17.0699 14.7678 16.6011C15.2366 16.1323 15.5 15.4964 15.5 14.8333V7.54167C15.5017 7.18797 15.4282 6.83795 15.2846 6.51473C15.1409 6.19152 14.9303 5.90246 14.6667 5.66667V5.66667ZM9.66668 15.6667H6.33335V11.5C6.33335 11.279 6.42115 11.067 6.57743 10.9107C6.73371 10.7545 6.94567 10.6667 7.16668 10.6667H8.83335C9.05436 10.6667 9.26633 10.7545 9.42261 10.9107C9.57889 11.067 9.66668 11.279 9.66668 11.5V15.6667ZM13.8334 14.8333C13.8334 15.0543 13.7456 15.2663 13.5893 15.4226C13.433 15.5789 13.221 15.6667 13 15.6667H11.3334V11.5C11.3334 10.837 11.07 10.2011 10.6011 9.73223C10.1323 9.26339 9.49639 9 8.83335 9H7.16668C6.50364 9 5.86776 9.26339 5.39892 9.73223C4.93008 10.2011 4.66668 10.837 4.66668 11.5V15.6667H3.00002C2.779 15.6667 2.56704 15.5789 2.41076 15.4226C2.25448 15.2663 2.16668 15.0543 2.16668 14.8333V7.54167C2.16683 7.42334 2.19218 7.30641 2.24103 7.19865C2.28989 7.09088 2.36113 6.99476 2.45002 6.91667L7.45002 2.54167C7.60209 2.40807 7.79759 2.33439 8.00002 2.33439C8.20244 2.33439 8.39794 2.40807 8.55002 2.54167L13.55 6.91667C13.6389 6.99476 13.7101 7.09088 13.759 7.19865C13.8079 7.30641 13.8332 7.42334 13.8334 7.54167V14.8333Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Start</span>
        </a>
        <span class="inline-block mx-3">
          <svg class="text-indigo-500" width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.23242 9.3689C1.06762 9.36887 0.906542 9.31997 0.769534 9.2284C0.632526 9.13683 0.525742 9.0067 0.462684 8.85445C0.399625 8.7022 0.383124 8.53467 0.415263 8.37304C0.447403 8.21141 0.526741 8.06294 0.643249 7.9464L3.58916 5L0.643224 2.05364C0.486959 1.89737 0.399171 1.68543 0.39917 1.46444C0.399169 1.24345 0.486957 1.03151 0.64322 0.875248C0.799483 0.718984 1.01142 0.631195 1.23241 0.631194C1.4534 0.631193 1.66534 0.718981 1.82161 0.875244L5.35676 4.41084C5.43416 4.48819 5.49556 4.58004 5.53745 4.68114C5.57934 4.78224 5.6009 4.89059 5.6009 5.00003C5.6009 5.10946 5.57934 5.21782 5.53745 5.31891C5.49556 5.42001 5.43416 5.51186 5.35676 5.58922L1.82161 9.12478C1.74432 9.20228 1.65249 9.26375 1.55137 9.30564C1.45026 9.34754 1.34186 9.36903 1.23242 9.3689Z" fill="currentColor"></path>
          </svg>
        </span>
        <a class="flex items-center text-sm hover:text-gray-800" href="#">
          <span class="inline-block mr-2">
            <svg class="text-indigo-500" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.09179 13.575C3.01254 13.4991 2.91908 13.4397 2.81679 13.4C2.6139 13.3167 2.38634 13.3167 2.18346 13.4C2.08116 13.4397 1.98771 13.4991 1.90846 13.575C1.83259 13.6543 1.77312 13.7477 1.73346 13.85C1.66964 14.0018 1.6522 14.169 1.68335 14.3307C1.71449 14.4923 1.79282 14.6411 1.90846 14.7583C1.98946 14.8319 2.08247 14.8911 2.18346 14.9333C2.28321 14.9774 2.39106 15.0002 2.50012 15.0002C2.60918 15.0002 2.71704 14.9774 2.81679 14.9333C2.91778 14.8911 3.01079 14.8319 3.09179 14.7583C3.20742 14.6411 3.28575 14.4923 3.3169 14.3307C3.34804 14.169 3.33061 14.0018 3.26679 13.85C3.22713 13.7477 3.16766 13.6543 3.09179 13.575ZM5.83346 6.66667H17.5001C17.7211 6.66667 17.9331 6.57887 18.0894 6.42259C18.2457 6.26631 18.3335 6.05435 18.3335 5.83333C18.3335 5.61232 18.2457 5.40036 18.0894 5.24408C17.9331 5.0878 17.7211 5 17.5001 5H5.83346C5.61244 5 5.40048 5.0878 5.2442 5.24408C5.08792 5.40036 5.00012 5.61232 5.00012 5.83333C5.00012 6.05435 5.08792 6.26631 5.2442 6.42259C5.40048 6.57887 5.61244 6.66667 5.83346 6.66667ZM3.09179 9.40833C2.9746 9.2927 2.82579 9.21437 2.66413 9.18323C2.50248 9.15208 2.33521 9.16952 2.18346 9.23333C2.08247 9.27554 1.98946 9.33472 1.90846 9.40833C1.83259 9.48759 1.77312 9.58104 1.73346 9.68333C1.68937 9.78308 1.6666 9.89094 1.6666 10C1.6666 10.1091 1.68937 10.2169 1.73346 10.3167C1.77566 10.4177 1.83485 10.5107 1.90846 10.5917C1.98946 10.6653 2.08247 10.7245 2.18346 10.7667C2.28321 10.8108 2.39106 10.8335 2.50012 10.8335C2.60918 10.8335 2.71704 10.8108 2.81679 10.7667C2.91778 10.7245 3.01079 10.6653 3.09179 10.5917C3.1654 10.5107 3.22459 10.4177 3.26679 10.3167C3.31088 10.2169 3.33365 10.1091 3.33365 10C3.33365 9.89094 3.31088 9.78308 3.26679 9.68333C3.22713 9.58104 3.16766 9.48759 3.09179 9.40833ZM17.5001 9.16667H5.83346C5.61244 9.16667 5.40048 9.25446 5.2442 9.41074C5.08792 9.56703 5.00012 9.77899 5.00012 10C5.00012 10.221 5.08792 10.433 5.2442 10.5893C5.40048 10.7455 5.61244 10.8333 5.83346 10.8333H17.5001C17.7211 10.8333 17.9331 10.7455 18.0894 10.5893C18.2457 10.433 18.3335 10.221 18.3335 10C18.3335 9.77899 18.2457 9.56703 18.0894 9.41074C17.9331 9.25446 17.7211 9.16667 17.5001 9.16667ZM3.09179 5.24167C3.01254 5.1658 2.91908 5.10633 2.81679 5.06667C2.66503 5.00285 2.49777 4.98542 2.33611 5.01656C2.17445 5.04771 2.02564 5.12604 1.90846 5.24167C1.83485 5.32267 1.77566 5.41568 1.73346 5.51667C1.68937 5.61642 1.6666 5.72427 1.6666 5.83333C1.6666 5.94239 1.68937 6.05025 1.73346 6.15C1.77566 6.25099 1.83485 6.344 1.90846 6.425C1.98946 6.49861 2.08247 6.5578 2.18346 6.6C2.33521 6.66382 2.50248 6.68125 2.66413 6.65011C2.82579 6.61896 2.9746 6.54063 3.09179 6.425C3.1654 6.344 3.22459 6.25099 3.26679 6.15C3.31088 6.05025 3.33365 5.94239 3.33365 5.83333C3.33365 5.72427 3.31088 5.61642 3.26679 5.51667C3.22459 5.41568 3.1654 5.32267 3.09179 5.24167ZM17.5001 13.3333H5.83346C5.61244 13.3333 5.40048 13.4211 5.2442 13.5774C5.08792 13.7337 5.00012 13.9457 5.00012 14.1667C5.00012 14.3877 5.08792 14.5996 5.2442 14.7559C5.40048 14.9122 5.61244 15 5.83346 15H17.5001C17.7211 15 17.9331 14.9122 18.0894 14.7559C18.2457 14.5996 18.3335 14.3877 18.3335 14.1667C18.3335 13.9457 18.2457 13.7337 18.0894 13.5774C17.9331 13.4211 17.7211 13.3333 17.5001 13.3333Z" fill="currentColor"></path>
            </svg>
          </span>
          <soan>Main Tasks</soan>

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

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-red-600 bg-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="#FADDDA"></path>
        </svg>
      </span>
      <h3 class="text-white 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 #134

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-orange-600 bg-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="#FDE4D4"></path>
        </svg>
      </span>
      <h3 class="text-white 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 #135

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="pt-3 px-6 mb-6 bg-white rounded border-t-4 border-indigo-500 shadow">
          <div class="flex justify-between items-center pb-3">
            <h3 class="font-medium">Backlog</h3>
            <span class="flex justify-center items-center w-6 h-6 rounded bg-indigo-50 text-indigo-500 text-xs">3</span>
          </div>
        </div>
        <div class="p-6 mb-4 bg-white rounded shadow">
          <div class="flex justify-between items-center mb-6">
            <span class="inline-block py-1 px-2 bg-blue-50 text-xs text-blue-500 rounded-full">Development</span>
            <button class="focus:outline-none">
              <svg class="h-3 w-3 text-gray-200" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 0.666664C5.26667 0.666664 4.66667 1.26666 4.66667 2C4.66667 2.73333 5.26667 3.33333 6 3.33333C6.73333 3.33333 7.33333 2.73333 7.33333 2C7.33333 1.26666 6.73333 0.666664 6 0.666664ZM1.33333 0.666664C0.6 0.666664 0 1.26666 0 2C0 2.73333 0.6 3.33333 1.33333 3.33333C2.06667 3.33333 2.66667 2.73333 2.66667 2C2.66667 1.26666 2.06667 0.666664 1.33333 0.666664ZM10.6667 0.666664C9.93333 0.666664 9.33333 1.26666 9.33333 2C9.33333 2.73333 9.93333 3.33333 10.6667 3.33333C11.4 3.33333 12 2.73333 12 2C12 1.26666 11.4 0.666664 10.6667 0.666664Z" fill="currentColor"></path>
              </svg>
            </button>
          </div>
          <div class="mb-4">
            <h3 class="mb-2 font-medium">Project example name</h3>
            <p class="text-sm text-gray-500">Starting work and assigning tasks. Adding new features and test them to complete the project.</p>
          </div>
          <div class="flex justify-between">

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

Content generator

Tailwind Component #136

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-orange-600 bg-orange-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-white 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 class="pr-6">
      <p class="text-sm text-orange-50">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </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 #137

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-red-600 bg-red-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-white 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 class="pr-6">
      <p class="text-sm text-red-50">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </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 #138

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-green-600 bg-green-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-white 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 class="pr-6">
      <p class="text-sm text-green-50">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </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 #139

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 border-l-4 border-gray-600 bg-gray-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-white 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 class="pr-6">
      <p class="text-sm text-gray-50">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </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 #140

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="pt-3 px-6 bg-white rounded border-t-4 border-indigo-500 shadow">
      <div class="flex justify-between items-center pb-3">
        <h3 class="font-medium">Backlog</h3>
        <span class="flex justify-center items-center w-6 h-6 rounded bg-indigo-50 text-indigo-500 text-xs">3</span>
      </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

Content 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 #121

Get the code for 13,400+ components

Tailwind Component #122

Get the code for 13,400+ components

Tailwind Component #123

Get the code for 13,400+ components

Tailwind Component #124

Get the code for 13,400+ components

Tailwind Component #125

Get the code for 13,400+ components

Tailwind Component #126

Get the code for 13,400+ components

Tailwind Component #127

Get the code for 13,400+ components

Tailwind Component #128

Get the code for 13,400+ components

Tailwind Component #129

Get the code for 13,400+ components

Tailwind Component #130

Get the code for 13,400+ components

Tailwind Component #131

Get the code for 13,400+ components

Tailwind Component #132

Get the code for 13,400+ components

Tailwind Component #133

Get the code for 13,400+ components

Tailwind Component #134

Get the code for 13,400+ components

Tailwind Component #135

Get the code for 13,400+ components

Tailwind Component #136

Get the code for 13,400+ components

Tailwind Component #137

Get the code for 13,400+ components

Tailwind Component #138

Get the code for 13,400+ components

Tailwind Component #139

Get the code for 13,400+ components

Tailwind Component #140

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