Tailwind Components in Dashy library

Tailwind Component #61

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-0 bg-white border rounded-xl">
      <h3 class="font-heading mb-9 px-7 pt-5 text-lg font-semibold">Expenses statistics</h3>
      <div class="px-7 border-b">
        <div class="chart" data-type="line-graph4"></div>
      </div>
      <div class="flex flex-wrap justify-center divide-x">
        <div class="w-full sm:w-1/2 p-6">
          <div class="flex flex-wrap justify-center -m-1.5">
            <div class="w-auto p-1.5">
              <div class="relative top-0.5 w-3 h-3 bg-neutral-600 rounded-full"></div>
            </div>
            <div class="w-auto p-1.5">
              <p class="mb-1 text-xs font-medium text-neutral-400">Last month</p>
              <h3 class="font-heading font-medium">$23,576.00</h3>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 p-6">
          <div class="flex flex-wrap justify-center -m-1.5">
            <div class="w-auto p-1.5">
              <div class="relative top-0.5 w-3 h-3 bg-gradient-purple-left rounded-full"></div>
            </div>
            <div class="w-auto p-1.5">
              <p class="mb-1 text-xs font-medium text-neutral-400">This month</p>
              <h3 class="font-heading font-medium">$36,198.00</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Tailwind Component #62

Tailwind CSS

Dashy

<section class="overflow-hidden" x-data="{ mobileNavOpen: false, menu: '' }" x-init="menu = $refs.menu1.textContent">
  <nav class="flex items-center justify-between py-3.5 xl:py-2.5 px-7 bg-neutral-50">
    <div class="w-full xl:w-auto px-2 xl:mr-10">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-7" href="#">
          <img src="dashy-assets/logos/dashy-logo-dark.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2 mr-auto">
      <ul class="flex items-center">
        <li class="mr-10">
          <a x-on:click.prevent="menu = $refs.menu1.textContent" class="group inline-block" href="#">
            <span x-ref="menu1" :class="{'text-transparent bg-clip-text bg-gradient-purple-top': menu == $refs.menu1.textContent, 'text-neutral-600': menu != $refs.menu1.textContent}" class="text-sm font-medium text-transparent bg-gradient-purple-top bg-clip-text">Home</span>
          </a>
        </li>
        <li class="mr-10">
          <a x-on:click.prevent="menu = $refs.menu2.textContent" class="group inline-block" href="#">
            <span x-ref="menu2" :class="{'text-transparent bg-clip-text bg-gradient-purple-top': menu == $refs.menu2.textContent, 'text-neutral-600': menu != $refs.menu2.textContent}" class="text-sm font-medium text-neutral-600">Projects</span>
          </a>
        </li>
        <li class="mr-10">
          <a x-on:click.prevent="menu = $refs.menu3.textContent" class="group inline-block" href="#">
            <span x-ref="menu3" :class="{'text-transparent bg-clip-text bg-gradient-purple-top': menu == $refs.menu3.textContent, 'text-neutral-600': menu != $refs.menu3.textContent}" class="text-sm font-medium text-neutral-600">What is Dashy?</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2">
      <div class="md:flex items-center">
        <div class="w-full md:w-auto mb-6 md:mb-0">
          <div class="flex flex-wrap items-center">
            <div class="relative flex items-center mr-4 w-52 border border-neutral-100 rounded-lg focus-within:border-neutral-600 hover:bg-gray-50">
              <input class="w-full px-4 pr-12 py-2 text-sm text-neutral-400 placeholder-neutral-400 bg-transparent outline-none" id="horizontalNav4-1" type="text" placeholder="Search...">
              <div class="absolute right-4">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.2197 16.2803C15.5126 16.5732 15.9874 16.5732 16.2803 16.2803C16.5732 15.9874 16.5732 15.5126 16.2803 15.2197L15.2197 16.2803ZM11.7803 10.7197C11.4874 10.4268 11.0126 10.4268 10.7197 10.7197C10.4268 11.0126 10.4268 11.4874 10.7197 11.7803L11.7803 10.7197ZM12 7.5C12 9.98528 9.98528 12 7.5 12V13.5C10.8137 13.5 13.5 10.8137 13.5 7.5H12ZM7.5 12C5.01472 12 3 9.98528 3 7.5H1.5C1.5 10.8137 4.18629 13.5 7.5 13.5V12ZM3 7.5C3 5.01472 5.01472 3 7.5 3V1.5C4.18629 1.5 1.5 4.18629 1.5 7.5H3ZM7.5 3C9.98528 3 12 5.01472 12 7.5H13.5C13.5 4.18629 10.8137 1.5 7.5 1.5V3ZM16.2803 15.2197L11.7803 10.7197L10.7197 11.7803L15.2197 16.2803L16.2803 15.2197Z" fill="#B8C1CC"></path>
                </svg>
              </div>
            </div>
            <a class="inline-block mr-4" href="#">
              <div class="flex items-center justify-center w-8 h-8 bg-neutral-100 rounded-full">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15 12.75V13.5C15.3033 13.5 15.5768 13.3173 15.6929 13.037C15.809 12.7568 15.7448 12.4342 15.5303 12.2197L15 12.75ZM3 12.75L2.46967 12.2197C2.25517 12.4342 2.191 12.7568 2.30709 13.037C2.42318 13.3173 2.69665 13.5 3 13.5V12.75ZM4.0537 11.6963L4.58403 12.2266H4.58403L4.0537 11.6963ZM7.5 4.00606L7.74993 4.71319C8.04963 4.60726 8.25 4.32392 8.25 4.00606H7.5ZM10.5 4.00606H9.75C9.75 4.32392 9.95037 4.60726 10.2501 4.71319L10.5 4.00606ZM3.53033 13.2803L4.58403 12.2266L3.52337 11.166L2.46967 12.2197L3.53033 13.2803ZM5.25 10.6188V8.25H3.75V10.6188H5.25ZM12.75 8.25V10.6188H14.25V8.25H12.75ZM13.416 12.2266L14.4697 13.2803L15.5303 12.2197L14.4766 11.166L13.416 12.2266ZM4.58403 12.2266C5.01044 11.8002 5.25 11.2219 5.25 10.6188H3.75C3.75 10.8241 3.66848 11.0209 3.52337 11.166L4.58403 12.2266ZM12.75 10.6188C12.75 11.2219 12.9896 11.8002 13.416 12.2266L14.4766 11.166C14.3315 11.0209 14.25 10.8241 14.25 10.6188H12.75ZM7.25007 3.29893C5.21199 4.01929 3.75 5.96295 3.75 8.25H5.25C5.25 6.6184 6.29243 5.22834 7.74993 4.71319L7.25007 3.29893ZM10.2501 4.71319C11.7076 5.22834 12.75 6.6184 12.75 8.25H14.25C14.25 5.96295 12.788 4.01929 10.7499 3.29893L10.2501 4.71319ZM11.25 4.00606V3.75H9.75V4.00606H11.25ZM6.75 3.75V4.00606H8.25V3.75H6.75ZM9 1.5C7.75736 1.5 6.75 2.50736 6.75 3.75H8.25C8.25 3.33579 8.58579 3 9 3V1.5ZM11.25 3.75C11.25 2.50736 10.2426 1.5 9 1.5V3C9.41421 3 9.75 3.33579 9.75 3.75H11.25ZM10.5 13.5C10.5 14.3284 9.82843 15 9 15V16.5C10.6569 16.5 12 15.1569 12 13.5H10.5ZM9 15C8.17157 15 7.5 14.3284 7.5 13.5H6C6 15.1569 7.34315 16.5 9 16.5V15ZM15 12H11.25V13.5H15V12ZM12 13.5V12.75H10.5V13.5H12ZM11.25 12H6.75V13.5H11.25V12ZM6.75 12H3V13.5H6.75V12ZM7.5 13.5V12.75H6V13.5H7.5Z" fill="#0C1523"></path>
                </svg>
              </div>
            </a>
            <a class="inline-flex items-center" href="#">
              <img class="mr-2" src="dashy-assets/images/avatar4.png" alt="">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.6668 6L8.00016 10.6667L3.3335 6" stroke="#0C1523" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed z-10 top-0 left-0 w-full h-full bg-gray-800 opacity-50"></div>
    <nav class="fixed z-20 w-full h-full max-w-xss bg-white">
      <div class="flex flex-wrap items-center justify-between px-7 py-2 pb-1 border-b border-gray-200">
        <div class="w-auto">
          <a class="inline-block" href="#">
            <img src="dashy-assets/logos/dashy-logo-dark.svg" alt="">
          </a>
        </div>
        <div class="w-auto">
          <a class="text-neutral-300 hover:text-neutral-400" href="#">
            <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97944 7.71965C6.68654 8.01254 6.68654 8.48742 6.97944 8.78031C7.27233 9.0732 7.7472 9.0732 8.0401 8.78031L6.97944 7.71965ZM11.1764 4.58331L11.7068 4.05298C11.4139 3.76009 10.939 3.76009 10.6461 4.05298L11.1764 4.58331ZM14.3128 8.78031C14.6057 9.0732 15.0805 9.0732 15.3734 8.78031C15.6663 8.48742 15.6663 8.01254 15.3734 7.71965L14.3128 8.78031ZM15.3734 14.2803C15.6663 13.9874 15.6663 13.5125 15.3734 13.2196C15.0805 12.9268 14.6057 12.9268 14.3128 13.2196L15.3734 14.2803ZM11.1764 17.4166L10.6461 17.947C10.939 18.2399 11.4139 18.2399 11.7068 17.947L11.1764 17.4166ZM8.0401 13.2196C7.7472 12.9268 7.27233 12.9268 6.97944 13.2196C6.68654 13.5125 6.68654 13.9874 6.97944 14.2803L8.0401 13.2196ZM8.0401 8.78031L11.7068 5.11364L10.6461 4.05298L6.97944 7.71965L8.0401 8.78031ZM10.6461 5.11364L14.3128 8.78031L15.3734 7.71965L11.7068 4.05298L10.6461 5.11364ZM14.3128 13.2196L10.6461 16.8863L11.7068 17.947L15.3734 14.2803L14.3128 13.2196ZM11.7068 16.8863L8.0401 13.2196L6.97944 14.2803L10.6461 17.947L11.7068 16.8863Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="py-6 h-full overflow-y-auto">
        <div class="flex flex-col flex-wrap px-7 -m-2.5" x-data="{ outerDropdown: false }">
          <div class="w-auto p-2.5">
            <a x-on:click.prevent="outerDropdown = !outerDropdown" class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/home-2.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Dashboard</p>
            </a>
          </div>
          <div :class="{'hidden': outerDropdown }" class="w-auto p-2.5" x-data="{ dropdown: false }">
            <a x-on:click.prevent="dropdown = !dropdown" class="flex flex-wrap items-center mb-3.5" href="#">
              <img class="mr-3" src="dashy-assets/images/gear.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">People &amp; Settings</p>
            </a>
            <div class="ml-8" :class="{'hidden': dropdown}">
              <div class="flex flex-wrap -m-1">
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">Help with Sketch</a></div>
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">All Documents</a></div>
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">Shared with Me</a></div>
                <div class="w-auto p-1"><a class="font-medium text-neutral-500 hover:text-neutral-600" href="#">Libraries</a></div>
              </div>
            </div>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/loader-rec.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Discover</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/lifebuoy.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Help with Sketch</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/folder-open.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">All Documents</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/user-circle.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Shared with Me</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/link-2-rec.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Libraries</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/list-unordered-3-rec.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">My Drafts</p>
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a class="flex flex-wrap items-center" href="#">
              <img class="mr-3" src="dashy-assets/images/trash.svg" alt="">
              <p class="hover:text-neutral-700 font-medium">Trash</p>
            </a>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

