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

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 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

Alert generator

Tailwind Component #82

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="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="py-4 bg-white rounded">
          <div class="px-6 pb-6 border-b border-blue-50">
            <h3 class="text-xl font-bold">Social Media Traffic</h3>
            <p class="text-sm text-gray-500">Visits from social media links</p>
          </div>
          <div class="p-6 border-b border-blue-50">
            <div class="flex -mx-4">
              <div class="flex items-center w-1/2 px-4">
                <img class="mr-2 h-6" src="artemis-assets/mini-logos/instagram.svg" alt="">
                <p class="text-sm font-medium">Instagram</p>
              </div>
              <div class="w-1/2 px-4">
                <p class="mb-1 text-xs text-indigo-500 font-medium">90%</p>
                <div class="flex">
                  <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                    <div class="absolute top-0 left-0 h-full w-10/12 bg-indigo-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tables generator

Tailwind Component #83

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="p-6 bg-white rounded">
          <h3 class="text-xl font-bold">Payments</h3>
          <div class="chart" data-type="radial-bar"></div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-6 bg-white rounded">
          <h3 class="text-xl font-bold">Inventory</h3>
          <div class="chart" data-type="radial-bar" data-variant="orange"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Stats generator

Tailwind Component #84

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 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 #85

Tailwind CSS

Artemis Dashboard