Tailwind Component #63

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-5 bg-white border rounded-xl">
      <div class="flex flex-wrap items-center justify-between mb-5 -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Latest Appointments</h3>
        </div>
        <div class="w-auto p-2">
          <a class="flex items-center hover:text-neutral-500" href="#">
            <span class="mr-2 text-sm font-medium">This week</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.0837 5.25L7.00033 9.33333L2.91699 5.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="flex flex-wrap border-b -m-1">
        <div class="flex-1 p-1"><a class="inline-block pb-3 text-sm text-neutral-400 font-medium" href="#">Customer</a></div>
        <div class="flex-1 p-1"><a class="inline-block pb-3 text-sm text-neutral-400 font-medium" href="#">Time &amp; Date</a></div>
        <div class="flex-1 p-1"><a class="inline-block pb-3 text-sm text-neutral-400 font-medium" href="#">Department</a></div>
      </div>
      <div class="max-w-xs py-16 mx-auto text-center">
        <div class="flex items-center justify-center mx-auto mb-6 w-16 h-16 border rounded-full">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.25 7C7.25 7.41421 7.58579 7.75 8 7.75C8.41421 7.75 8.75 7.41421 8.75 7H7.25ZM8.75 3C8.75 2.58579 8.41421 2.25 8 2.25C7.58579 2.25 7.25 2.58579 7.25 3H8.75ZM15.25 7C15.25 7.41421 15.5858 7.75 16 7.75C16.4142 7.75 16.75 7.41421 16.75 7H15.25ZM16.75 3C16.75 2.58579 16.4142 2.25 16 2.25C15.5858 2.25 15.25 2.58579 15.25 3H16.75ZM7 10.25C6.58579 10.25 6.25 10.5858 6.25 11C6.25 11.4142 6.58579 11.75 7 11.75V10.25ZM17 11.75C17.4142 11.75 17.75 11.4142 17.75 11C17.75 10.5858 17.4142 10.25 17 10.25V11.75ZM5 5.75H19V4.25H5V5.75ZM20.25 7V19H21.75V7H20.25ZM19 20.25H5V21.75H19V20.25ZM3.75 19V7H2.25V19H3.75ZM5 20.25C4.30964 20.25 3.75 19.6904 3.75 19H2.25C2.25 20.5188 3.48122 21.75 5 21.75V20.25ZM20.25 19C20.25 19.6904 19.6904 20.25 19 20.25V21.75C20.5188 21.75 21.75 20.5188 21.75 19H20.25ZM19 5.75C19.6904 5.75 20.25 6.30964 20.25 7H21.75C21.75 5.48122 20.5188 4.25 19 4.25V5.75ZM5 4.25C3.48122 4.25 2.25 5.48122 2.25 7H3.75C3.75 6.30964 4.30964 5.75 5 5.75V4.25ZM8.75 7V3H7.25V7H8.75ZM16.75 7V3H15.25V7H16.75ZM7 11.75H17V10.25H7V11.75Z" fill="#495460"></path>
          </svg>
        </div>
        <p class="mb-6">You don’t have any appointment yet. Start by creating a manual one.</p>
        <a class="inline-flex flex-wrap items-center justify-center px-6 py-2.5 text-sm border hover:border-neutral-200 rounded-lg" href="#">
          <svg class="mr-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.74935 2.66663C8.74935 2.25241 8.41356 1.91663 7.99935 1.91663C7.58514 1.91663 7.24935 2.25241 7.24935 2.66663H8.74935ZM7.24935 13.3333C7.24935 13.7475 7.58514 14.0833 7.99935 14.0833C8.41356 14.0833 8.74935 13.7475 8.74935 13.3333H7.24935ZM13.3327 8.74996C13.7469 8.74996 14.0827 8.41417 14.0827 7.99996C14.0827 7.58575 13.7469 7.24996 13.3327 7.24996L13.3327 8.74996ZM2.66602 7.24996C2.2518 7.24996 1.91602 7.58575 1.91602 7.99996C1.91602 8.41417 2.2518 8.74996 2.66602 8.74996L2.66602 7.24996ZM7.24935 2.66663V13.3333H8.74935V2.66663H7.24935ZM13.3327 7.24996L2.66602 7.24996L2.66602 8.74996L13.3327 8.74996L13.3327 7.24996Z" fill="#0C1523"></path>
          </svg>
          <span class="font-medium">Create Appointment</span>
        </a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #64

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-5 bg-white rounded-xl">
      <div class="chart" data-type="donut-3"></div>
      <p class="font-medium mb-1 text-neutral-400">Valuation</p>
      <h3 class="font-heading mb-2 text-3xl font-semibold">4,591.27</h3>
      <div class="flex items-center">
        <img src="dashy-assets/images/dropdown-red.svg" alt="">
        <p class="text-xs text-neutral-400 font-medium">
          <span class="text-red-500">11.2%</span>
          <span>per year</span>
        </p>
      </div>
    </div>
  </div>
</section>

Tailwind Component #65

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-2">
      <div class="w-full sm:w-1/2 lg:w-1/5 p-2">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <div class="flex flex-wrap justify-between -m-2">
            <div class="w-auto p-2">
              <p class="mb-4 text-sm text-neutral-500 font-medium">Total MRR</p>
              <h3 class="font-heading text-3xl font-semibold">$72,524</h3>
            </div>
            <div class="w-auto p-2">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 9H9.75C9.75 8.58579 9.41421 8.25 9 8.25V9ZM9 12H8.25C8.25 12.4142 8.58579 12.75 9 12.75V12ZM9.75 12.75C10.1642 12.75 10.5 12.4142 10.5 12C10.5 11.5858 10.1642 11.25 9.75 11.25V12.75ZM8.25 8.25C7.83579 8.25 7.5 8.58579 7.5 9C7.5 9.41421 7.83579 9.75 8.25 9.75V8.25ZM9 5.25C8.58579 5.25 8.25 5.58579 8.25 6C8.25 6.41421 8.58579 6.75 9 6.75V5.25ZM9.0075 6.75C9.42171 6.75 9.7575 6.41421 9.7575 6C9.7575 5.58579 9.42171 5.25 9.0075 5.25V6.75ZM8.25 9V12H9.75V9H8.25ZM9 12.75H9.75V11.25H9V12.75ZM9 8.25H8.25V9.75H9V8.25ZM15 9C15 12.3137 12.3137 15 9 15V16.5C13.1421 16.5 16.5 13.1421 16.5 9H15ZM9 15C5.68629 15 3 12.3137 3 9H1.5C1.5 13.1421 4.85786 16.5 9 16.5V15ZM3 9C3 5.68629 5.68629 3 9 3V1.5C4.85786 1.5 1.5 4.85786 1.5 9H3ZM9 3C12.3137 3 15 5.68629 15 9H16.5C16.5 4.85786 13.1421 1.5 9 1.5V3ZM9 6.75H9.0075V5.25H9V6.75Z" fill="#B8C1CC"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-2">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <div class="flex flex-wrap justify-between -m-2">
            <div class="w-auto p-2">
              <p class="mb-4 text-sm text-neutral-500 font-medium">Total Subscriptions</p>
              <h3 class="font-heading text-3xl font-semibold">2,438</h3>
            </div>
            <div class="w-auto p-2">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 9H9.75C9.75 8.58579 9.41421 8.25 9 8.25V9ZM9 12H8.25C8.25 12.4142 8.58579 12.75 9 12.75V12ZM9.75 12.75C10.1642 12.75 10.5 12.4142 10.5 12C10.5 11.5858 10.1642 11.25 9.75 11.25V12.75ZM8.25 8.25C7.83579 8.25 7.5 8.58579 7.5 9C7.5 9.41421 7.83579 9.75 8.25 9.75V8.25ZM9 5.25C8.58579 5.25 8.25 5.58579 8.25 6C8.25 6.41421 8.58579 6.75 9 6.75V5.25ZM9.0075 6.75C9.42171 6.75 9.7575 6.41421 9.7575 6C9.7575 5.58579 9.42171 5.25 9.0075 5.25V6.75ZM8.25 9V12H9.75V9H8.25ZM9 12.75H9.75V11.25H9V12.75ZM9 8.25H8.25V9.75H9V8.25ZM15 9C15 12.3137 12.3137 15 9 15V16.5C13.1421 16.5 16.5 13.1421 16.5 9H15ZM9 15C5.68629 15 3 12.3137 3 9H1.5C1.5 13.1421 4.85786 16.5 9 16.5V15ZM3 9C3 5.68629 5.68629 3 9 3V1.5C4.85786 1.5 1.5 4.85786 1.5 9H3ZM9 3C12.3137 3 15 5.68629 15 9H16.5C16.5 4.85786 13.1421 1.5 9 1.5V3ZM9 6.75H9.0075V5.25H9V6.75Z" fill="#B8C1CC"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-2">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <div class="flex flex-wrap justify-between -m-2">
            <div class="w-auto p-2">
              <p class="mb-4 text-sm text-neutral-500 font-medium">Net Billing</p>
              <h3 class="font-heading text-3xl font-semibold">$262,639</h3>
            </div>
            <div class="w-auto p-2">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 9H9.75C9.75 8.58579 9.41421 8.25 9 8.25V9ZM9 12H8.25C8.25 12.4142 8.58579 12.75 9 12.75V12ZM9.75 12.75C10.1642 12.75 10.5 12.4142 10.5 12C10.5 11.5858 10.1642 11.25 9.75 11.25V12.75ZM8.25 8.25C7.83579 8.25 7.5 8.58579 7.5 9C7.5 9.41421 7.83579 9.75 8.25 9.75V8.25ZM9 5.25C8.58579 5.25 8.25 5.58579 8.25 6C8.25 6.41421 8.58579 6.75 9 6.75V5.25ZM9.0075 6.75C9.42171 6.75 9.7575 6.41421 9.7575 6C9.7575 5.58579 9.42171 5.25 9.0075 5.25V6.75ZM8.25 9V12H9.75V9H8.25ZM9 12.75H9.75V11.25H9V12.75ZM9 8.25H8.25V9.75H9V8.25ZM15 9C15 12.3137 12.3137 15 9 15V16.5C13.1421 16.5 16.5 13.1421 16.5 9H15ZM9 15C5.68629 15 3 12.3137 3 9H1.5C1.5 13.1421 4.85786 16.5 9 16.5V15ZM3 9C3 5.68629 5.68629 3 9 3V1.5C4.85786 1.5 1.5 4.85786 1.5 9H3ZM9 3C12.3137 3 15 5.68629 15 9H16.5C16.5 4.85786 13.1421 1.5 9 1.5V3ZM9 6.75H9.0075V5.25H9V6.75Z" fill="#B8C1CC"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-2">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <div class="flex flex-wrap justify-between -m-2">
            <div class="w-auto p-2">
              <p class="mb-4 text-sm text-neutral-500 font-medium">Net Payments</p>
              <h3 class="font-heading text-3xl font-semibold">$180,620</h3>
            </div>
            <div class="w-auto p-2">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 9H9.75C9.75 8.58579 9.41421 8.25 9 8.25V9ZM9 12H8.25C8.25 12.4142 8.58579 12.75 9 12.75V12ZM9.75 12.75C10.1642 12.75 10.5 12.4142 10.5 12C10.5 11.5858 10.1642 11.25 9.75 11.25V12.75ZM8.25 8.25C7.83579 8.25 7.5 8.58579 7.5 9C7.5 9.41421 7.83579 9.75 8.25 9.75V8.25ZM9 5.25C8.58579 5.25 8.25 5.58579 8.25 6C8.25 6.41421 8.58579 6.75 9 6.75V5.25ZM9.0075 6.75C9.42171 6.75 9.7575 6.41421 9.7575 6C9.7575 5.58579 9.42171 5.25 9.0075 5.25V6.75ZM8.25 9V12H9.75V9H8.25ZM9 12.75H9.75V11.25H9V12.75ZM9 8.25H8.25V9.75H9V8.25ZM15 9C15 12.3137 12.3137 15 9 15V16.5C13.1421 16.5 16.5 13.1421 16.5 9H15ZM9 15C5.68629 15 3 12.3137 3 9H1.5C1.5 13.1421 4.85786 16.5 9 16.5V15ZM3 9C3 5.68629 5.68629 3 9 3V1.5C4.85786 1.5 1.5 4.85786 1.5 9H3ZM9 3C12.3137 3 15 5.68629 15 9H16.5C16.5 4.85786 13.1421 1.5 9 1.5V3ZM9 6.75H9.0075V5.25H9V6.75Z" fill="#B8C1CC"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-2">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <div class="flex flex-wrap justify-between -m-2">
            <div class="w-auto p-2">
              <p class="mb-4 text-sm text-neutral-500 font-medium">Unpaid Invoices</p>
              <h3 class="font-heading text-3xl font-semibold">
                <span>92</span>
                <span class="text-sm text-neutral-500 font-medium">$2,340</span>
              </h3>
            </div>
            <div class="w-auto p-2">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 9H9.75C9.75 8.58579 9.41421 8.25 9 8.25V9ZM9 12H8.25C8.25 12.4142 8.58579 12.75 9 12.75V12ZM9.75 12.75C10.1642 12.75 10.5 12.4142 10.5 12C10.5 11.5858 10.1642 11.25 9.75 11.25V12.75ZM8.25 8.25C7.83579 8.25 7.5 8.58579 7.5 9C7.5 9.41421 7.83579 9.75 8.25 9.75V8.25ZM9 5.25C8.58579 5.25 8.25 5.58579 8.25 6C8.25 6.41421 8.58579 6.75 9 6.75V5.25ZM9.0075 6.75C9.42171 6.75 9.7575 6.41421 9.7575 6C9.7575 5.58579 9.42171 5.25 9.0075 5.25V6.75ZM8.25 9V12H9.75V9H8.25ZM9 12.75H9.75V11.25H9V12.75ZM9 8.25H8.25V9.75H9V8.25ZM15 9C15 12.3137 12.3137 15 9 15V16.5C13.1421 16.5 16.5 13.1421 16.5 9H15ZM9 15C5.68629 15 3 12.3137 3 9H1.5C1.5 13.1421 4.85786 16.5 9 16.5V15ZM3 9C3 5.68629 5.68629 3 9 3V1.5C4.85786 1.5 1.5 4.85786 1.5 9H3ZM9 3C12.3137 3 15 5.68629 15 9H16.5C16.5 4.85786 13.1421 1.5 9 1.5V3ZM9 6.75H9.0075V5.25H9V6.75Z" fill="#B8C1CC"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #66

Tailwind CSS

Dashy

<section class="fixed inset-0 z-50 p-7 flex items-end bg-neutral-500 bg-opacity-80" x-data="{ open: true }" :class="{'hidden': !open}">
  <div class="relative p-3 max-w-sm ml-auto w-full overflow-hidden bg-white rounded-xl shadow-6xl">
    <div class="flex flex-wrap justify-between items-center -m-2">
      <div class="flex-1 p-2">
        <div class="flex flex-wrap -m-1">
          <div class="w-auto p-1">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.2803 12.447C14.5732 12.1541 14.5732 11.6792 14.2803 11.3863C13.9874 11.0934 13.5126 11.0934 13.2197 11.3863L14.2803 12.447ZM11 14.6667L10.4697 15.197C10.7626 15.4899 11.2374 15.4899 11.5303 15.197L11 14.6667ZM8.78033 11.3863C8.48744 11.0934 8.01256 11.0934 7.71967 11.3863C7.42678 11.6792 7.42678 12.1541 7.71967 12.447L8.78033 11.3863ZM11.75 7.33333C11.75 6.91912 11.4142 6.58333 11 6.58333C10.5858 6.58333 10.25 6.91912 10.25 7.33333H11.75ZM13.2197 11.3863L10.4697 14.1363L11.5303 15.197L14.2803 12.447L13.2197 11.3863ZM11.5303 14.1363L8.78033 11.3863L7.71967 12.447L10.4697 15.197L11.5303 14.1363ZM11.75 14.6667L11.75 7.33333H10.25L10.25 14.6667H11.75ZM11 18.5C6.85786 18.5 3.5 15.1421 3.5 11H2C2 15.9706 6.02944 20 11 20V18.5ZM3.5 11C3.5 6.85786 6.85786 3.5 11 3.5V2C6.02944 2 2 6.02944 2 11H3.5ZM11 3.5C15.1421 3.5 18.5 6.85786 18.5 11H20C20 6.02944 15.9706 2 11 2V3.5ZM18.5 11C18.5 15.1421 15.1421 18.5 11 18.5V20C15.9706 20 20 15.9706 20 11H18.5Z" fill="#7F8995"></path>
            </svg>
          </div>
          <div class="flex-1 p-1">
            <h3 class="font-heading text-sm">Download is preparing...</h3>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <button x-on:click="open = false" class="text-neutral-300 hover:text-neutral-400">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.5 13.5L13.5 4.5M4.5 4.5L13.5 13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute -bottom-px left-0 h-1 w-3/4 bg-gradient-purple-left"></div>
  </div>
</section>

Tailwind Component #67

Tailwind CSS

Dashy

<section class="relative" x-data="{ mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent">
  <nav class="flex xl:hidden items-center justify-between py-3.5 px-7 bg-neutral-50">
    <div class="w-full xl:w-auto px-2 xl:mr-10">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-7" href="#">
          <img src="dashy-assets/logos/dashy-circle2-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="relative z-50 hidden xl:flex xl:flex-col">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed xl:hidden inset-0 bg-gray-800 opacity-10"></div>
    <div class="fixed inset-0 max-w-xs3 bg-white">
      <div class="relative z-10 flex justify-center py-5 bg-white border-b">
        <a class="inline-block" href="#">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.6665 4.75C3.25229 4.75 2.9165 5.08579 2.9165 5.5C2.9165 5.91421 3.25229 6.25 3.6665 6.25V4.75ZM18.3332 6.25C18.7474 6.25 19.0832 5.91421 19.0832 5.5C19.0832 5.08579 18.7474 4.75 18.3332 4.75V6.25ZM3.6665 10.25C3.25229 10.25 2.9165 10.5858 2.9165 11C2.9165 11.4142 3.25229 11.75 3.6665 11.75V10.25ZM18.3332 11.75C18.7474 11.75 19.0832 11.4142 19.0832 11C19.0832 10.5858 18.7474 10.25 18.3332 10.25V11.75ZM3.6665 15.75C3.25229 15.75 2.9165 16.0858 2.9165 16.5C2.9165 16.9142 3.25229 17.25 3.6665 17.25V15.75ZM18.3332 17.25C18.7474 17.25 19.0832 16.9142 19.0832 16.5C19.0832 16.0858 18.7474 15.75 18.3332 15.75V17.25ZM3.6665 6.25H18.3332V4.75H3.6665V6.25ZM3.6665 11.75H18.3332V10.25H3.6665V11.75ZM3.6665 17.25H18.3332V15.75H3.6665V17.25Z" fill="#7F8995"></path>
          </svg>
        </a>
      </div>
      <div class="flex-1 flex flex-col py-7 -m-4 overflow-x-hidden overflow-y-auto">
        <div class="w-full p-4">
          <a x-ref="nav1" x-on:click.prevent="nav = $refs.nav1.textContent" class="flex flex-col items-center text-center" href="#">
            <img class="mb-3" src="dashy-assets/images/picture.svg" alt="">
            <p class="text-sm hover:text-neutral-700 font-medium">Photos</p>
          </a>
        </div>
        <div class="w-full p-4">
          <a x-ref="nav2" x-on:click.prevent="nav = $refs.nav2.textContent" class="flex flex-col items-center text-center" href="#">
            <img class="mb-3" src="dashy-assets/images/pencil-alt.svg" alt="">
            <p class="text-sm hover:text-neutral-700 font-medium">Illustrations</p>
          </a>
        </div>
        <div class="w-full p-4">
          <a x-ref="nav3" x-on:click.prevent="nav = $refs.nav3.textContent" class="flex flex-col items-center text-center" href="#">
            <img class="mb-3" src="dashy-assets/images/view-grid.svg" alt="">
            <p class="text-sm hover:text-neutral-700 font-medium">Icons</p>
          </a>
        </div>
        <div class="w-full p-4">
          <a x-ref="nav4" x-on:click.prevent="nav = $refs.nav4.textContent" class="flex flex-col items-center text-center" href="#">
            <img class="mb-3" src="dashy-assets/images/inbox.svg" alt="">
            <p class="text-sm hover:text-neutral-700 font-medium">Backgrounds</p>
          </a>
        </div>
        <div class="w-full p-4">
          <a x-ref="nav5" x-on:click.prevent="nav = $refs.nav5.textContent" class="flex flex-col items-center text-center" href="#">
            <img class="mb-3" src="dashy-assets/images/translate.svg" alt="">
            <p class="text-sm hover:text-neutral-700 font-medium">Texts</p>
          </a>
        </div>
        <div class="w-full p-4">
          <a x-ref="nav6" x-on:click.prevent="nav = $refs.nav6.textContent" class="flex flex-col items-center text-center" href="#">
            <img class="mb-3" src="dashy-assets/images/plus-circle.svg" alt="">
            <p class="text-sm hover:text-neutral-700 font-medium">Uploads</p>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="mx-auto xl:ml-xs3 xl:pl-4"></div>
</section>