<section class="pt-5 px-6 bg-white shadow">
  <nav>
    <div class="pb-5 border-b">
      <div class="relative flex items-center">
        <div class="flex items-center mr-auto">
          <button class="flex items-center">
            <span class="flex justify-center items-center mr-3 w-10 h-10 bg-indigo-500 text-sm text-white rounded-full">EP</span>
            <p class="text-sm font-medium mr-2">Example Project</p>
            <span class="inline-block -mb-px">
              <svg class="text-gray-500" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8596 9.52667L7.99958 12.3933L5.13958 9.52667C5.01404 9.40114 4.84378 9.33061 4.66624 9.33061C4.48871 9.33061 4.31845 9.40114 4.19291 9.52667C4.06738 9.65221 3.99685 9.82247 3.99685 10C3.99685 10.1775 4.06738 10.3478 4.19291 10.4733L7.52624 13.8067C7.65115 13.9308 7.82012 14.0005 7.99624 14.0005C8.17237 14.0005 8.34134 13.9308 8.46624 13.8067L11.7996 10.4733C11.8617 10.4112 11.911 10.3374 11.9447 10.2562C11.9783 10.175 11.9956 10.0879 11.9956 10C11.9956 9.9121 11.9783 9.82505 11.9447 9.74384C11.911 9.66262 11.8617 9.58883 11.7996 9.52667C11.7374 9.46451 11.6636 9.41521 11.5824 9.38157C11.5012 9.34793 11.4142 9.33061 11.3262 9.33061C11.2383 9.33061 11.1513 9.34793 11.0701 9.38157C10.9889 9.41521 10.9151 9.46451 10.8529 9.52667H10.8596ZM5.13958 6.47334L7.99958 3.60667L10.8596 6.47334C10.9845 6.59751 11.1535 6.6672 11.3296 6.6672C11.5057 6.6672 11.6747 6.59751 11.7996 6.47334C11.9237 6.34843 11.9934 6.17946 11.9934 6.00334C11.9934 5.82722 11.9237 5.65825 11.7996 5.53334L8.46624 2.20001C8.40427 2.13752 8.33053 2.08792 8.2493 2.05408C8.16806 2.02023 8.08092 2.00281 7.99291 2.00281C7.9049 2.00281 7.81777 2.02023 7.73653 2.05408C7.65529 2.08792 7.58155 2.13752 7.51958 2.20001L4.18624 5.53334C4.06159 5.65976 3.99227 5.83052 3.99352 6.00805C3.99477 6.18559 4.06649 6.35535 4.19291 6.48001C4.31933 6.60466 4.49009 6.67398 4.66762 6.67273C4.84516 6.67148 5.01493 6.59976 5.13958 6.47334Z" fill="currentColor"></path>
              </svg>
            </span>
          </button>
        </div>
        <div class="flex justify-end lg:hidden">
          <button class="flex items-center">
            <svg class="text-indigo-500 bg-indigo-100 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
              <title>Mobile menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <div class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-10">

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

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="p-12 bg-purple-500 rounded overflow-hidden">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4">
          <h3 class="mb-2 text-4xl font-medium text-red-300">
            <span class="text-white">Generate</span>
            <span>Monthly Reports</span>
          </h3>
          <p class="mb-4 max-w-sm text-sm text-blue-100">Good customer relationship management is the foundation of modern business. Take care of the development.</p>
          <a class="inline-flex items-center py-2 px-3 rounded text-xs text-white bg-red-500 hover:bg-red-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="M4.3335 12.3333H2.3335C2.15669 12.3333 1.98712 12.2631 1.86209 12.1381C1.73707 12.013 1.66683 11.8435 1.66683 11.6666V9.66665C1.66683 9.48984 1.59659 9.32027 1.47157 9.19524C1.34654 9.07022 1.17697 8.99998 1.00016 8.99998C0.823352 8.99998 0.653782 9.07022 0.528758 9.19524C0.403734 9.32027 0.333496 9.48984 0.333496 9.66665V11.6666C0.333496 12.1971 0.54421 12.7058 0.919283 13.0809C1.29436 13.4559 1.80306 13.6666 2.3335 13.6666H4.3335C4.51031 13.6666 4.67988 13.5964 4.8049 13.4714C4.92992 13.3464 5.00016 13.1768 5.00016 13C5.00016 12.8232 4.92992 12.6536 4.8049 12.5286C4.67988 12.4036 4.51031 12.3333 4.3335 12.3333V12.3333ZM1.00016 4.99998C1.17697 4.99998 1.34654 4.92974 1.47157 4.80472C1.59659 4.67969 1.66683 4.51012 1.66683 4.33331V2.33331C1.66683 2.1565 1.73707 1.98693 1.86209 1.86191C1.98712 1.73688 2.15669 1.66665 2.3335 1.66665H4.3335C4.51031 1.66665 4.67988 1.59641 4.8049 1.47138C4.92992 1.34636 5.00016 1.17679 5.00016 0.99998C5.00016 0.823169 4.92992 0.653599 4.8049 0.528575C4.67988 0.403551 4.51031 0.333313 4.3335 0.333313H2.3335C1.80306 0.333313 1.29436 0.544027 0.919283 0.9191C0.54421 1.29417 0.333496 1.80288 0.333496 2.33331V4.33331C0.333496 4.51012 0.403734 4.67969 0.528758 4.80472C0.653782 4.92974 0.823352 4.99998 1.00016 4.99998ZM11.6668 0.333313H9.66683C9.49002 0.333313 9.32045 0.403551 9.19543 0.528575C9.0704 0.653599 9.00016 0.823169 9.00016 0.99998C9.00016 1.17679 9.0704 1.34636 9.19543 1.47138C9.32045 1.59641 9.49002 1.66665 9.66683 1.66665H11.6668C11.8436 1.66665 12.0132 1.73688 12.1382 1.86191C12.2633 1.98693 12.3335 2.1565 12.3335 2.33331V4.33331C12.3335 4.51012 12.4037 4.67969 12.5288 4.80472C12.6538 4.92974 12.8234 4.99998 13.0002 4.99998C13.177 4.99998 13.3465 4.92974 13.4716 4.80472C13.5966 4.67969 13.6668 4.51012 13.6668 4.33331V2.33331C13.6668 1.80288 13.4561 1.29417 13.081 0.9191C12.706 0.544027 12.1973 0.333313 11.6668 0.333313ZM9.66683 6.99998C9.66683 6.82317 9.59659 6.6536 9.47157 6.52858C9.34654 6.40355 9.17697 6.33331 9.00016 6.33331H7.66683V4.99998C7.66683 4.82317 7.59659 4.6536 7.47157 4.52858C7.34654 4.40355 7.17697 4.33331 7.00016 4.33331C6.82335 4.33331 6.65378 4.40355 6.52876 4.52858C6.40373 4.6536 6.3335 4.82317 6.3335 4.99998V6.33331H5.00016C4.82335 6.33331 4.65378 6.40355 4.52876 6.52858C4.40373 6.6536 4.3335 6.82317 4.3335 6.99998C4.3335 7.17679 4.40373 7.34636 4.52876 7.47138C4.65378 7.59641 4.82335 7.66665 5.00016 7.66665H6.3335V8.99998C6.3335 9.17679 6.40373 9.34636 6.52876 9.47138C6.65378 9.59641 6.82335 9.66665 7.00016 9.66665C7.17697 9.66665 7.34654 9.59641 7.47157 9.47138C7.59659 9.34636 7.66683 9.17679 7.66683 8.99998V7.66665H9.00016C9.17697 7.66665 9.34654 7.59641 9.47157 7.47138C9.59659 7.34636 9.66683 7.17679 9.66683 6.99998ZM13.0002 8.99998C12.8234 8.99998 12.6538 9.07022 12.5288 9.19524C12.4037 9.32027 12.3335 9.48984 12.3335 9.66665V11.6666C12.3335 11.8435 12.2633 12.013 12.1382 12.1381C12.0132 12.2631 11.8436 12.3333 11.6668 12.3333H9.66683C9.49002 12.3333 9.32045 12.4036 9.19543 12.5286C9.0704 12.6536 9.00016 12.8232 9.00016 13C9.00016 13.1768 9.0704 13.3464 9.19543 13.4714C9.32045 13.5964 9.49002 13.6666 9.66683 13.6666H11.6668C12.1973 13.6666 12.706 13.4559 13.081 13.0809C13.4561 12.7058 13.6668 12.1971 13.6668 11.6666V9.66665C13.6668 9.48984 13.5966 9.32027 13.4716 9.19524C13.3465 9.07022 13.177 8.99998 13.0002 8.99998Z" fill="#F1988F"></path>
              </svg>
            </span>
            <span>Add New Report</span>
          </a>
        </div>
        <div class="relative w-full md:w-1/2 px-4 hidden md:block">
          <img class="md:absolute top-0 right-0 md:-mt-12 h-72 object-cover" src="artemis-assets/images/saly-group.png" alt="">
        </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