Tailwind Component #68

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pt-4 pb-3 bg-neutral-50 border border-neutral-100 rounded-xl">
      <div class="px-6">
        <h3 class="font-heading pb-5 text-lg text-neutral-600 font-semibold">Team Progress</h3>
        <div class="w-full overflow-x-auto">
          <table class="w-full min-w-max">
            <tbody>
              <tr>
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5">
                      <img class="h-10" src="dashy-assets/images/double-avatar.png" alt="">
                    </div>
                    <div class="w-auto p-1.5">
                      <span class="mb-0.5 block font-semibold">Marketing Team</span>
                      <span class="block text-sm text-neutral-500">4 Members</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <img class="ml-auto" src="dashy-assets/images/progress2.svg" alt="">
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5">
                      <img class="h-10" src="dashy-assets/images/double-avatar2.png" alt="">
                    </div>
                    <div class="w-auto p-1.5">
                      <span class="mb-0.5 block font-semibold">Sales Team</span>
                      <span class="block text-sm text-neutral-500">7 Members</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <img class="ml-auto" src="dashy-assets/images/progress-empty2.svg" alt="">
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5">
                      <img class="h-10" src="dashy-assets/images/double-avatar3.png" alt="">
                    </div>
                    <div class="w-auto p-1.5">
                      <span class="mb-0.5 block font-semibold">Design Team</span>
                      <span class="block text-sm text-neutral-500">3 Members</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <img class="ml-auto" src="dashy-assets/images/progress2.svg" alt="">
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5">
                      <img class="h-10" src="dashy-assets/images/double-avatar4.png" alt="">
                    </div>
                    <div class="w-auto p-1.5">
                      <span class="mb-0.5 block font-semibold">Engineering Team</span>
                      <span class="block text-sm text-neutral-500">6 Members</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <img class="ml-auto" src="dashy-assets/images/progress-empty2.svg" alt="">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #69

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-5 pb-7 bg-white border rounded-xl">
      <div class="flex flex-wrap -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-col items-center justify-between h-full">
            <div class="block pb-4">
              <div class="flex items-center justify-center w-10 h-10 border border-neutral-200 rounded-full">
                <span class="text-lg font-semibold">1</span>
              </div>
            </div>
            <div class="w-px h-full border border-dashed"></div>
          </div>
        </div>
        <div class="flex-1 p-2">
          <h3 class="font-heading mb-0.5 text-lg font-semibold">To start, create your first project</h3>
          <p class="mb-7 text-neutral-500">Projects help you organize your events</p>
          <div class="flex flex-wrap max-w-sm pb-11 -m-1">
            <div class="w-full sm:flex-1 p-1">
              <input class="px-4 py-3.5 w-full text-sm text-neutral-400 hover:bg-gray-50 outline-none placeholder-neutral-400 border focus:border-neutral-600 border-neutral-200 rounded-lg" id="stepsInput4-1" type="text" placeholder="Type a name">
            </div>
            <div class="w-full sm:w-auto p-1"><a class="inline-flex flex-wrap items-center justify-center px-5 py-3.5 w-full text-sm text-neutral-50 hover:text-neutral-100 font-medium text-center bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">Create</a></div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-col items-center justify-between h-full">
            <div class="block pb-3">
              <div class="flex items-center justify-center w-10 h-10 border border-neutral-200 rounded-full">
                <span class="text-lg font-semibold">2</span>
              </div>
            </div>
            <div class="w-px h-full border border-dashed"></div>
          </div>
        </div>
        <div class="flex-1 p-2">
          <h3 class="font-heading mb-0.5 text-lg font-semibold">Create a channel for your project</h3>
          <p class="pb-12 text-neutral-500">You can have many channels for your project</p>
        </div>
      </div>
      <div class="flex flex-wrap -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-col items-center justify-between h-full">
            <div class="block pb-3">
              <div class="flex items-center justify-center w-10 h-10 border border-neutral-200 rounded-full">
                <span class="text-lg font-semibold">3</span>
              </div>
            </div>
            <div class="w-px h-full border border-dashed"></div>
          </div>
        </div>
        <div class="flex-1 p-2">
          <h3 class="font-heading mb-0.5 text-lg font-semibold">Generate your API Token</h3>
          <p class="pb-12 text-neutral-500">Tokens are required for publishing events</p>
        </div>
      </div>
      <div class="flex flex-wrap -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-col items-center justify-between h-full">
            <div class="block pb-3">
              <div class="flex items-center justify-center w-10 h-10 border border-neutral-200 rounded-full">
                <span class="text-lg font-semibold">4</span>
              </div>
            </div>
            <div class="w-px h-full border border-dashed"></div>
          </div>
        </div>
        <div class="flex-1 p-2">
          <h3 class="font-heading mb-0.5 text-lg font-semibold">Publish your first event</h3>
          <p class="pb-12 text-neutral-500">Code or no code, we got you covered</p>
        </div>
      </div>
      <div class="flex flex-wrap -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-col items-center justify-between h-full">
            <div class="block pb-3">
              <div class="flex items-center justify-center w-10 h-10 border border-neutral-200 rounded-full">
                <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 7L5 11L15 1" stroke="#0C1523" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </div>
            <div class="w-px h-full border border-dashed"></div>
          </div>
        </div>
        <div class="flex-1 p-2">
          <h3 class="font-heading mb-0.5 text-lg font-semibold">You’re all set!</h3>
          <p class="text-neutral-500">Happy event tracking</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #70

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" :class="{'hidden': !open }" x-data="{ open: true }">
  <div class="container px-4 mx-auto">
    <div class="pt-4 pl-6 pr-4 pb-7 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="flex-1 sm:w-1/2 p-2">
          <p class="mb-7 text-sm">Get access to live flights today! We need specific details to comply with our partners' requirements and Service Agreements.</p>
          <a class="inline-flex px-5 py-2.5 text-sm text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">Go live on Youtube</a>
        </div>
        <div class="w-auto p-2">
          <button x-on:click="open = false" class="relative top-0.5 text-neutral-300 hover:text-neutral-400">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303C3.76256 12.8232 4.23744 12.8232 4.53033 12.5303L3.46967 11.4697ZM12.5303 4.53033C12.8232 4.23744 12.8232 3.76256 12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L12.5303 4.53033ZM4.53033 3.46967C4.23744 3.17678 3.76256 3.17678 3.46967 3.46967C3.17678 3.76256 3.17678 4.23744 3.46967 4.53033L4.53033 3.46967ZM11.4697 12.5303C11.7626 12.8232 12.2374 12.8232 12.5303 12.5303C12.8232 12.2374 12.8232 11.7626 12.5303 11.4697L11.4697 12.5303ZM4.53033 12.5303L12.5303 4.53033L11.4697 3.46967L3.46967 11.4697L4.53033 12.5303ZM3.46967 4.53033L11.4697 12.5303L12.5303 11.4697L4.53033 3.46967L3.46967 4.53033Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #71

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" x-data="{ pagination: 1 }">
  <div class="container px-4 mx-auto">
    <div class="py-5 bg-neutral-50 border border-neutral-100 rounded-xl">
      <div class="px-6">
        <h3 class="font-heading pb-8 text-lg text-neutral-600 font-semibold">Transaction History</h3>
        <div class="mb-5 w-full overflow-x-auto">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="pb-3.5 border-b border-neutral-100">
                  <a class="inline-flex items-center text-sm text-gray-500 font-medium uppercase" href="#">
                    <span class="mr-1.5">Id</span>
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7636 6.56365C5.11508 6.21218 5.68492 6.21218 6.0364 6.56365L9 9.52726L11.9636 6.56365C12.3151 6.21218 12.8849 6.21218 13.2364 6.56365C13.5879 6.91512 13.5879 7.48497 13.2364 7.83645L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.83645C4.41213 7.48497 4.41213 6.91512 4.7636 6.56365Z" fill="#7F8995"></path>
                    </svg>
                  </a>
                </th>
                <th class="pb-3.5 border-b border-neutral-100">
                  <a class="inline-flex items-center text-sm text-gray-500 font-medium" href="#">
                    <span class="mr-1.5">Name</span>
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7636 6.56365C5.11508 6.21218 5.68492 6.21218 6.0364 6.56365L9 9.52726L11.9636 6.56365C12.3151 6.21218 12.8849 6.21218 13.2364 6.56365C13.5879 6.91512 13.5879 7.48497 13.2364 7.83645L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.83645C4.41213 7.48497 4.41213 6.91512 4.7636 6.56365Z" fill="#7F8995"></path>
                    </svg>
                  </a>
                </th>
                <th class="pb-3.5 border-b border-neutral-100">
                  <a class="inline-flex items-center text-sm text-gray-500 font-medium" href="#">
                    <span class="mr-1.5">Price</span>
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7636 6.56365C5.11508 6.21218 5.68492 6.21218 6.0364 6.56365L9 9.52726L11.9636 6.56365C12.3151 6.21218 12.8849 6.21218 13.2364 6.56365C13.5879 6.91512 13.5879 7.48497 13.2364 7.83645L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.83645C4.41213 7.48497 4.41213 6.91512 4.7636 6.56365Z" fill="#7F8995"></path>
                    </svg>
                  </a>
                </th>
                <th class="pb-3.5 border-b border-neutral-100">
                  <a class="inline-flex items-center text-sm text-gray-500 font-medium" href="#">
                    <span class="mr-1.5">Product</span>
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7636 6.56365C5.11508 6.21218 5.68492 6.21218 6.0364 6.56365L9 9.52726L11.9636 6.56365C12.3151 6.21218 12.8849 6.21218 13.2364 6.56365C13.5879 6.91512 13.5879 7.48497 13.2364 7.83645L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.83645C4.41213 7.48497 4.41213 6.91512 4.7636 6.56365Z" fill="#7F8995"></path>
                    </svg>
                  </a>
                </th>
                <th class="pb-3.5 border-b border-neutral-100">
                  <a class="inline-flex items-center text-sm text-gray-500 font-medium" href="#">
                    <span class="mr-1.5">Purchase Time</span>
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7636 6.56365C5.11508 6.21218 5.68492 6.21218 6.0364 6.56365L9 9.52726L11.9636 6.56365C12.3151 6.21218 12.8849 6.21218 13.2364 6.56365C13.5879 6.91512 13.5879 7.48497 13.2364 7.83645L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.83645C4.41213 7.48497 4.41213 6.91512 4.7636 6.56365Z" fill="#7F8995"></path>
                    </svg>
                  </a>
                </th>
                <th class="pb-3.5 border-b border-neutral-100">
                  <a class="inline-flex items-center text-sm text-gray-500 font-medium" href="#">
                    <span class="mr-1.5">Status</span>
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7636 6.56365C5.11508 6.21218 5.68492 6.21218 6.0364 6.56365L9 9.52726L11.9636 6.56365C12.3151 6.21218 12.8849 6.21218 13.2364 6.56365C13.5879 6.91512 13.5879 7.48497 13.2364 7.83645L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.83645C4.41213 7.48497 4.41213 6.91512 4.7636 6.56365Z" fill="#7F8995"></path>
                    </svg>
                  </a>
                </th>
                <th class="pb-3.5 border-b border-neutral-100"></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">29506</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3 h-9" src="dashy-assets/images/avatar5.png" alt="">
                    <span class="font-semibold">Darrell Steward</span>
                  </div>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">$17.84</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">Playstation 4 Limited Edition</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="text-neutral-500 font-medium">15 May 2020 9:00 pm</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="px-2.5 py-1 text-sm font-medium text-green-500 bg-green-500 bg-opacity-10 rounded-full">Confirmed</span>
                </td>
                <td class="py-2.5 border-b border-neutral-100">
                  <a class="inline-flex py-2.5 pr-0" href="#">
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="mx-0.5 w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">29506</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3 h-9" src="dashy-assets/images/avatar6.png" alt="">
                    <span class="font-semibold">Bessie Cooper</span>
                  </div>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">$17.84</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">Gopro Hero 7</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="text-neutral-500 font-medium">15 May 2020 8:00 pm</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="px-2.5 py-1 text-sm font-medium text-red-500 bg-red-500 bg-opacity-10 rounded-full">Canceled</span>
                </td>
                <td class="py-2.5 border-b border-neutral-100">
                  <a class="inline-flex py-2.5 pr-0" href="#">
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="mx-0.5 w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">29506</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3 h-9" src="dashy-assets/images/avatar7.png" alt="">
                    <span class="font-semibold">Annette Black</span>
                  </div>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">$6.48</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">DJI Mavic Pro 2</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="text-neutral-500 font-medium">15 May 2020 7:00 pm</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="px-2.5 py-1 text-sm font-medium text-green-500 bg-green-500 bg-opacity-10 rounded-full">Confirmed</span>
                </td>
                <td class="py-2.5 border-b border-neutral-100">
                  <a class="inline-flex py-2.5 pr-0" href="#">
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="mx-0.5 w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">29506</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center pl-12">
                    <span class="font-semibold">Darlene Robertson</span>
                  </div>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">$14.81</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">Brand New Bike</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="text-neutral-500 font-medium">15 May 2020 6:00 pm</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="px-2.5 py-1 text-sm font-medium text-green-500 bg-green-500 bg-opacity-10 rounded-full">Confirmed</span>
                </td>
                <td class="py-2.5 border-b border-neutral-100">
                  <a class="inline-flex py-2.5 pr-0" href="#">
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="mx-0.5 w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">29506</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3 h-9" src="dashy-assets/images/avatar8.png" alt="">
                    <span class="font-semibold">Jane Cooper</span>
                  </div>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">$8.99</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">Coach Tabby 26</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="text-neutral-500 font-medium">15 May 2020 11:00 pm</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="px-2.5 py-1 text-sm font-medium text-yellow-500 bg-yellow-500 bg-opacity-10 rounded-full">Pending</span>
                </td>
                <td class="py-2.5 border-b border-neutral-100">
                  <a class="inline-flex py-2.5 pr-0" href="#">
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="mx-0.5 w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">29506</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3 h-9" src="dashy-assets/images/avatar9.png" alt="">
                    <span class="font-semibold">Cameron Williamson</span>
                  </div>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">$17.84</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="font-medium">Dell Computer Monitor</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="text-neutral-500 font-medium">15 May 2020 5:00 pm</span>
                </td>
                <td class="py-2.5 pr-4 border-b border-neutral-100">
                  <span class="px-2.5 py-1 text-sm font-medium text-green-500 bg-green-500 bg-opacity-10 rounded-full">Confirmed</span>
                </td>
                <td class="py-2.5 border-b border-neutral-100">
                  <a class="inline-flex py-2.5 pr-0" href="#">
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="mx-0.5 w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-2.5 pr-4">
                  <span class="font-medium">29506</span>
                </td>
                <td class="py-2.5 pr-4">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3 h-9" src="dashy-assets/images/avatar10.png" alt="">
                    <span class="font-semibold">Esther Howard</span>
                  </div>
                </td>
                <td class="py-2.5 pr-4">
                  <span class="font-medium">$5.22</span>
                </td>
                <td class="py-2.5 pr-4">
                  <span class="font-medium">iPad Pro 2017 Model</span>
                </td>
                <td class="py-2.5 pr-4">
                  <span class="text-neutral-500 font-medium">15 May 2020 10:00 pm</span>
                </td>
                <td class="py-2.5 pr-4">
                  <span class="px-2.5 py-1 text-sm font-medium text-green-500 bg-green-500 bg-opacity-10 rounded-full">Confirmed</span>
                </td>
                <td class="py-2.5">
                  <a class="inline-flex py-2.5 pr-0" href="#">
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="mx-0.5 w-1 h-1 bg-neutral-200 rounded-full"></span>
                    <span class="w-1 h-1 bg-neutral-200 rounded-full"></span>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
                <div class="flex flex-wrap -m-0.5">
                  <div class="w-auto p-0.5">
                    <a x-on:click.prevent="pagination > 1 ? pagination-- : pagination" class="flex items-center justify-center w-9 h-9 border rounded-sm hover:border-neutral-300" href="#">
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 10.6666L1.33333 5.99998L6 1.33331" stroke="#71717A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-0.5">
                    <a x-on:click.prevent="pagination = 1" class="flex items-center justify-center w-9 h-9 border border-neutral-600 rounded-sm" :class="{'border-neutral-600': pagination == 1, 'hover:border-neutral-300': pagination != 1}" href="#">
                      <span class="text-sm text-neutral-400 font-semibold">1</span>
                    </a>
                  </div>
                  <div class="w-auto p-0.5">
                    <a x-on:click.prevent="pagination = 2" class="flex items-center justify-center w-9 h-9 border hover:border-neutral-300 rounded-sm" :class="{'border-neutral-600': pagination == 2, 'hover:border-neutral-300': pagination != 2}" href="#">
                      <span class="text-sm text-neutral-400 font-semibold">2</span>
                    </a>
                  </div>
                  <div class="w-auto p-0.5">
                    <a x-on:click.prevent="pagination =3 " class="flex items-center justify-center w-9 h-9 border hover:border-neutral-300 rounded-sm" :class="{'border-neutral-600': pagination == 3, 'hover:border-neutral-300': pagination != 3}" href="#">
                      <span class="text-sm text-neutral-400 font-semibold">3</span>
                    </a>
                  </div>
                  <div class="w-auto p-0.5">
                    <a x-on:click.prevent="pagination = 4" class="flex items-center justify-center w-9 h-9 border hover:border-neutral-300 rounded-sm" :class="{'border-neutral-600': pagination == 4, 'hover:border-neutral-300': pagination != 4}" href="#">
                      <span class="text-sm text-neutral-400 font-semibold">4</span>
                    </a>
                  </div>
                  <div class="w-auto p-0.5">
                    <a x-on:click.prevent="pagination < 4 ? pagination++ : pagination" class="flex items-center justify-center w-9 h-9 border rounded-sm hover:border-neutral-300" href="#">
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 1.33335L5.66667 6.00002L1 10.6667" stroke="#71717A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </a>
                  </div>
                  <div class="w-auto p-0.5">
                    <a x-on:click.prevent="pagination = 4" class="flex items-center justify-center w-9 h-9 border rounded-sm hover:border-neutral-300" href="#">
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 1.33335L5.66667 6.00002L1 10.6667" stroke="#71717A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                      <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 1.33335L5.66667 6.00002L1 10.6667" stroke="#71717A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
          <div class="w-auto p-2">
            <p class="text-sm text-neutral-400">Showing 1 of 20 out of 157 results</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #72

Tailwind CSS

Dashy

<div class="relative px-6 py-5 max-w-sm mx-auto bg-white border rounded-xl" x-data="{ dropdown: false }">
  <div class="flex flex-wrap items-center justify-between -m-2">
    <div class="w-auto p-2">
      <h3 class="font-heading text-lg font-semibold">Daily Visit Insights</h3>
    </div>
    <div class="w-auto p-2">
      <button x-on:click="dropdown = !dropdown" class="flex items-center text-neutral-400 hover:text-neutral-500">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13V11ZM5.01 13C5.56228 13 6.01 12.5523 6.01 12C6.01 11.4477 5.56228 11 5.01 11V13ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13V11ZM12.01 13C12.5623 13 13.01 12.5523 13.01 12C13.01 11.4477 12.5623 11 12.01 11V13ZM19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13V11ZM19.01 13C19.5623 13 20.01 12.5523 20.01 12C20.01 11.4477 19.5623 11 19.01 11V13ZM5 12V14C6.10457 14 7 13.1046 7 12H5ZM5 12H3C3 13.1046 3.89543 14 5 14V12ZM5 12V10C3.89543 10 3 10.8954 3 12H5ZM5 12H7C7 10.8954 6.10457 10 5 10V12ZM12 12V14C13.1046 14 14 13.1046 14 12H12ZM12 12H10C10 13.1046 10.8954 14 12 14V12ZM12 12V10C10.8954 10 10 10.8954 10 12H12ZM12 12H14C14 10.8954 13.1046 10 12 10V12ZM19 12V14C20.1046 14 21 13.1046 21 12H19ZM19 12H17C17 13.1046 17.8954 14 19 14V12ZM19 12V10C17.8954 10 17 10.8954 17 12H19ZM19 12H21C21 10.8954 20.1046 10 19 10V12ZM5 13H5.01V11H5V13ZM12 13H12.01V11H12V13ZM19 13H19.01V11H19V13Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
  <div :class="{'hidden': !dropdown }" class="hidden absolute z-10 top-14 right-7 w-44 bg-white overflow-hidden border rounded-lg shadow-4xl">
    <ul class="py-2">
      <li><a class="block px-4 py-2 text-sm text-neutral-500 hover:text-neutral-600 font-medium" href="#">Edit</a></li>
      <li><a class="block px-4 py-2 text-sm text-neutral-500 hover:text-neutral-600 font-medium" href="#">Analytics</a></li>
      <li><a class="block px-4 py-2 text-sm text-neutral-500 hover:text-neutral-600 font-medium border-b" href="#">View</a></li>
      <li><a class="block px-4 pb-2 pt-4 text-sm text-red-500 hover:text-red-600 font-medium" href="#">Remove</a></li>
    </ul>
  </div>
</div>

Tailwind Component #73

Tailwind CSS

Dashy