Banners generator

Tailwind Component #87

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="p-6 bg-white rounded">
          <h3 class="text-xl font-bold">Payments</h3>
          <div class="chart" data-type="radial-bar"></div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-6 bg-white rounded">
          <h3 class="text-xl font-bold">Inventory</h3>
          <div class="chart" data-type="radial-bar" data-variant="orange"></div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-6 bg-white rounded">
          <h3 class="text-xl font-bold">Sales</h3>
          <div class="chart" data-type="radial-bar" data-variant="orange"></div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-6 bg-white rounded">
          <h3 class="text-xl font-bold">Returns</h3>

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

Tailwind CSS

Artemis Dashboard

<section class="py-5 px-6 bg-white shadow">
  <nav class="relative">
    <div class="flex items-center">
      <div class="flex items-center mr-auto">
        <button class="flex items-center">
          <svg class="text-indigo-500 bg-indigo-100 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <div class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-10">
        <div class="hidden lg:flex items-center">
          <p class="text-xs font-medium text-gray-500">Completed</p>
          <div class="relative mx-3 bg-gray-50 h-1 rounded" style="width: 300px;">
            <div class="absolute top-0 left-0 w-1/3 h-1 rounded bg-indigo-500"></div>
          </div>
          <p class="text-gray-200 font-medium text-xs">
            <span class="text-indigo-500">3</span>
            /
            <span class="text-gray-500">10</span>
          </p>
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Navbar generator

Tailwind Component #89

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">
          <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>
          <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>
          <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 #90

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 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 #91

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="py-4 bg-white rounded">
      <div class="px-6 pb-6 border-b border-blue-50">
        <h3 class="text-xl font-bold">Social Media Traffic</h3>
        <p class="text-sm text-gray-500">Visits from social media links</p>
      </div>
      <div class="p-6 border-b border-blue-50">
        <div class="flex -mx-4">
          <div class="flex items-center w-1/2 px-4">
            <img class="mr-2 h-6" src="artemis-assets/mini-logos/instagram.svg" alt="">
            <p class="text-sm font-medium">Instagram</p>
          </div>
          <div class="w-1/2 px-4">
            <p class="mb-1 text-xs text-indigo-500 font-medium">90%</p>
            <div class="flex">
              <div class="relative h-1 w-full bg-indigo-50 rounded-full">
                <div class="absolute top-0 left-0 h-full w-10/12 bg-indigo-500 rounded-full"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="p-6 border-b border-blue-50">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tables generator