<section class="fixed inset-0 z-50 flex items-center justify-center flex-wrap py-20 bg-neutral-500 bg-opacity-80 overflow-y-auto" :class="{'hidden': !open}" x-data="{ open: true }">
  <div class="container px-4 mx-auto">
    <div class="pt-10 px-6 pb-12 text-center max-w-lg mx-auto bg-white border rounded-xl shadow-3xl">
      <svg class="mb-4 mx-auto" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M22.9141 8.2201C22.9436 7.80694 22.6326 7.44808 22.2195 7.41857C21.8063 7.38906 21.4474 7.70007 21.4179 8.11323L22.9141 8.2201ZM21.1541 22.3329L20.406 22.2795L21.1541 22.3329ZM6.84456 22.3329L7.59265 22.2795L6.84456 22.3329ZM6.58078 8.11323C6.55126 7.70007 6.19241 7.38906 5.77925 7.41857C5.36609 7.44808 5.05508 7.80694 5.08459 8.2201L6.58078 8.11323ZM12.416 12.8333C12.416 12.4191 12.0802 12.0833 11.666 12.0833C11.2518 12.0833 10.916 12.4191 10.916 12.8333H12.416ZM10.916 19.8333C10.916 20.2475 11.2518 20.5833 11.666 20.5833C12.0802 20.5833 12.416 20.2475 12.416 19.8333H10.916ZM17.0827 12.8333C17.0827 12.4191 16.7469 12.0833 16.3327 12.0833C15.9185 12.0833 15.5827 12.4191 15.5827 12.8333H17.0827ZM15.5827 19.8333C15.5827 20.2475 15.9185 20.5833 16.3327 20.5833C16.7469 20.5833 17.0827 20.2475 17.0827 19.8333H15.5827ZM16.7493 8.16667C16.7493 8.58088 17.0851 8.91667 17.4993 8.91667C17.9136 8.91667 18.2493 8.58088 18.2493 8.16667H16.7493ZM9.74935 8.16667C9.74935 8.58088 10.0851 8.91667 10.4993 8.91667C10.9136 8.91667 11.2493 8.58088 11.2493 8.16667H9.74935ZM4.66602 7.41667C4.2518 7.41667 3.91602 7.75245 3.91602 8.16667C3.91602 8.58088 4.2518 8.91667 4.66602 8.91667V7.41667ZM23.3327 8.91667C23.7469 8.91667 24.0827 8.58088 24.0827 8.16667C24.0827 7.75245 23.7469 7.41667 23.3327 7.41667V8.91667ZM21.4179 8.11323L20.406 22.2795L21.9022 22.3863L22.9141 8.2201L21.4179 8.11323ZM18.8267 23.75H9.17196V25.25H18.8267V23.75ZM7.59265 22.2795L6.58078 8.11323L5.08459 8.2201L6.09646 22.3863L7.59265 22.2795ZM9.17196 23.75C8.34128 23.75 7.65183 23.108 7.59265 22.2795L6.09646 22.3863C6.21171 23.9999 7.55432 25.25 9.17196 25.25V23.75ZM20.406 22.2795C20.3469 23.108 19.6574 23.75 18.8267 23.75V25.25C20.4444 25.25 21.787 23.9999 21.9022 22.3863L20.406 22.2795ZM10.916 12.8333V19.8333H12.416V12.8333H10.916ZM15.5827 12.8333V19.8333H17.0827V12.8333H15.5827ZM11.666 4.25H16.3327V2.75H11.666V4.25ZM16.7493 4.66667V8.16667H18.2493V4.66667H16.7493ZM11.2493 8.16667V4.66667H9.74935V8.16667H11.2493ZM16.3327 4.25C16.5628 4.25 16.7493 4.43655 16.7493 4.66667H18.2493C18.2493 3.60812 17.3912 2.75 16.3327 2.75V4.25ZM11.666 2.75C10.6075 2.75 9.74935 3.60812 9.74935 4.66667H11.2493C11.2493 4.43655 11.4359 4.25 11.666 4.25V2.75ZM4.66602 8.91667H23.3327V7.41667H4.66602V8.91667Z" fill="#7F8995"></path>
      </svg>
      <h3 class="font-heading mb-2 text-xl font-semibold">Are you sure to remove this data?</h3>
      <p class="mb-6 text-neutral-500">We’re working on improvements to team insights and would love your feedback.</p>
      <div class="flex flex-wrap justify-center -m-1">
        <div class="w-auto p-1"><a x-on:click.prevent="open = false" class="inline-flex px-5 py-2.5 text-sm font-medium border border-neutral-200 hover:border-neutral-300 rounded-lg" href="#">Cancel</a></div>
        <div class="w-auto p-1"><a x-on:click.prevent="open = false" class="inline-flex px-5 py-2.5 text-sm text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">Yes, Remove</a></div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #74

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-3">
      <div class="w-full sm:w-1/2 md:w-1/3 p-3">
        <div class="text-center bg-white border rounded-xl">
          <div class="p-5 pb-9">
            <img class="h-16 mx-auto mb-3.5" src="dashy-assets/images/avatar31.png" alt="">
            <h3 class="font-semibold text-sm">Jenny Wilson</h3>
            <p class="text-xs text-neutral-500">Co-Founder</p>
          </div>
          <div class="flex flex-wrap border-t divide-x">
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.66603 2.70934C1.32138 2.47957 0.855727 2.5727 0.625962 2.91735C0.396198 3.262 0.489328 3.72765 0.833975 3.95741L1.66603 2.70934ZM6.5104 6.84031L6.09437 7.46434H6.09438L6.5104 6.84031ZM7.9896 6.84031L7.57358 6.21627V6.21627L7.9896 6.84031ZM13.666 3.95741C14.0107 3.72765 14.1038 3.262 13.874 2.91735C13.6443 2.5727 13.1786 2.47957 12.834 2.70934L13.666 3.95741ZM2.58333 2.08337H11.9167V0.583374H2.58333V2.08337ZM12.5 2.66671V9.33337H14V2.66671H12.5ZM11.9167 9.91671H2.58333V11.4167H11.9167V9.91671ZM2 9.33337V2.66671H0.5V9.33337H2ZM2.58333 9.91671C2.26117 9.91671 2 9.65554 2 9.33337H0.5C0.5 10.484 1.43274 11.4167 2.58333 11.4167V9.91671ZM12.5 9.33337C12.5 9.65554 12.2388 9.91671 11.9167 9.91671V11.4167C13.0673 11.4167 14 10.484 14 9.33337H12.5ZM11.9167 2.08337C12.2388 2.08337 12.5 2.34454 12.5 2.66671H14C14 1.51611 13.0673 0.583374 11.9167 0.583374V2.08337ZM2.58333 0.583374C1.43274 0.583374 0.5 1.51611 0.5 2.66671H2C2 2.34454 2.26117 2.08337 2.58333 2.08337V0.583374ZM0.833975 3.95741L6.09437 7.46434L6.92642 6.21627L1.66603 2.70934L0.833975 3.95741ZM8.40563 7.46434L13.666 3.95741L12.834 2.70934L7.57358 6.21627L8.40563 7.46434ZM6.09438 7.46434C6.79417 7.93087 7.70584 7.93087 8.40563 7.46434L7.57358 6.21627C7.37763 6.3469 7.12237 6.3469 6.92642 6.21627L6.09438 7.46434Z" fill="#B8C1CC"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.25 3.33333C2.25 2.59695 2.84695 2 3.58333 2H5.76949C6.05645 2 6.31121 2.18362 6.40195 2.45585L7.40049 5.45147C7.50541 5.76622 7.36292 6.11021 7.06618 6.25858L5.56134 7.011C6.29617 8.64081 7.60919 9.95383 9.239 10.6887L9.99142 9.18382C10.1398 8.88708 10.4838 8.74459 10.7985 8.84951L13.7942 9.84805C14.0664 9.93879 14.25 10.1936 14.25 10.4805V12.6667C14.25 13.403 13.653 14 12.9167 14H12.25C6.72715 14 2.25 9.52285 2.25 4V3.33333Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 p-3">
        <div class="text-center bg-white border rounded-xl">
          <div class="p-5 pb-9">
            <img class="h-16 mx-auto mb-3.5" src="dashy-assets/images/avatar32.png" alt="">
            <h3 class="font-semibold text-sm">Darrell Steward</h3>
            <p class="text-xs text-neutral-500">Product Designer</p>
          </div>
          <div class="flex flex-wrap border-t divide-x">
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.66603 2.70934C1.32138 2.47957 0.855727 2.5727 0.625962 2.91735C0.396198 3.262 0.489328 3.72765 0.833975 3.95741L1.66603 2.70934ZM6.5104 6.84031L6.09437 7.46434H6.09438L6.5104 6.84031ZM7.9896 6.84031L7.57358 6.21627V6.21627L7.9896 6.84031ZM13.666 3.95741C14.0107 3.72765 14.1038 3.262 13.874 2.91735C13.6443 2.5727 13.1786 2.47957 12.834 2.70934L13.666 3.95741ZM2.58333 2.08337H11.9167V0.583374H2.58333V2.08337ZM12.5 2.66671V9.33337H14V2.66671H12.5ZM11.9167 9.91671H2.58333V11.4167H11.9167V9.91671ZM2 9.33337V2.66671H0.5V9.33337H2ZM2.58333 9.91671C2.26117 9.91671 2 9.65554 2 9.33337H0.5C0.5 10.484 1.43274 11.4167 2.58333 11.4167V9.91671ZM12.5 9.33337C12.5 9.65554 12.2388 9.91671 11.9167 9.91671V11.4167C13.0673 11.4167 14 10.484 14 9.33337H12.5ZM11.9167 2.08337C12.2388 2.08337 12.5 2.34454 12.5 2.66671H14C14 1.51611 13.0673 0.583374 11.9167 0.583374V2.08337ZM2.58333 0.583374C1.43274 0.583374 0.5 1.51611 0.5 2.66671H2C2 2.34454 2.26117 2.08337 2.58333 2.08337V0.583374ZM0.833975 3.95741L6.09437 7.46434L6.92642 6.21627L1.66603 2.70934L0.833975 3.95741ZM8.40563 7.46434L13.666 3.95741L12.834 2.70934L7.57358 6.21627L8.40563 7.46434ZM6.09438 7.46434C6.79417 7.93087 7.70584 7.93087 8.40563 7.46434L7.57358 6.21627C7.37763 6.3469 7.12237 6.3469 6.92642 6.21627L6.09438 7.46434Z" fill="#B8C1CC"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.25 3.33333C2.25 2.59695 2.84695 2 3.58333 2H5.76949C6.05645 2 6.31121 2.18362 6.40195 2.45585L7.40049 5.45147C7.50541 5.76622 7.36292 6.11021 7.06618 6.25858L5.56134 7.011C6.29617 8.64081 7.60919 9.95383 9.239 10.6887L9.99142 9.18382C10.1398 8.88708 10.4838 8.74459 10.7985 8.84951L13.7942 9.84805C14.0664 9.93879 14.25 10.1936 14.25 10.4805V12.6667C14.25 13.403 13.653 14 12.9167 14H12.25C6.72715 14 2.25 9.52285 2.25 4V3.33333Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 p-3">
        <div class="text-center bg-white border rounded-xl">
          <div class="p-5 pb-9">
            <img class="h-16 mx-auto mb-3.5" src="dashy-assets/images/avatar33.png" alt="">
            <h3 class="font-semibold text-sm">Jerome Bell</h3>
            <p class="text-xs text-neutral-500">Full-Stack Developer</p>
          </div>
          <div class="flex flex-wrap border-t divide-x">
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.66603 2.70934C1.32138 2.47957 0.855727 2.5727 0.625962 2.91735C0.396198 3.262 0.489328 3.72765 0.833975 3.95741L1.66603 2.70934ZM6.5104 6.84031L6.09437 7.46434H6.09438L6.5104 6.84031ZM7.9896 6.84031L7.57358 6.21627V6.21627L7.9896 6.84031ZM13.666 3.95741C14.0107 3.72765 14.1038 3.262 13.874 2.91735C13.6443 2.5727 13.1786 2.47957 12.834 2.70934L13.666 3.95741ZM2.58333 2.08337H11.9167V0.583374H2.58333V2.08337ZM12.5 2.66671V9.33337H14V2.66671H12.5ZM11.9167 9.91671H2.58333V11.4167H11.9167V9.91671ZM2 9.33337V2.66671H0.5V9.33337H2ZM2.58333 9.91671C2.26117 9.91671 2 9.65554 2 9.33337H0.5C0.5 10.484 1.43274 11.4167 2.58333 11.4167V9.91671ZM12.5 9.33337C12.5 9.65554 12.2388 9.91671 11.9167 9.91671V11.4167C13.0673 11.4167 14 10.484 14 9.33337H12.5ZM11.9167 2.08337C12.2388 2.08337 12.5 2.34454 12.5 2.66671H14C14 1.51611 13.0673 0.583374 11.9167 0.583374V2.08337ZM2.58333 0.583374C1.43274 0.583374 0.5 1.51611 0.5 2.66671H2C2 2.34454 2.26117 2.08337 2.58333 2.08337V0.583374ZM0.833975 3.95741L6.09437 7.46434L6.92642 6.21627L1.66603 2.70934L0.833975 3.95741ZM8.40563 7.46434L13.666 3.95741L12.834 2.70934L7.57358 6.21627L8.40563 7.46434ZM6.09438 7.46434C6.79417 7.93087 7.70584 7.93087 8.40563 7.46434L7.57358 6.21627C7.37763 6.3469 7.12237 6.3469 6.92642 6.21627L6.09438 7.46434Z" fill="#B8C1CC"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.25 3.33333C2.25 2.59695 2.84695 2 3.58333 2H5.76949C6.05645 2 6.31121 2.18362 6.40195 2.45585L7.40049 5.45147C7.50541 5.76622 7.36292 6.11021 7.06618 6.25858L5.56134 7.011C6.29617 8.64081 7.60919 9.95383 9.239 10.6887L9.99142 9.18382C10.1398 8.88708 10.4838 8.74459 10.7985 8.84951L13.7942 9.84805C14.0664 9.93879 14.25 10.1936 14.25 10.4805V12.6667C14.25 13.403 13.653 14 12.9167 14H12.25C6.72715 14 2.25 9.52285 2.25 4V3.33333Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 p-3">
        <div class="text-center bg-white border rounded-xl">
          <div class="p-5 pb-9">
            <img class="h-16 mx-auto mb-3.5" src="dashy-assets/images/avatar34.png" alt="">
            <h3 class="font-semibold text-sm">Marvin McKinney</h3>
            <p class="text-xs text-neutral-500">Head of Customer Relation</p>
          </div>
          <div class="flex flex-wrap border-t divide-x">
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.66603 2.70934C1.32138 2.47957 0.855727 2.5727 0.625962 2.91735C0.396198 3.262 0.489328 3.72765 0.833975 3.95741L1.66603 2.70934ZM6.5104 6.84031L6.09437 7.46434H6.09438L6.5104 6.84031ZM7.9896 6.84031L7.57358 6.21627V6.21627L7.9896 6.84031ZM13.666 3.95741C14.0107 3.72765 14.1038 3.262 13.874 2.91735C13.6443 2.5727 13.1786 2.47957 12.834 2.70934L13.666 3.95741ZM2.58333 2.08337H11.9167V0.583374H2.58333V2.08337ZM12.5 2.66671V9.33337H14V2.66671H12.5ZM11.9167 9.91671H2.58333V11.4167H11.9167V9.91671ZM2 9.33337V2.66671H0.5V9.33337H2ZM2.58333 9.91671C2.26117 9.91671 2 9.65554 2 9.33337H0.5C0.5 10.484 1.43274 11.4167 2.58333 11.4167V9.91671ZM12.5 9.33337C12.5 9.65554 12.2388 9.91671 11.9167 9.91671V11.4167C13.0673 11.4167 14 10.484 14 9.33337H12.5ZM11.9167 2.08337C12.2388 2.08337 12.5 2.34454 12.5 2.66671H14C14 1.51611 13.0673 0.583374 11.9167 0.583374V2.08337ZM2.58333 0.583374C1.43274 0.583374 0.5 1.51611 0.5 2.66671H2C2 2.34454 2.26117 2.08337 2.58333 2.08337V0.583374ZM0.833975 3.95741L6.09437 7.46434L6.92642 6.21627L1.66603 2.70934L0.833975 3.95741ZM8.40563 7.46434L13.666 3.95741L12.834 2.70934L7.57358 6.21627L8.40563 7.46434ZM6.09438 7.46434C6.79417 7.93087 7.70584 7.93087 8.40563 7.46434L7.57358 6.21627C7.37763 6.3469 7.12237 6.3469 6.92642 6.21627L6.09438 7.46434Z" fill="#B8C1CC"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.25 3.33333C2.25 2.59695 2.84695 2 3.58333 2H5.76949C6.05645 2 6.31121 2.18362 6.40195 2.45585L7.40049 5.45147C7.50541 5.76622 7.36292 6.11021 7.06618 6.25858L5.56134 7.011C6.29617 8.64081 7.60919 9.95383 9.239 10.6887L9.99142 9.18382C10.1398 8.88708 10.4838 8.74459 10.7985 8.84951L13.7942 9.84805C14.0664 9.93879 14.25 10.1936 14.25 10.4805V12.6667C14.25 13.403 13.653 14 12.9167 14H12.25C6.72715 14 2.25 9.52285 2.25 4V3.33333Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 p-3">
        <div class="text-center bg-white border rounded-xl">
          <div class="p-5 pb-9">
            <img class="h-16 mx-auto mb-3.5" src="dashy-assets/images/avatar35.png" alt="">
            <h3 class="font-semibold text-sm">Eleanor Pena</h3>
            <p class="text-xs text-neutral-500">Chief Marketing Officer</p>
          </div>
          <div class="flex flex-wrap border-t divide-x">
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.66603 2.70934C1.32138 2.47957 0.855727 2.5727 0.625962 2.91735C0.396198 3.262 0.489328 3.72765 0.833975 3.95741L1.66603 2.70934ZM6.5104 6.84031L6.09437 7.46434H6.09438L6.5104 6.84031ZM7.9896 6.84031L7.57358 6.21627V6.21627L7.9896 6.84031ZM13.666 3.95741C14.0107 3.72765 14.1038 3.262 13.874 2.91735C13.6443 2.5727 13.1786 2.47957 12.834 2.70934L13.666 3.95741ZM2.58333 2.08337H11.9167V0.583374H2.58333V2.08337ZM12.5 2.66671V9.33337H14V2.66671H12.5ZM11.9167 9.91671H2.58333V11.4167H11.9167V9.91671ZM2 9.33337V2.66671H0.5V9.33337H2ZM2.58333 9.91671C2.26117 9.91671 2 9.65554 2 9.33337H0.5C0.5 10.484 1.43274 11.4167 2.58333 11.4167V9.91671ZM12.5 9.33337C12.5 9.65554 12.2388 9.91671 11.9167 9.91671V11.4167C13.0673 11.4167 14 10.484 14 9.33337H12.5ZM11.9167 2.08337C12.2388 2.08337 12.5 2.34454 12.5 2.66671H14C14 1.51611 13.0673 0.583374 11.9167 0.583374V2.08337ZM2.58333 0.583374C1.43274 0.583374 0.5 1.51611 0.5 2.66671H2C2 2.34454 2.26117 2.08337 2.58333 2.08337V0.583374ZM0.833975 3.95741L6.09437 7.46434L6.92642 6.21627L1.66603 2.70934L0.833975 3.95741ZM8.40563 7.46434L13.666 3.95741L12.834 2.70934L7.57358 6.21627L8.40563 7.46434ZM6.09438 7.46434C6.79417 7.93087 7.70584 7.93087 8.40563 7.46434L7.57358 6.21627C7.37763 6.3469 7.12237 6.3469 6.92642 6.21627L6.09438 7.46434Z" fill="#B8C1CC"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.25 3.33333C2.25 2.59695 2.84695 2 3.58333 2H5.76949C6.05645 2 6.31121 2.18362 6.40195 2.45585L7.40049 5.45147C7.50541 5.76622 7.36292 6.11021 7.06618 6.25858L5.56134 7.011C6.29617 8.64081 7.60919 9.95383 9.239 10.6887L9.99142 9.18382C10.1398 8.88708 10.4838 8.74459 10.7985 8.84951L13.7942 9.84805C14.0664 9.93879 14.25 10.1936 14.25 10.4805V12.6667C14.25 13.403 13.653 14 12.9167 14H12.25C6.72715 14 2.25 9.52285 2.25 4V3.33333Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 p-3">
        <div class="text-center bg-white border rounded-xl">
          <div class="p-5 pb-9">
            <img class="h-16 mx-auto mb-3.5" src="dashy-assets/images/avatar36.png" alt="">
            <h3 class="font-semibold text-sm">Kristin Watson</h3>
            <p class="text-xs text-neutral-500">3D Designer</p>
          </div>
          <div class="flex flex-wrap border-t divide-x">
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.66603 2.70934C1.32138 2.47957 0.855727 2.5727 0.625962 2.91735C0.396198 3.262 0.489328 3.72765 0.833975 3.95741L1.66603 2.70934ZM6.5104 6.84031L6.09437 7.46434H6.09438L6.5104 6.84031ZM7.9896 6.84031L7.57358 6.21627V6.21627L7.9896 6.84031ZM13.666 3.95741C14.0107 3.72765 14.1038 3.262 13.874 2.91735C13.6443 2.5727 13.1786 2.47957 12.834 2.70934L13.666 3.95741ZM2.58333 2.08337H11.9167V0.583374H2.58333V2.08337ZM12.5 2.66671V9.33337H14V2.66671H12.5ZM11.9167 9.91671H2.58333V11.4167H11.9167V9.91671ZM2 9.33337V2.66671H0.5V9.33337H2ZM2.58333 9.91671C2.26117 9.91671 2 9.65554 2 9.33337H0.5C0.5 10.484 1.43274 11.4167 2.58333 11.4167V9.91671ZM12.5 9.33337C12.5 9.65554 12.2388 9.91671 11.9167 9.91671V11.4167C13.0673 11.4167 14 10.484 14 9.33337H12.5ZM11.9167 2.08337C12.2388 2.08337 12.5 2.34454 12.5 2.66671H14C14 1.51611 13.0673 0.583374 11.9167 0.583374V2.08337ZM2.58333 0.583374C1.43274 0.583374 0.5 1.51611 0.5 2.66671H2C2 2.34454 2.26117 2.08337 2.58333 2.08337V0.583374ZM0.833975 3.95741L6.09437 7.46434L6.92642 6.21627L1.66603 2.70934L0.833975 3.95741ZM8.40563 7.46434L13.666 3.95741L12.834 2.70934L7.57358 6.21627L8.40563 7.46434ZM6.09438 7.46434C6.79417 7.93087 7.70584 7.93087 8.40563 7.46434L7.57358 6.21627C7.37763 6.3469 7.12237 6.3469 6.92642 6.21627L6.09438 7.46434Z" fill="#B8C1CC"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2">
              <a class="flex items-center justify-center py-3" href="#">
                <svg class="mr-3" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.25 3.33333C2.25 2.59695 2.84695 2 3.58333 2H5.76949C6.05645 2 6.31121 2.18362 6.40195 2.45585L7.40049 5.45147C7.50541 5.76622 7.36292 6.11021 7.06618 6.25858L5.56134 7.011C6.29617 8.64081 7.60919 9.95383 9.239 10.6887L9.99142 9.18382C10.1398 8.88708 10.4838 8.74459 10.7985 8.84951L13.7942 9.84805C14.0664 9.93879 14.25 10.1936 14.25 10.4805V12.6667C14.25 13.403 13.653 14 12.9167 14H12.25C6.72715 14 2.25 9.52285 2.25 4V3.33333Z" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="text-xs font-medium hover:text-neutral-700">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #75

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="bg-white overflow-hidden border rounded-xl">
      <div class="flex flex-wrap divide-y">
        <div class="w-full">
          <div class="p-5">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <h3 class="text-lg font-semibold">Live Chat Feature</h3>
              </div>
              <div class="w-auto p-2"><a class="inline-flex flex-wrap items-center px-4 py-2 font-medium text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">Add new</a></div>
            </div>
          </div>
        </div>
        <div class="w-full">
          <div class="p-5">
            <div class="flex flex-wrap items-center -m-1.5">
              <div class="w-auto p-1.5">
                <img src="dashy-assets/images/sales.png" alt="">
              </div>
              <div class="w-auto p-1.5">
                <h3 class="font-heading font-semibold">Make Sales from Website</h3>
                <p class="text-neutral-500">Take the benefits of live chat</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #76

Tailwind CSS

Dashy

<section class="py-4 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-9">
      <div class="w-full sm:w-1/2 lg:w-1/5 p-9">
        <div class="px-4 py-2.5 h-full">
          <p class="mb-0.5 text-sm font-semibold">Adam Smith</p>
          <p class="text-xs text-neutral-400 font-medium">@smith420</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-9">
        <div class="px-4 py-2.5 h-full">
          <p class="mb-1 text-sm text-neutral-500 font-medium">Tweets</p>
          <div class="flex flex-wrap items-center -m-1">
            <div class="w-auto p-1">
              <h3 class="font-heading text-2xl font-semibold">28</h3>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap items-center">
                <svg class="mr-0.5" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.96967 4.46967C1.67678 4.76256 1.67678 5.23744 1.96967 5.53033C2.26256 5.82322 2.73744 5.82322 3.03033 5.53033L1.96967 4.46967ZM6 1.5L6.53033 0.96967C6.23744 0.676777 5.76256 0.676777 5.46967 0.96967L6 1.5ZM8.96967 5.53033C9.26256 5.82322 9.73744 5.82322 10.0303 5.53033C10.3232 5.23744 10.3232 4.76256 10.0303 4.46967L8.96967 5.53033ZM5.25 10.5C5.25 10.9142 5.58579 11.25 6 11.25C6.41421 11.25 6.75 10.9142 6.75 10.5H5.25ZM3.03033 5.53033L6.53033 2.03033L5.46967 0.96967L1.96967 4.46967L3.03033 5.53033ZM5.46967 2.03033L8.96967 5.53033L10.0303 4.46967L6.53033 0.96967L5.46967 2.03033ZM5.25 1.5V10.5H6.75V1.5H5.25Z" fill="#564AF7"></path>
                </svg>
                <span class="text-sm text-indigo-500 font-medium">35.6%</span>
              </div>
            </div>
          </div>
          <div class="chart" data-type="area-state5-1"></div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-9">
        <div class="px-4 py-2.5 h-full">
          <p class="mb-1 text-sm text-neutral-500 font-medium">Impressions</p>
          <div class="flex flex-wrap items-center -m-1">
            <div class="w-auto p-1">
              <h3 class="font-heading text-2xl font-semibold">245.86K</h3>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap items-center">
                <svg class="mr-0.5" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.96967 4.46967C1.67678 4.76256 1.67678 5.23744 1.96967 5.53033C2.26256 5.82322 2.73744 5.82322 3.03033 5.53033L1.96967 4.46967ZM6 1.5L6.53033 0.96967C6.23744 0.676777 5.76256 0.676777 5.46967 0.96967L6 1.5ZM8.96967 5.53033C9.26256 5.82322 9.73744 5.82322 10.0303 5.53033C10.3232 5.23744 10.3232 4.76256 10.0303 4.46967L8.96967 5.53033ZM5.25 10.5C5.25 10.9142 5.58579 11.25 6 11.25C6.41421 11.25 6.75 10.9142 6.75 10.5H5.25ZM3.03033 5.53033L6.53033 2.03033L5.46967 0.96967L1.96967 4.46967L3.03033 5.53033ZM5.46967 2.03033L8.96967 5.53033L10.0303 4.46967L6.53033 0.96967L5.46967 2.03033ZM5.25 1.5V10.5H6.75V1.5H5.25Z" fill="#564AF7"></path>
                </svg>
                <span class="text-sm text-indigo-500 font-medium">180%</span>
              </div>
            </div>
          </div>
          <div class="chart" data-type="area-state5-1"></div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-9">
        <div class="px-4 py-2.5 h-full">
          <p class="mb-1 text-sm text-neutral-500 font-medium">Profile Clicks</p>
          <div class="flex flex-wrap items-center -m-1">
            <div class="w-auto p-1">
              <h3 class="font-heading text-2xl font-semibold">368</h3>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap items-center">
                <svg class="mr-0.5" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.96967 4.46967C1.67678 4.76256 1.67678 5.23744 1.96967 5.53033C2.26256 5.82322 2.73744 5.82322 3.03033 5.53033L1.96967 4.46967ZM6 1.5L6.53033 0.96967C6.23744 0.676777 5.76256 0.676777 5.46967 0.96967L6 1.5ZM8.96967 5.53033C9.26256 5.82322 9.73744 5.82322 10.0303 5.53033C10.3232 5.23744 10.3232 4.76256 10.0303 4.46967L8.96967 5.53033ZM5.25 10.5C5.25 10.9142 5.58579 11.25 6 11.25C6.41421 11.25 6.75 10.9142 6.75 10.5H5.25ZM3.03033 5.53033L6.53033 2.03033L5.46967 0.96967L1.96967 4.46967L3.03033 5.53033ZM5.46967 2.03033L8.96967 5.53033L10.0303 4.46967L6.53033 0.96967L5.46967 2.03033ZM5.25 1.5V10.5H6.75V1.5H5.25Z" fill="#564AF7"></path>
                </svg>
                <span class="text-sm text-indigo-500 font-medium">234%</span>
              </div>
            </div>
          </div>
          <div class="chart" data-type="area-state5-1"></div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-9">
        <div class="px-4 py-2.5 h-full">
          <p class="mb-1 text-sm text-neutral-500 font-medium">Followers</p>
          <div class="flex flex-wrap items-center -m-1">
            <div class="w-auto p-1">
              <h3 class="font-heading text-2xl font-semibold">43.65K</h3>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap items-center">
                <svg class="mr-0.5" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.96967 4.46967C1.67678 4.76256 1.67678 5.23744 1.96967 5.53033C2.26256 5.82322 2.73744 5.82322 3.03033 5.53033L1.96967 4.46967ZM6 1.5L6.53033 0.96967C6.23744 0.676777 5.76256 0.676777 5.46967 0.96967L6 1.5ZM8.96967 5.53033C9.26256 5.82322 9.73744 5.82322 10.0303 5.53033C10.3232 5.23744 10.3232 4.76256 10.0303 4.46967L8.96967 5.53033ZM5.25 10.5C5.25 10.9142 5.58579 11.25 6 11.25C6.41421 11.25 6.75 10.9142 6.75 10.5H5.25ZM3.03033 5.53033L6.53033 2.03033L5.46967 0.96967L1.96967 4.46967L3.03033 5.53033ZM5.46967 2.03033L8.96967 5.53033L10.0303 4.46967L6.53033 0.96967L5.46967 2.03033ZM5.25 1.5V10.5H6.75V1.5H5.25Z" fill="#564AF7"></path>
                </svg>
                <span class="text-sm text-indigo-500 font-medium">1.8%</span>
              </div>
            </div>
          </div>
          <div class="chart" data-type="area-state5-1"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #77

Tailwind CSS

Dashy