Tailwind Component #92

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 sm:w-1/2 lg:w-1/4 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 sm:w-1/2 lg:w-1/4 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 #93

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="mx-auto pt-5 pb-16 px-6 bg-white rounded">
      <h3 class="text-xl font-bold mb-12">Subscriptions monitoring</h3>
      <div class="chart mb-10" data-type="donut"></div>
      <div class="flex items-center mb-3">
        <div class="flex items-center">
          <span class="mr-2">
            <svg class="text-blue-500" 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="currentColor"></path>
              <path d="M0 8C0 12.4183 3.58172 16 8 16V0C3.58172 0 0 3.58172 0 8Z" fill="currentColor"></path>
            </svg>
          </span>
          <span class="text-xs text-gray-500">Yearly</span>
        </div>
        <div class="ml-auto">
          <span class="text-xs">$65.450</span>
        </div>
      </div>
      <div class="flex items-center mb-3">
        <div class="flex items-center">
          <span class="mr-2">
            <svg class="text-indigo-500" 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="currentColor"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Graphs generator

Tailwind Component #94

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 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 #95

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-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="#67798E"></path>
        </svg>
      </span>
      <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 #96

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 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 #97

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 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 #98

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="relative p-6 bg-white shadow rounded">
          <button class="absolute top-0 right-0 mt-7 mr-6 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.666656C5.26667 0.666656 4.66667 1.26666 4.66667 1.99999C4.66667 2.73332 5.26667 3.33332 6 3.33332C6.73333 3.33332 7.33333 2.73332 7.33333 1.99999C7.33333 1.26666 6.73333 0.666656 6 0.666656ZM1.33333 0.666656C0.6 0.666656 0 1.26666 0 1.99999C0 2.73332 0.6 3.33332 1.33333 3.33332C2.06667 3.33332 2.66667 2.73332 2.66667 1.99999C2.66667 1.26666 2.06667 0.666656 1.33333 0.666656ZM10.6667 0.666656C9.93333 0.666656 9.33333 1.26666 9.33333 1.99999C9.33333 2.73332 9.93333 3.33332 10.6667 3.33332C11.4 3.33332 12 2.73332 12 1.99999C12 1.26666 11.4 0.666656 10.6667 0.666656Z" fill="currentColor"></path>
            </svg>
          </button>
          <img class="w-20 h-20 p-1 mb-4 mx-auto object-cover rounded-full border border-indigo-50" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4MTQwNjI0Nw&amp;ixlib=rb-4.0.3&amp;q=80&amp;utm_campaign=api-credit&amp;utm_medium=referral&amp;utm_source=unsplash_source&amp;w=1080" alt="">
          <h3 class="text-center font-medium">Jane Grant</h3>
          <p class="mb-6 text-center text-sm text-gray-500">Marketing Manager</p>
          <p class="mb-6 text-xs">She has worked with major companies for years. She has won numerous awards. She runs her website and is willing to support the marketing activities of any company.</p>
          <p class="flex items-center mb-4 text-sm">
            <span class="inline-block mr-2">
              <svg class="h-4 w-4 text-indigo-500" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8332 3.41668H12.3332V2.58334C12.3332 1.9203 12.0698 1.28442 11.6009 0.815577C11.1321 0.346736 10.4962 0.0833435 9.83317 0.0833435H8.1665C7.50346 0.0833435 6.86758 0.346736 6.39874 0.815577C5.9299 1.28442 5.6665 1.9203 5.6665 2.58334V3.41668H3.1665C2.50346 3.41668 1.86758 3.68007 1.39874 4.14891C0.929896 4.61775 0.666504 5.25363 0.666504 5.91668V13.4167C0.666504 14.0797 0.929896 14.7156 1.39874 15.1844C1.86758 15.6533 2.50346 15.9167 3.1665 15.9167H14.8332C15.4962 15.9167 16.1321 15.6533 16.6009 15.1844C17.0698 14.7156 17.3332 14.0797 17.3332 13.4167V5.91668C17.3332 5.25363 17.0698 4.61775 16.6009 4.14891C16.1321 3.68007 15.4962 3.41668 14.8332 3.41668ZM7.33317 2.58334C7.33317 2.36233 7.42097 2.15037 7.57725 1.99409C7.73353 1.83781 7.94549 1.75001 8.1665 1.75001H9.83317C10.0542 1.75001 10.2661 1.83781 10.4224 1.99409C10.5787 2.15037 10.6665 2.36233 10.6665 2.58334V3.41668H7.33317V2.58334ZM15.6665 13.4167C15.6665 13.6377 15.5787 13.8497 15.4224 14.0059C15.2661 14.1622 15.0542 14.25 14.8332 14.25H3.1665C2.94549 14.25 2.73353 14.1622 2.57725 14.0059C2.42097 13.8497 2.33317 13.6377 2.33317 13.4167V9.20834H4.83317V10.0833C4.83317 10.3044 4.92097 10.5163 5.07725 10.6726C5.23353 10.8289 5.44549 10.9167 5.6665 10.9167C5.88752 10.9167 6.09948 10.8289 6.25576 10.6726C6.41204 10.5163 6.49984 10.3044 6.49984 10.0833V9.20834H11.4998V10.0833C11.4998 10.3044 11.5876 10.5163 11.7439 10.6726C11.9002 10.8289 12.1122 10.9167 12.3332 10.9167C12.5542 10.9167 12.7661 10.8289 12.9224 10.6726C13.0787 10.5163 13.1665 10.3044 13.1665 10.0833V9.20834H15.6665V13.4167ZM15.6665 7.58334H2.33317V5.91668C2.33317 5.69566 2.42097 5.4837 2.57725 5.32742C2.73353 5.17114 2.94549 5.08334 3.1665 5.08334H14.8332C15.0542 5.08334 15.2661 5.17114 15.4224 5.32742C15.5787 5.4837 15.6665 5.69566 15.6665 5.91668V7.58334Z" fill="currentColor"></path>
              </svg>
            </span>
            <span>Shuffle</span>
          </p>
          <p class="flex items-center mb-4 text-sm">
            <span class="inline-block mr-2">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Content generator