<section class="fixed inset-0 z-50 flex items-center justify-center flex-wrap py-20 bg-neutral-500 bg-opacity-80 overflow-y-auto" :class="{'hidden': !open}" x-data="{ open: true }">
  <div class="container px-4 mx-auto">
    <div class="pt-5 max-w-sm mx-auto bg-neutral-50 border border-neutral-100 rounded-xl">
      <div class="px-6 pb-7">
        <div class="flex flex-wrap justify-between mb-5 -m-2">
          <div class="w-auto p-2">
            <h3 class="font-heading mb-1 text-lg text-neutral-600 font-semibold">Tasks</h3>
            <p class="text-sm text-neutral-400 font-medium">4 to 8 remaining</p>
          </div>
          <div class="w-auto p-2">
            <button x-on:click="open = false" class="relative top-1 text-neutral-300 hover:text-neutral-400">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.96967 12.9697C3.67678 13.2626 3.67678 13.7374 3.96967 14.0303C4.26256 14.3232 4.73744 14.3232 5.03033 14.0303L3.96967 12.9697ZM14.0303 5.03033C14.3232 4.73744 14.3232 4.26256 14.0303 3.96967C13.7374 3.67678 13.2626 3.67678 12.9697 3.96967L14.0303 5.03033ZM5.03033 3.96967C4.73744 3.67678 4.26256 3.67678 3.96967 3.96967C3.67678 4.26256 3.67678 4.73744 3.96967 5.03033L5.03033 3.96967ZM12.9697 14.0303C13.2626 14.3232 13.7374 14.3232 14.0303 14.0303C14.3232 13.7374 14.3232 13.2626 14.0303 12.9697L12.9697 14.0303ZM5.03033 14.0303L14.0303 5.03033L12.9697 3.96967L3.96967 12.9697L5.03033 14.0303ZM3.96967 5.03033L12.9697 14.0303L14.0303 12.9697L5.03033 3.96967L3.96967 5.03033Z" fill="currentColor"></path>
              </svg>
            </button>
          </div>
        </div>
        <div class="pb-3.5 w-full overflow-x-auto">
          <table class="w-full min-w-max">
            <tbody>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox5-1" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="modalCheckbox5-1">Project planning</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox5-2" checked="" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="modalCheckbox5-2">Company organizing</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox5-3" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="modalCheckbox5-3">HR management</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox5-4" checked="" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="modalCheckbox5-4">Proper directing</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox5-5" checked="" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="modalCheckbox5-5">Coordinating all tools</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox5-6" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="modalCheckbox5-6">Reporting and budgeting</label>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="flex">
          <input class="flex-1 w-full px-4 py-2.5 text-sm text-neutral-400 placeholder-neutral-400 hover:bg-gray-50 outline-none border border-r-0 border-neutral-200 rounded-tl-lg rounded-bl-lg focus:border focus:border-gray-600" id="modalInput5-1" type="text" placeholder="Type a task">
          <a class="flex items-center justify-center px-6 py-0.5 text-sm text-white font-semibold bg-neutral-600 rounded-tr-lg rounded-br-lg focus:ring-4 focus:ring-neutral-400" href="#">Add</a>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #78

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pt-5 bg-neutral-50 overflow-hidden border border-neutral-100 rounded-xl">
      <div>
        <div class="flex flex-wrap items-center justify-between px-6 -m-2 mb-6">
          <div class="w-auto p-2">
            <h3 class="font-heading text-lg text-neutral-600 font-semibold">Top Performance</h3>
          </div>
          <div class="w-auto p-2">
            <a href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.00033 3.33317C9.00033 2.78089 8.55261 2.33317 8.00033 2.33317C7.44804 2.33317 7.00033 2.78089 7.00033 3.33317L9.00033 3.33317ZM7.00033 3.33984C7.00033 3.89212 7.44804 4.33984 8.00033 4.33984C8.55261 4.33984 9.00033 3.89212 9.00033 3.33984L7.00033 3.33984ZM9.00033 7.99984C9.00033 7.44755 8.55261 6.99984 8.00033 6.99984C7.44804 6.99984 7.00033 7.44755 7.00033 7.99984L9.00033 7.99984ZM7.00033 8.0065C7.00033 8.55879 7.44804 9.0065 8.00033 9.0065C8.55261 9.0065 9.00033 8.55879 9.00033 8.0065L7.00033 8.0065ZM9.00033 12.6665C9.00033 12.1142 8.55261 11.6665 8.00033 11.6665C7.44804 11.6665 7.00033 12.1142 7.00033 12.6665L9.00033 12.6665ZM7.00033 12.6732C7.00032 13.2255 7.44804 13.6732 8.00032 13.6732C8.55261 13.6732 9.00032 13.2255 9.00033 12.6732L7.00033 12.6732ZM8.00033 2.99984C8.18442 2.99984 8.33366 3.14908 8.33366 3.33317L6.33366 3.33317C6.33366 4.25365 7.07985 4.99984 8.00033 4.99984L8.00033 2.99984ZM8.33366 3.33317C8.33366 3.51727 8.18442 3.6665 8.00033 3.6665L8.00033 1.6665C7.07985 1.6665 6.33366 2.4127 6.33366 3.33317L8.33366 3.33317ZM8.00033 3.6665C7.81623 3.6665 7.66699 3.51727 7.66699 3.33317L9.66699 3.33317C9.66699 2.4127 8.9208 1.6665 8.00033 1.6665L8.00033 3.6665ZM7.66699 3.33317C7.66699 3.14908 7.81623 2.99984 8.00033 2.99984L8.00033 4.99984C8.9208 4.99984 9.66699 4.25365 9.66699 3.33317L7.66699 3.33317ZM8.00033 7.6665C8.18442 7.6665 8.33366 7.81574 8.33366 7.99984L6.33366 7.99984C6.33366 8.92031 7.07985 9.6665 8.00033 9.6665L8.00033 7.6665ZM8.33366 7.99984C8.33366 8.18393 8.18442 8.33317 8.00033 8.33317L8.00033 6.33317C7.07985 6.33317 6.33366 7.07936 6.33366 7.99984L8.33366 7.99984ZM8.00033 8.33317C7.81623 8.33317 7.66699 8.18393 7.66699 7.99984L9.66699 7.99984C9.66699 7.07936 8.9208 6.33317 8.00033 6.33317L8.00033 8.33317ZM7.66699 7.99984C7.66699 7.81574 7.81623 7.6665 8.00033 7.6665L8.00033 9.6665C8.9208 9.6665 9.66699 8.92031 9.66699 7.99984L7.66699 7.99984ZM8.00033 12.3332C8.18442 12.3332 8.33366 12.4824 8.33366 12.6665L6.33366 12.6665C6.33366 13.587 7.07985 14.3332 8.00032 14.3332L8.00033 12.3332ZM8.33366 12.6665C8.33366 12.8506 8.18442 12.9998 8.00032 12.9998L8.00033 10.9998C7.07985 10.9998 6.33366 11.746 6.33366 12.6665L8.33366 12.6665ZM8.00032 12.9998C7.81623 12.9998 7.66699 12.8506 7.66699 12.6665L9.66699 12.6665C9.66699 11.746 8.9208 10.9998 8.00033 10.9998L8.00032 12.9998ZM7.66699 12.6665C7.66699 12.4824 7.81623 12.3332 8.00033 12.3332L8.00032 14.3332C8.9208 14.3332 9.66699 13.587 9.66699 12.6665L7.66699 12.6665ZM7.00033 3.33317L7.00033 3.33984L9.00033 3.33984L9.00033 3.33317L7.00033 3.33317ZM7.00033 7.99984L7.00033 8.0065L9.00033 8.0065L9.00033 7.99984L7.00033 7.99984ZM7.00033 12.6665L7.00033 12.6732L9.00033 12.6732L9.00033 12.6665L7.00033 12.6665Z" fill="#B8C1CC"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full overflow-x-auto">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="px-6">
                  <div class="pb-3.5"><a class="text-sm text-gray-500 text-opacity-70 font-medium" href="#">No.</a></div>
                </th>
                <th class="px-6">
                  <div class="pb-3.5"><a class="text-sm text-gray-500 text-opacity-70 font-medium" href="#">Ref</a></div>
                </th>
                <th class="px-6">
                  <div class="pb-3.5"><a class="text-sm text-gray-500 text-opacity-70 font-medium" href="#">Leads</a></div>
                </th>
                <th class="px-6">
                  <div class="pb-3.5"><a class="text-sm text-gray-500 text-opacity-70 font-medium" href="#">Deals</a></div>
                </th>
                <th class="px-6">
                  <div class="pb-3.5"><a class="text-sm text-gray-500 text-opacity-70 font-medium" href="#">Rate</a></div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="py-4 px-6 bg-light">
                  <span class="text-sm font-medium">1.</span>
                </td>
                <td class="py-4 px-6 bg-light">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img class="h-10" src="dashy-assets/images/avatar20.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Corina McCoy</span>
                      <span class="block font-medium text-sm text-gray-500 text-opacity-70">$23,756.00</span>
                    </div>
                  </div>
                </td>
                <td class="py-4 px-6 bg-light">
                  <span class="text-sm font-medium">164</span>
                </td>
                <td class="py-4 px-6 bg-light">
                  <span class="text-sm font-medium">135</span>
                </td>
                <td class="py-6 px-6 bg-light">
                  <div class="flex flex-wrap items-center">
                    <img src="dashy-assets/images/progress2-full.svg" alt="">
                    <span class="ml-2 text-sm font-medium">100%</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-4 px-6 bg-white">
                  <span class="text-sm font-medium">2.</span>
                </td>
                <td class="py-4 px-6 bg-white">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img class="h-10" src="dashy-assets/images/avatar21.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Autumn Philli</span>
                      <span class="block font-medium text-sm text-gray-500 text-opacity-70">$83,425.00</span>
                    </div>
                  </div>
                </td>
                <td class="py-4 px-6 bg-white">
                  <span class="text-sm font-medium">225</span>
                </td>
                <td class="py-4 px-6 bg-white">
                  <span class="text-sm font-medium">98</span>
                </td>
                <td class="py-6 px-6 bg-white">
                  <div class="flex flex-wrap items-center">
                    <img src="dashy-assets/images/progress2-75.svg" alt="">
                    <span class="ml-2 text-sm font-medium">75%</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-4 px-6 bg-light">
                  <span class="text-sm font-medium">3.</span>
                </td>
                <td class="py-4 px-6 bg-light">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img class="h-10" src="dashy-assets/images/avatar22.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">David Elson</span>
                      <span class="block font-medium text-sm text-gray-500 text-opacity-70">$50,367.00</span>
                    </div>
                  </div>
                </td>
                <td class="py-4 px-6 bg-light">
                  <span class="text-sm font-medium">175</span>
                </td>
                <td class="py-4 px-6 bg-light">
                  <span class="text-sm font-medium">102</span>
                </td>
                <td class="py-6 px-6 bg-light">
                  <div class="flex flex-wrap items-center">
                    <img src="dashy-assets/images/progress2-90.svg" alt="">
                    <span class="ml-2 text-sm font-medium">90%</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-4 px-6 bg-white">
                  <span class="text-sm font-medium">4.</span>
                </td>
                <td class="py-4 px-6 bg-white">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img class="h-10" src="dashy-assets/images/avatar23.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Mary Freund</span>
                      <span class="block font-medium text-sm text-gray-500 text-opacity-70">$12,986.00</span>
                    </div>
                  </div>
                </td>
                <td class="py-4 px-6 bg-white">
                  <span class="text-sm font-medium">368</span>
                </td>
                <td class="py-4 px-6 bg-white">
                  <span class="text-sm font-medium">205</span>
                </td>
                <td class="py-6 px-6 bg-white">
                  <div class="flex flex-wrap items-center">
                    <img src="dashy-assets/images/progress2-45.svg" alt="">
                    <span class="ml-2 text-sm font-medium">45%</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #79

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-5 bg-white rounded-2xl">
      <div class="chart mb-2" data-type="donut-4"></div>
      <div class="flex flex-wrap justify-center -m-2">
        <div class="w-auto p-2">
          <div class="inline-flex items-center">
            <div class="mr-2 w-3 h-3 bg-gradient-purple-top rounded-full"></div>
            <span class="text-xs font-medium">Direct Sales</span>
          </div>
        </div>
        <div class="w-auto p-2">
          <div class="inline-flex items-center">
            <div class="mr-2 w-3 h-3 bg-neutral-200 rounded-full"></div>
            <span class="text-xs font-medium">Affiliate Sales</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #80

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" :class="{'hidden': !open }" x-data="{ open: true }">
  <div class="container px-4 mx-auto">
    <div class="px-3.5 py-4 bg-gradient-purple-left rounded-xl">
      <div class="flex flex-wrap -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.03033 9.46967C7.73744 9.17678 7.26256 9.17678 6.96967 9.46967C6.67678 9.76256 6.67678 10.2374 6.96967 10.5303L8.03033 9.46967ZM9.16667 11.6667L8.63634 12.197C8.92923 12.4899 9.4041 12.4899 9.697 12.197L9.16667 11.6667ZM13.0303 8.86366C13.3232 8.57077 13.3232 8.0959 13.0303 7.803C12.7374 7.51011 12.2626 7.51011 11.9697 7.803L13.0303 8.86366ZM16.75 10C16.75 13.7279 13.7279 16.75 10 16.75V18.25C14.5563 18.25 18.25 14.5563 18.25 10H16.75ZM10 16.75C6.27208 16.75 3.25 13.7279 3.25 10H1.75C1.75 14.5563 5.44365 18.25 10 18.25V16.75ZM3.25 10C3.25 6.27208 6.27208 3.25 10 3.25V1.75C5.44365 1.75 1.75 5.44365 1.75 10H3.25ZM10 3.25C13.7279 3.25 16.75 6.27208 16.75 10H18.25C18.25 5.44365 14.5563 1.75 10 1.75V3.25ZM6.96967 10.5303L8.63634 12.197L9.697 11.1363L8.03033 9.46967L6.96967 10.5303ZM9.697 12.197L13.0303 8.86366L11.9697 7.803L8.63634 11.1363L9.697 12.197Z" fill="white"></path>
              </svg>
            </div>
            <div class="flex-1 p-1">
              <p class="text-sm text-white font-medium">Your export file is ready</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <button x-on:click="open = false" class="relative top-0.5 text-white hover:text-neutral-200">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.4" d="M3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303C3.76256 12.8232 4.23744 12.8232 4.53033 12.5303L3.46967 11.4697ZM12.5303 4.53033C12.8232 4.23744 12.8232 3.76256 12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L12.5303 4.53033ZM4.53033 3.46967C4.23744 3.17678 3.76256 3.17678 3.46967 3.46967C3.17678 3.76256 3.17678 4.23744 3.46967 4.53033L4.53033 3.46967ZM11.4697 12.5303C11.7626 12.8232 12.2374 12.8232 12.5303 12.5303C12.8232 12.2374 12.8232 11.7626 12.5303 11.4697L11.4697 12.5303ZM4.53033 12.5303L12.5303 4.53033L11.4697 3.46967L3.46967 11.4697L4.53033 12.5303ZM3.46967 4.53033L11.4697 12.5303L12.5303 11.4697L4.53033 3.46967L3.46967 4.53033Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

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 Components in Dashy library

Framework

UI Library

Components

Tailwind Component #61

Your next website starts here

Tailwind Component #62

Tailwind Component #63

Tailwind Component #64

Tailwind Component #65

Tailwind Component #66

Tailwind Component #67

Tailwind Component #68

Tailwind Component #69

Tailwind Component #70

Tailwind Component #71

Tailwind Component #72

Tailwind Component #73

Tailwind Component #74

Tailwind Component #75

Tailwind Component #76

Tailwind Component #77

Tailwind Component #78

Tailwind Component #79

Tailwind Component #80

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company