Tailwind Component #99

Tailwind CSS

Artemis Dashboard

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="shadow rounded overflow-hidden">
      <div class="bg-indigo-500">
        <h3 class="p-6 text-xl font-bold text-white">Sales Monitoring</h3>
        <div class="chart" data-type="area" data-variant="dark-bg"></div>
      </div>
      <div class="flex flex-wrap -m-3 px-6 py-10 bg-white">
        <div class="w-1/2 p-3">
          <div class="py-4 px-6 border rounded">
            <p class="text-xs text-gray-500">Sales per user</p>
            <h3 class="text-3xl font-bold">$1035</h3>
          </div>
        </div>
        <div class="w-1/2 p-3">
          <div class="py-4 px-6 border rounded">
            <p class="text-xs text-gray-500">Inventory</p>
            <h3 class="text-3xl font-bold">$435,122</h3>
          </div>
        </div>
        <div class="w-1/2 p-3">
          <div class="py-4 px-6 border rounded">
            <p class="text-xs text-gray-500">Value of refunds</p>
            <h3 class="text-3xl font-bold">$53,525</h3>

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

Tailwind CSS

Artemis Dashboard

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-red-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <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 class="pr-6">
      <p class="text-sm text-red-700">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

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

Get the code for 13,400+ components

Tailwind Component #82

Get the code for 13,400+ components

Tailwind Component #83

Get the code for 13,400+ components

Tailwind Component #84

Get the code for 13,400+ components

Tailwind Component #85

Get the code for 13,400+ components

Tailwind Component #86

Get the code for 13,400+ components

Tailwind Component #87

Get the code for 13,400+ components

Tailwind Component #88

Get the code for 13,400+ components

Tailwind Component #89

Get the code for 13,400+ components

Tailwind Component #90

Get the code for 13,400+ components

Tailwind Component #91

Get the code for 13,400+ components

Tailwind Component #92

Get the code for 13,400+ components

Tailwind Component #93

Get the code for 13,400+ components

Tailwind Component #94

Get the code for 13,400+ components

Tailwind Component #95

Get the code for 13,400+ components

Tailwind Component #96

Get the code for 13,400+ components

Tailwind Component #97

Get the code for 13,400+ components

Tailwind Component #98

Get the code for 13,400+ components

Tailwind Component #99

Get the code for 13,400+ components

Tailwind Component #100

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