Tailwind Components in Dashy library

Tailwind Component #21

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <p class="mb-6 text-neutral-300 font-medium tracking-wider">
        <span class="text-transparent bg-clip-text bg-gradient-purple-left">01</span>
        <span>/06</span>
      </p>
      <h3 class="font-heading font-semibold mb-2 text-lg">Choose A Product</h3>
      <p class="text-neutral-500">You can always change this later in your account settings.</p>
    </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 #22

Tailwind CSS

Dashy

<section class="py-4 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h1 class="font-heading mb-1 text-2xl font-semibold">Performance Data</h1>
    <p class="text-sm text-neutral-500">Get all your sales performance report</p>
  </div>
</section>

Tailwind Component #23

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pt-5 bg-neutral-50 border border-neutral-100 rounded-xl">
      <div class="px-6">
        <div class="flex flex-wrap items-center justify-between -m-2 mb-6">
          <div class="w-auto p-2">
            <h3 class="font-heading text-lg text-neutral-600 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="w-full overflow-x-auto">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="p-0 border-b border-neutral-100">
                  <div class="pb-3.5"><a class="text-sm text-gray-400 font-medium" href="#">Customer</a></div>
                </th>
                <th class="p-0 border-b border-neutral-100">
                  <div class="pb-3.5"><a class="text-sm text-gray-400 font-medium" href="#">Time &amp; Date</a></div>
                </th>
                <th class="p-0 border-b border-neutral-100">
                  <div class="pb-3.5"><a class="text-sm text-gray-400 font-medium" href="#">Department</a></div>
                </th>
                <th class="p-0 border-b border-neutral-100"></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img class="h-8" src="dashy-assets/images/avatar16.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Annette Black</span>
                      <span class="block text-sm text-neutral-500">curtis.d@example.com</span>
                    </div>
                  </div>
                </td>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <span class="block text-sm font-medium">10.30am</span>
                  <span class="block text-sm text-neutral-500">September 23,2022</span>
                </td>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <span class="text-sm font-medium">Digital Marketing</span>
                </td>
                <td class="py-4 border-b border-neutral-100">
                  <div class="flex justify-end">
                    <div class="relative overflow-hidden border border-neutral-200 rounded-lg">
                      <select class="appearance-none py-2 pl-3 pr-16 text-sm text-neutral-600 font-medium w-full h-full bg-white outline-none cursor-pointer">
                        <option value="status">Pending</option>
                        <option value="status">Pending</option>
                        <option value="status">Pending</option>
                      </select>
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6663 6L7.99967 10.6667L3.33301 6" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img class="h-8" src="dashy-assets/images/avatar17.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Eleanor Pena</span>
                      <span class="block text-sm text-neutral-500">curtis.d@example.com</span>
                    </div>
                  </div>
                </td>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <span class="block text-sm font-medium">11.30am</span>
                  <span class="block text-sm text-neutral-500">September 23,2022</span>
                </td>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <span class="text-sm font-medium">Digital Marketing</span>
                </td>
                <td class="py-4 border-b border-neutral-100">
                  <div class="flex justify-end">
                    <div class="relative overflow-hidden border border-neutral-200 rounded-lg">
                      <select class="appearance-none py-2 pl-3 pr-16 text-sm text-neutral-600 font-medium w-full h-full bg-white outline-none cursor-pointer">
                        <option value="status">Pending</option>
                        <option value="status">Pending</option>
                        <option value="status">Pending</option>
                      </select>
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6663 6L7.99967 10.6667L3.33301 6" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img class="h-8" src="dashy-assets/images/avatar18.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Esther Howard</span>
                      <span class="block text-sm text-neutral-500">curtis.d@example.com</span>
                    </div>
                  </div>
                </td>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <span class="block text-sm font-medium">12.15pm</span>
                  <span class="block text-sm text-neutral-500">September 23,2022</span>
                </td>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <span class="text-sm font-medium">Digital Marketing</span>
                </td>
                <td class="py-4 border-b border-neutral-100">
                  <div class="flex justify-end">
                    <div class="relative overflow-hidden border border-neutral-200 rounded-lg">
                      <select class="appearance-none py-2 pl-3 pr-16 text-sm text-neutral-600 font-medium w-full h-full bg-white outline-none cursor-pointer">
                        <option value="status">Pending</option>
                        <option value="status">Pending</option>
                        <option value="status">Pending</option>
                      </select>
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6663 6L7.99967 10.6667L3.33301 6" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img class="h-8" src="dashy-assets/images/avatar19.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Darlene Robertson</span>
                      <span class="block text-sm text-neutral-500">curtis.d@example.com</span>
                    </div>
                  </div>
                </td>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <span class="block text-sm font-medium">1.30pm</span>
                  <span class="block text-sm text-neutral-500">September 23,2022</span>
                </td>
                <td class="py-4 pr-4 border-b border-neutral-100">
                  <span class="text-sm font-medium">Digital Marketing</span>
                </td>
                <td class="py-4 border-b border-neutral-100">
                  <div class="flex justify-end">
                    <div class="relative overflow-hidden border border-neutral-200 rounded-lg">
                      <select class="appearance-none py-2 pl-3 pr-16 text-sm text-neutral-600 font-medium w-full h-full bg-white outline-none cursor-pointer">
                        <option value="status">Pending</option>
                        <option value="status">Pending</option>
                        <option value="status">Pending</option>
                      </select>
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.6663 6L7.99967 10.6667L3.33301 6" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #24

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-0 px-7 bg-light">
    <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 class="h-7" 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>
    <div class="hidden xl:block w-full md:w-auto px-2 mr-auto">
      <ul class="flex items-center">
        <li class="mr-10">
          <a class="inline-flex items-center text-neutral-600 hover:text-neutral-400" href="#">
            <span class="mr-4 text-sm font-medium">Company-01</span>
            <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.6668 1L6.00016 5.66667L1.3335 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </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">
            <a class="group relative mr-7 py-4" x-on:click.prevent="menu = $refs.menu1.textContent" href="#">
              <div :class="{'bg-gradient-purple-left': menu == $refs.menu1.textContent}" class="absolute top-0 w-full h-0.5 bg-gradient-purple-left group-hover:bg-gradient-purple-left"></div>
              <span x-ref="menu1" :class="{'text-transparent bg-clip-text bg-gradient-purple-top': menu == $refs.menu1.textContent}" class="text-sm font-medium text-transparent bg-clip-text bg-gradient-purple-top">Financials</span>
            </a>
            <a class="group relative mr-7 py-4" x-on:click.prevent="menu = $refs.menu2.textContent" href="#">
              <div :class="{'bg-gradient-purple-left': menu == $refs.menu2.textContent}" class="absolute top-0 w-full h-0.5 group-hover:bg-gradient-purple-left"></div>
              <span x-ref="menu2" :class="{'text-transparent bg-clip-text bg-gradient-purple-top': menu == $refs.menu2.textContent}" class="text-sm font-medium">Dashboards</span>
            </a>
            <a class="group relative mr-7 py-4" x-on:click.prevent="menu = $refs.menu3.textContent" href="#">
              <div :class="{'bg-gradient-purple-left': menu == $refs.menu3.textContent}" class="absolute top-0 w-full h-0.5 group-hover:bg-gradient-purple-left"></div>
              <span x-ref="menu3" :class="{'text-transparent bg-clip-text bg-gradient-purple-top': menu == $refs.menu3.textContent}" class="text-sm font-medium">Hiring Plan</span>
            </a>
            <a class="group relative mr-7 py-4" x-on:click.prevent="menu = $refs.menu4.textContent" href="#">
              <div :class="{'bg-gradient-purple-left': menu == $refs.menu4.textContent}" class="absolute top-0 w-full h-0.5 group-hover:bg-gradient-purple-left"></div>
              <span x-ref="menu4" :class="{'text-transparent bg-clip-text bg-gradient-purple-top': menu == $refs.menu4.textContent}" class="text-sm font-medium">Models</span>
            </a>
            <a class="mr-7 py-4 text-sm font-medium text-neutral-600 hover:text-neutral-400" href="#">
              <img src="dashy-assets/images/question-mark-circle.svg" alt="">
            </a>
            <a class="py-4 text-sm font-medium text-neutral-600 hover:text-neutral-400" href="#">
              <img src="dashy-assets/images/user-circle2.svg" alt="">
            </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-light">
      <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 #25

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" x-data="{ tab: 1 }">
  <div class="container px-4 mx-auto">
    <div class="relative">
      <ul class="relative z-10 inline-flex flex-wrap items-center -m-5">
        <li class="p-5">
          <a x-on:click.prevent="tab=1" class="group relative flex-col items-center text-sm font-medium bg-clip-text" :class="tab==1 ? 'bg-gradient-purple-left text-transparent' : 'text-neutral-600 hover:text-transparent hover:bg-gradient-purple-left'" href="#">
            <span class="inline-block pb-5">Dashboard</span>
            <div class="h-0.5" :class="tab==1 ? 'bg-gradient-purple-left' : 'bg-transparent group-hover:bg-gradient-purple-left'"></div>
          </a>
        </li>
        <li class="p-5">
          <a x-on:click.prevent="tab=2" class="group relative flex-col items-center text-sm font-medium bg-clip-text" :class="tab==2 ? 'bg-gradient-purple-left text-transparent' : 'text-neutral-600 hover:text-transparent hover:bg-gradient-purple-left'" href="#">
            <span class="inline-block pb-5">My Account</span>
            <div class="h-0.5" :class="tab==2 ? 'bg-gradient-purple-left' : 'bg-transparent group-hover:bg-gradient-purple-left'"></div>
          </a>
        </li>
        <li class="p-5">
          <a x-on:click.prevent="tab=3" class="group relative flex-col items-center text-sm font-medium bg-clip-text" :class="tab==3 ? 'bg-gradient-purple-left text-transparent' : 'text-neutral-600 hover:text-transparent hover:bg-gradient-purple-left'" href="#">
            <span class="inline-block pb-5">Downloads</span>
            <div class="h-0.5" :class="tab==3 ? 'bg-gradient-purple-left' : 'bg-transparent group-hover:bg-gradient-purple-left'"></div>
          </a>
        </li>
        <li class="p-5">
          <a x-on:click.prevent="tab=4" class="group relative flex-col items-center text-sm font-medium bg-clip-text" :class="tab==4 ? 'bg-gradient-purple-left text-transparent' : 'text-neutral-600 hover:text-transparent hover:bg-gradient-purple-left'" href="#">
            <span class="inline-block pb-5">Licenses</span>
            <div class="h-0.5" :class="tab==4 ? 'bg-gradient-purple-left' : 'bg-transparent group-hover:bg-gradient-purple-left'"></div>
          </a>
        </li>
        <li class="p-5">
          <a x-on:click.prevent="tab=5" class="group relative flex-col items-center text-sm font-medium bg-clip-text" :class="tab==5 ? 'bg-gradient-purple-left text-transparent' : 'text-neutral-600 hover:text-transparent hover:bg-gradient-purple-left'" href="#">
            <span class="inline-block pb-5">Settings</span>
            <div class="h-0.5" :class="tab==5 ? 'bg-gradient-purple-left' : 'bg-transparent group-hover:bg-gradient-purple-left'"></div>
          </a>
        </li>
      </ul>
      <div class="absolute bottom-0 left-0 w-full h-0.5 bg-neutral-100"></div>
    </div>
  </div>
</section>

Tailwind Component #26

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative p-8 overflow-hidden rounded-xl" style="background-image: url('dashy-assets/images/banner2.jpeg'); background-size: cover; background-position: right top;">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-banner"></div>
      <div class="relative z-10 pt-72">
        <h3 class="mb-2 text-xl text-white font-semibold">Save 30% on Pro Package</h3>
        <p class="mb-7 text-neutral-300">We’re working on improvements to team insights and would love your feedback</p>
        <a class="inline-flex flex-wrap items-center px-5 py-3.5 text-sm text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">Upgrade to Pro</a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #27

Tailwind CSS

Dashy

<div class="max-w-sm w-full rounded-t-lg" x-data="{ dropdown: false }">
  <div x-on:click="dropdown = !dropdown" class="group block px-3.5 py-1.5 bg-white border rounded-t-lg  cursor-pointer">
    <div class="flex flex-wrap items-center justify-between -m-2">
      <div class="w-auto p-2">
        <h3 class="font-heading">Select a Role</h3>
      </div>
      <div class="w-auto p-2">
        <span :class="{'rotate-180': dropdown, 'rotate-0': !dropdown }" class="inline-block transform">
            <svg class="relative -top-px text-neutral-300 group-hover:text-neutral-400" width="16" height="23" viewBox="0 0 16 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.6673 9.5L8.00065 14.1667L3.33398 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </span>
      </div>
    </div>
  </div>
  <div x-ref="container" :style="dropdown ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
      <div class="relative overflow-hidden">
        <div class="static top-0 left-0 bg-neutral-100 border-l border-r border-b rounded-b-lg">
          <ul>
            <li><a class="block px-4 py-3 text-sm text-neutral-500 hover:text-neutral-600 font-medium border-b border-neutral-200" href="#">CEO</a></li>
            <li><a class="block px-4 py-3 text-sm text-neutral-500 hover:text-neutral-600 font-medium border-b border-neutral-200" href="#">Founder</a></li>
            <li><a class="block px-4 py-3 text-sm text-neutral-600 font-medium border-b border-neutral-200" href="#">Design Lead</a></li>
            <li><a class="block px-4 py-3 text-sm text-neutral-500 hover:text-neutral-600 font-medium border-b border-neutral-200" href="#">Head of Marketing</a></li>
            <li><a class="block px-4 py-3 text-sm text-neutral-500 hover:text-neutral-600 font-medium" href="#">Head of Product</a></li>
          </ul>
        </div>
      </div>
  </div>
</div>

Tailwind Component #28

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="px-6 pt-6 pb-7">
        <div class="flex flex-wrap items-center mb-3.5 -m-2">
          <div class="w-auto p-2">
            <img src="dashy-assets/images/card-avatar3.png" alt="">
          </div>
          <div class="w-auto p-2">
            <p class="text-neutral-500 font-medium">@Floyd Miles</p>
          </div>
        </div>
        <p class="text-xl font-medium">Waverio Reaches it’s revenue goals 3x faster with Dashy.</p>
      </div>
      <a class="flex flex-wrap justify-between px-6 py-4 text-neutral-50 hover:text-neutral-100 bg-gradient-purple-left" href="#">
        <span class="mr-3 text-lg font-semibold">Learn More</span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14.7071 4.29289C14.3166 3.90237 13.6834 3.90237 13.2929 4.29289C12.9024 4.68342 12.9024 5.31658 13.2929 5.70711L14.7071 4.29289ZM21 12L21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929L21 12ZM13.2929 18.2929C12.9024 18.6834 12.9024 19.3166 13.2929 19.7071C13.6834 20.0976 14.3166 20.0976 14.7071 19.7071L13.2929 18.2929ZM3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13L3 11ZM13.2929 5.70711L20.2929 12.7071L21.7071 11.2929L14.7071 4.29289L13.2929 5.70711ZM20.2929 11.2929L13.2929 18.2929L14.7071 19.7071L21.7071 12.7071L20.2929 11.2929ZM21 11L3 11L3 13L21 13V11Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
  </div>
</section>

Tailwind Component #29

Tailwind CSS

Dashy

<section class="relative bg-white" 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-light">
    <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-xss bg-light border-r">
      <div class="flex flex-wrap items-center justify-between px-7 py-6 pb-0">
        <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-400 hover:text-neutral-500" href="#">
            <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97927 13.3637C7.27217 13.6566 7.74704 13.6566 8.03993 13.3637C8.33283 13.0708 8.33283 12.5959 8.03993 12.303L6.97927 13.3637ZM1.67627 7.00002L1.14594 6.46969C0.853046 6.76258 0.853046 7.23746 1.14594 7.53035L1.67627 7.00002ZM8.03993 1.69702C8.33283 1.40412 8.33283 0.92925 8.03993 0.636357C7.74704 0.343464 7.27217 0.343464 6.97927 0.636357L8.03993 1.69702ZM16.6763 7.75002C17.0905 7.75002 17.4263 7.41423 17.4263 7.00002C17.4263 6.58581 17.0905 6.25002 16.6763 6.25002V7.75002ZM8.03993 12.303L2.2066 6.46969L1.14594 7.53035L6.97927 13.3637L8.03993 12.303ZM2.2066 7.53035L8.03993 1.69702L6.97927 0.636357L1.14594 6.46969L2.2066 7.53035ZM1.67627 7.75002L16.6763 7.75002V6.25002L1.67627 6.25002L1.67627 7.75002Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="flex-1 flex flex-col justify-between py-8 overflow-x-hidden overflow-y-auto">
        <div class="flex flex-col flex-wrap px-7 mb-8 -m-2.5" x-data="{ outerDropdown: false }">
          <div class="w-auto p-2.5">
            <a x-ref="nav1" x-on:click.prevent="nav = $refs.nav1.textContent, 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="hidden w-auto p-2.5" x-data="{ dropdown: false }">
            <p class="text-xs text-neutral-400 font-medium uppercase mb-4">User</p>
            <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-full p-1"><a class="block px-3 py-1 font-medium text-neutral-500 hover:text-neutral-600 bg-white rounded-lg" href="#">Help with Sketch</a></div>
                <div class="w-full p-1"><a class="block px-3 py-1 font-medium text-neutral-500 hover:text-neutral-600 bg-transparent rounded-lg" href="#">All Documents</a></div>
                <div class="w-full p-1"><a class="block px-3 py-1 font-medium text-neutral-500 hover:text-neutral-600 bg-transparent rounded-lg" href="#">Shared with Me</a></div>
                <div class="w-full p-1"><a class="block px-3 py-1 font-medium text-neutral-500 hover:text-neutral-600 bg-transparent rounded-lg" href="#">Libraries</a></div>
              </div>
            </div>
          </div>
          <div class="w-auto p-2.5">
            <p class="text-xs text-neutral-400 font-medium uppercase mb-4">Information</p>
            <a x-ref="nav2" x-on:click.prevent="nav = $refs.nav2.textContent" 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 x-ref="nav3" x-on:click.prevent="nav = $refs.nav3.textContent" 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 x-ref="nav4" x-on:click.prevent="nav = $refs.nav4.textContent" 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">
            <p class="text-xs text-neutral-400 font-medium uppercase mb-4">Help</p>
            <a x-ref="nav5" x-on:click.prevent="nav = $refs.nav5.textContent" 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 x-ref="nav6" x-on:click.prevent="nav = $refs.nav6.textContent" 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 x-ref="nav7" x-on:click.prevent="nav = $refs.nav7.textContent" 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 x-ref="nav8" x-on:click.prevent="nav = $refs.nav8.textContent" 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 class="flex flex-wrap items-center justify-between px-7 -m-2">
          <div class="w-auto p-2">
            <div class="flex flex-wrap -m-1.5">
              <div class="w-auto p-1.5">
                <img src="dashy-assets/images/avatar.png" alt="">
              </div>
              <div class="w-auto p-1.5">
                <h3 class="font-heading font-semibold text-sm">Dawid Jonson</h3>
                <p class="text-xs text-neutral-500">dawid.j@gmail.com</p>
              </div>
            </div>
          </div>
          <div class="w-auto p-2">
            <a class="text-neutral-400 hover:text-neutral-500" href="#">
              <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.46015 2.98571L5.8504 2.34523L5.46015 2.98571ZM7.60386 2.09776L6.87503 1.92082L7.60386 2.09776ZM3.48571 4.96015L2.84523 5.3504L3.48571 4.96015ZM2.59776 7.10386L2.42082 6.37503L2.59776 7.10386ZM2.59776 9.89614L2.77469 9.16731L2.59776 9.89614ZM3.48571 12.0398L2.84523 11.6496L3.48571 12.0398ZM5.46016 14.0143L5.8504 14.6548L5.46016 14.0143ZM7.60386 14.9022L8.33269 14.7253L7.60386 14.9022ZM10.3961 14.9022L11.125 15.0792L10.3961 14.9022ZM12.5398 14.0143L12.1496 14.6548L12.5398 14.0143ZM14.5143 12.0398L15.1548 11.6496L14.5143 12.0398ZM15.4022 9.89614L15.5792 10.625L15.4022 9.89614ZM15.4022 7.10386L15.2253 7.83269L15.4022 7.10386ZM14.5143 4.96015L15.1548 5.3504L14.5143 4.96015ZM12.5398 2.98571L12.1496 2.34523L12.5398 2.98571ZM10.3961 2.09776L9.66732 2.27469L10.3961 2.09776ZM5.06991 3.62618C6.33455 4.39674 7.98332 3.7138 8.33269 2.27469L6.87503 1.92082C6.76531 2.37275 6.24754 2.58722 5.8504 2.34523L5.06991 3.62618ZM4.12618 4.56991C3.75159 3.95513 4.45513 3.25159 5.06991 3.62618L5.8504 2.34523C3.89271 1.15239 1.65239 3.39271 2.84523 5.3504L4.12618 4.56991ZM2.77469 7.83269C4.2138 7.48332 4.89674 5.83455 4.12618 4.56991L2.84523 5.3504C3.08722 5.74754 2.87275 6.26531 2.42082 6.37503L2.77469 7.83269ZM2.77469 9.16731C2.0751 8.99748 2.0751 8.00252 2.77469 7.83269L2.42082 6.37503C0.193058 6.91585 0.193061 10.0841 2.42082 10.625L2.77469 9.16731ZM4.12618 12.4301C4.89674 11.1655 4.2138 9.51668 2.77469 9.16731L2.42082 10.625C2.87275 10.7347 3.08722 11.2525 2.84523 11.6496L4.12618 12.4301ZM5.06991 13.3738C4.45513 13.7484 3.75159 13.0449 4.12618 12.4301L2.84523 11.6496C1.65239 13.6073 3.89271 15.8476 5.8504 14.6548L5.06991 13.3738ZM8.33269 14.7253C7.98332 13.2862 6.33455 12.6033 5.06991 13.3738L5.8504 14.6548C6.24754 14.4128 6.76531 14.6273 6.87503 15.0792L8.33269 14.7253ZM9.66732 14.7253C9.49748 15.4249 8.50252 15.4249 8.33269 14.7253L6.87503 15.0792C7.41586 17.3069 10.5841 17.3069 11.125 15.0792L9.66732 14.7253ZM12.9301 13.3738C11.6655 12.6033 10.0167 13.2862 9.66732 14.7253L11.125 15.0792C11.2347 14.6273 11.7525 14.4128 12.1496 14.6548L12.9301 13.3738ZM13.8738 12.4301C14.2484 13.0449 13.5449 13.7484 12.9301 13.3738L12.1496 14.6548C14.1073 15.8476 16.3476 13.6073 15.1548 11.6496L13.8738 12.4301ZM15.2253 9.16731C13.7862 9.51668 13.1033 11.1655 13.8738 12.4301L15.1548 11.6496C14.9128 11.2525 15.1273 10.7347 15.5792 10.625L15.2253 9.16731ZM15.2253 7.83269C15.9249 8.00252 15.9249 8.99748 15.2253 9.16731L15.5792 10.625C17.8069 10.0841 17.8069 6.91585 15.5792 6.37503L15.2253 7.83269ZM13.8738 4.56991C13.1033 5.83455 13.7862 7.48332 15.2253 7.83269L15.5792 6.37503C15.1273 6.26531 14.9128 5.74754 15.1548 5.3504L13.8738 4.56991ZM12.9301 3.62618C13.5449 3.25159 14.2484 3.95513 13.8738 4.56991L15.1548 5.3504C16.3476 3.39271 14.1073 1.15239 12.1496 2.34523L12.9301 3.62618ZM9.66732 2.27469C10.0167 3.7138 11.6655 4.39674 12.9301 3.62618L12.1496 2.34523C11.7525 2.58722 11.2347 2.37275 11.125 1.92082L9.66732 2.27469ZM11.125 1.92082C10.5841 -0.306939 7.41586 -0.306942 6.87503 1.92082L8.33269 2.27469C8.50252 1.5751 9.49748 1.5751 9.66732 2.27469L11.125 1.92082ZM10.75 8.5C10.75 9.4665 9.9665 10.25 9 10.25V11.75C10.7949 11.75 12.25 10.2949 12.25 8.5H10.75ZM9 10.25C8.0335 10.25 7.25 9.4665 7.25 8.5H5.75C5.75 10.2949 7.20507 11.75 9 11.75V10.25ZM7.25 8.5C7.25 7.5335 8.0335 6.75 9 6.75V5.25C7.20507 5.25 5.75 6.70507 5.75 8.5H7.25ZM9 6.75C9.9665 6.75 10.75 7.5335 10.75 8.5H12.25C12.25 6.70507 10.7949 5.25 9 5.25V6.75Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mx-auto xl:ml-xss xl:pl-4"></div>
</section>

Tailwind Component #30

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="px-5 py-3.5 h-full bg-white border rounded-lg">
          <div class="flex flex-wrap items-center justify-between -m-1">
            <div class="w-auto p-1">
              <p class="text-sm text-neutral-500 font-medium">New Customers</p>
            </div>
            <div class="w-auto p-1">
              <a class="inline-flex text-xs hover:text-neutral-500 font-medium" href="#">
                <span class="mr-2">This week</span>
                <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="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="flex flex-wrap justify-between -m-1">
            <div class="w-full sm:w-5/12 p-1">
              <h3 class="font-heading mb-1 text-3xl tracking-tight font-semibold">137</h3>
            </div>
            <div class="w-full sm:w-7/12 p-1">
              <div class="chart" data-type="area-state2-2"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 p-3">
        <div class="px-5 py-3.5 h-full bg-white border rounded-lg">
          <div class="flex flex-wrap items-center justify-between -m-1">
            <div class="w-auto p-1">
              <p class="text-sm text-neutral-500 font-medium">Revenue</p>
            </div>
            <div class="w-auto p-1">
              <a class="inline-flex text-xs hover:text-neutral-500 font-medium" href="#">
                <span class="mr-2">This week</span>
                <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="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="flex flex-wrap justify-between -m-1">
            <div class="w-full sm:w-5/12 p-1">
              <h3 class="font-heading mb-1 text-3xl tracking-tight font-semibold">$5799.00</h3>
            </div>
            <div class="w-full sm:w-7/12 p-1">
              <div class="chart" data-type="area-state2-1"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 p-3">
        <div class="px-5 py-3.5 h-full bg-white border rounded-lg">
          <div class="flex flex-wrap items-center justify-between -m-1">
            <div class="w-auto p-1">
              <p class="text-sm text-neutral-500 font-medium">Occupancy</p>
            </div>
            <div class="w-auto p-1">
              <a class="inline-flex text-xs hover:text-neutral-500 font-medium" href="#">
                <span class="mr-2">This week</span>
                <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="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="flex flex-wrap justify-between -m-1">
            <div class="w-full sm:w-5/12 p-1">
              <h3 class="font-heading mb-1 text-3xl tracking-tight font-semibold">0.7%</h3>
            </div>
            <div class="w-full sm:w-7/12 p-1">
              <div class="chart" data-type="area-state2-3"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #31

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pt-4 px-6 pb-6 bg-white border rounded-xl">
      <div class="flex flex-wrap items-center justify-between mb-10 -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Post Analytic</h3>
        </div>
        <div class="w-auto p-2">
          <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.5 10.5H11.25C11.25 10.0858 10.9142 9.75 10.5 9.75V10.5ZM10.5 14H9.75C9.75 14.4142 10.0858 14.75 10.5 14.75V14ZM11.375 14.75C11.7892 14.75 12.125 14.4142 12.125 14C12.125 13.5858 11.7892 13.25 11.375 13.25V14.75ZM9.625 9.75C9.21079 9.75 8.875 10.0858 8.875 10.5C8.875 10.9142 9.21079 11.25 9.625 11.25V9.75ZM10.5 6.25C10.0858 6.25 9.75 6.58579 9.75 7C9.75 7.41421 10.0858 7.75 10.5 7.75V6.25ZM10.5087 7.75C10.923 7.75 11.2587 7.41421 11.2587 7C11.2587 6.58579 10.923 6.25 10.5087 6.25V7.75ZM9.75 10.5V14H11.25V10.5H9.75ZM10.5 14.75H11.375V13.25H10.5V14.75ZM10.5 9.75H9.625V11.25H10.5V9.75ZM17.625 10.5C17.625 14.435 14.435 17.625 10.5 17.625V19.125C15.2635 19.125 19.125 15.2635 19.125 10.5H17.625ZM10.5 17.625C6.56497 17.625 3.375 14.435 3.375 10.5H1.875C1.875 15.2635 5.73654 19.125 10.5 19.125V17.625ZM3.375 10.5C3.375 6.56497 6.56497 3.375 10.5 3.375V1.875C5.73654 1.875 1.875 5.73654 1.875 10.5H3.375ZM10.5 3.375C14.435 3.375 17.625 6.56497 17.625 10.5H19.125C19.125 5.73654 15.2635 1.875 10.5 1.875V3.375ZM10.5 7.75H10.5087V6.25H10.5V7.75Z" fill="#B8C1CC"></path>
          </svg>
        </div>
      </div>
      <div class="chart" data-type="semi-donut"></div>
      <div class="flex flex-wrap justify-center -mt-44 -m-7">
        <div class="w-auto p-7">
          <div class="inline-flex items-center">
            <div class="mr-3 w-3 h-3 bg-neutral-100 rounded-full"></div>
            <span class="font-medium">Users</span>
          </div>
        </div>
        <div class="w-auto p-7">
          <div class="inline-flex items-center">
            <div class="mr-3 w-3 h-3 bg-neutral-600 rounded-full"></div>
            <span class="font-medium">Views</span>
          </div>
        </div>
        <div class="w-auto p-7">
          <div class="inline-flex items-center">
            <div class="mr-3 w-3 h-3 bg-gradient-purple-top rounded-full"></div>
            <span class="font-medium">Discount</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #32

Tailwind CSS

Dashy

<section class="fixed inset-0 z-50 flex items-end p-7 bg-neutral-500 bg-opacity-80">
  <div class="p-4 ml-auto max-w-sm w-full bg-white rounded-xl shadow-5xl">
    <div class="flex flex-wrap justify-between items-end -m-2">
      <div class="flex-1 p-2">
        <div class="flex flex-wrap -m-2">
          <div class="w-auto p-2">
            <img src="dashy-assets/images/bell2.svg" alt="">
          </div>
          <div class="flex-1 p-2">
            <h3 class="font-heading mb-2 text-sm font-semibold">New Notification</h3>
            <p class="text-xs text-neutral-500">Mark Dawans just purchased Clarity Landing UI Kit</p>
          </div>
        </div>
      </div>
      <div class="w-auto p-2"><a class="inline-flex px-4 py-2.5 text-xs text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">Action</a></div>
    </div>
  </div>
</section>

Tailwind Component #33

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <ul class="inline-flex flex-wrap items-center -m-0.5">
      <li class="p-0.5">
        <a class="group flex items-center text-xs text-neutral-400 hover:text-neutral-600" href="#">
          <svg class="mr-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.33333 3.33331L7.68689 2.97976C7.59312 2.88599 7.46594 2.83331 7.33333 2.83331V3.33331ZM8.66667 4.66665L8.31311 5.0202C8.40688 5.11397 8.53406 5.16665 8.66667 5.16665V4.66665ZM2.5 11.3333V4.66665H1.5V11.3333H2.5ZM3.33333 3.83331H7.33333V2.83331H3.33333V3.83331ZM6.97978 3.68687L8.31311 5.0202L9.02022 4.31309L7.68689 2.97976L6.97978 3.68687ZM8.66667 5.16665H12.6667V4.16665H8.66667V5.16665ZM13.5 5.99998V11.3333H14.5V5.99998H13.5ZM12.6667 12.1666H3.33333V13.1666H12.6667V12.1666ZM12.6667 5.16665C13.1269 5.16665 13.5 5.53974 13.5 5.99998H14.5C14.5 4.98746 13.6792 4.16665 12.6667 4.16665V5.16665ZM2.5 4.66665C2.5 4.20641 2.8731 3.83331 3.33333 3.83331V2.83331C2.32081 2.83331 1.5 3.65412 1.5 4.66665H2.5ZM13.5 11.3333C13.5 11.7936 13.1269 12.1666 12.6667 12.1666V13.1666C13.6792 13.1666 14.5 12.3458 14.5 11.3333H13.5ZM1.5 11.3333C1.5 12.3458 2.32081 13.1666 3.33333 13.1666V12.1666C2.8731 12.1666 2.5 11.7936 2.5 11.3333H1.5Z" fill="currentColor"></path>
          </svg>
          <svg class="text-neutral-300 group-hover:text-neutral-400" width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.5 3L8 6.5L4.5 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </li>
      <li class="p-0.5">
        <a class="group flex items-center text-xs text-neutral-400 hover:text-neutral-600" href="#">
          <span class="mr-1">Customers</span>
          <svg class="text-neutral-300 group-hover:text-neutral-400" width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.5 3L8 6.5L4.5 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </li>
      <li class="p-0.5">
        <a class="group flex items-center text-xs text-neutral-400 hover:text-neutral-600" href="#">
          <span class="mr-1">Profile</span>
          <svg class="text-neutral-300 group-hover:text-neutral-400" width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.5 3L8 6.5L4.5 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </li>
      <li class="p-0.5">
        <a class="group flex items-center text-xs text-neutral-600" href="#">
          <span>Edit</span>
        </a>
      </li>
    </ul>
  </div>
</section>

Tailwind Component #34

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" x-data="{ pagination: 1 }">
  <div class="container px-4 mx-auto">
    <div class="pt-5 pb-7 bg-neutral-50 border border-neutral-100 rounded-xl">
      <div class="px-6">
        <div class="flex flex-wrap items-center justify-between -m-2 mb-5">
          <div class="w-auto p-2">
            <h3 class="font-heading text-lg text-neutral-600 font-semibold">New Bookings</h3>
          </div>
          <div class="w-auto p-2">
            <a class="inline-flex items-center px-4 py-2.5 text-sm text-neutral-50 font-medium bg-neutral-600 hover:bg-neutral-800 focus:ring-4 focus:ring-neutral-400 rounded-lg" href="#">
              <svg class="mr-2.5" width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.25 0.999805C6.25 0.585592 5.91421 0.249805 5.5 0.249805C5.08579 0.249805 4.75 0.585592 4.75 0.999805H6.25ZM4.75 8.99981C4.75 9.41402 5.08579 9.74981 5.5 9.74981C5.91421 9.74981 6.25 9.41402 6.25 8.99981H4.75ZM9.5 5.74981C9.91421 5.74981 10.25 5.41402 10.25 4.99981C10.25 4.58559 9.91421 4.24981 9.5 4.24981V5.74981ZM1.5 4.24981C1.08579 4.24981 0.75 4.58559 0.75 4.99981C0.75 5.41402 1.08579 5.74981 1.5 5.74981L1.5 4.24981ZM4.75 0.999805V4.99981H6.25V0.999805H4.75ZM4.75 4.99981V8.99981H6.25V4.99981H4.75ZM9.5 4.24981H5.5V5.74981H9.5V4.24981ZM5.5 4.24981L1.5 4.24981L1.5 5.74981H5.5L5.5 4.24981Z" fill="#F9FAFB"></path>
              </svg>
              <span>Add Booking</span>
            </a>
          </div>
        </div>
        <div class="mb-12 w-full overflow-x-auto">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="p-0">
                  <div class="pb-3.5">
                    <a class="inline-flex items-center" href="#">
                      <span class="mr-2.5 text-sm text-gray-400 font-medium">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.5636C5.11508 6.21213 5.68492 6.21213 6.0364 6.5636L9 9.52721L11.9636 6.5636C12.3151 6.21213 12.8849 6.21213 13.2364 6.5636C13.5879 6.91508 13.5879 7.48492 13.2364 7.8364L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.8364C4.41213 7.48492 4.41213 6.91508 4.7636 6.5636Z" fill="#7F8995"></path>
                      </svg>
                    </a>
                  </div>
                </th>
                <th class="p-0">
                  <div class="pb-3.5">
                    <a class="inline-flex items-center" href="#">
                      <span class="mr-2.5 text-sm text-gray-400 font-medium">Email</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.5636C5.11508 6.21213 5.68492 6.21213 6.0364 6.5636L9 9.52721L11.9636 6.5636C12.3151 6.21213 12.8849 6.21213 13.2364 6.5636C13.5879 6.91508 13.5879 7.48492 13.2364 7.8364L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.8364C4.41213 7.48492 4.41213 6.91508 4.7636 6.5636Z" fill="#7F8995"></path>
                      </svg>
                    </a>
                  </div>
                </th>
                <th class="p-0">
                  <div class="pb-3.5">
                    <a class="inline-flex items-center" href="#">
                      <span class="mr-4 text-sm text-gray-400 font-medium">Booking 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.5636C5.11508 6.21213 5.68492 6.21213 6.0364 6.5636L9 9.52721L11.9636 6.5636C12.3151 6.21213 12.8849 6.21213 13.2364 6.5636C13.5879 6.91508 13.5879 7.48492 13.2364 7.8364L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.8364C4.41213 7.48492 4.41213 6.91508 4.7636 6.5636Z" fill="#7F8995"></path>
                      </svg>
                    </a>
                  </div>
                </th>
                <th class="p-0">
                  <div class="pb-3.5 flex justify-end">
                    <a class="inline-flex items-center" href="#">
                      <span class="mr-4 text-sm text-gray-400 font-medium">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.5636C5.11508 6.21213 5.68492 6.21213 6.0364 6.5636L9 9.52721L11.9636 6.5636C12.3151 6.21213 12.8849 6.21213 13.2364 6.5636C13.5879 6.91508 13.5879 7.48492 13.2364 7.8364L9.6364 11.4364C9.28492 11.7879 8.71508 11.7879 8.3636 11.4364L4.7636 7.8364C4.41213 7.48492 4.41213 6.91508 4.7636 6.5636Z" fill="#7F8995"></path>
                      </svg>
                    </a>
                  </div>
                </th>
                <th class="p-0">
                  <div class="pb-3.5"></div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3" src="dashy-assets/images/avatar5.png" alt="">
                    <span class="font-semibold">Corina McCoy</span>
                  </div>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">coy73@aol.com</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">Aug 21, 2022 9:45PM</span>
                </td>
                <td class="flex justify-end py-3 pr-4">
                  <span class="px-2.5 py-1 text-sm font-medium text-blue-500 bg-blue-500 bg-opacity-10 rounded-full">Confirmed</span>
                </td>
                <td class="py-3">
                  <a class="inline-flex" 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-3 pr-4">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3" src="dashy-assets/images/avatar5.png" alt="">
                    <span class="font-semibold">Brooklyn Simmons</span>
                  </div>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">coy73@aol.com</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">Aug 21, 2022 9:45PM</span>
                </td>
                <td class="flex justify-end py-3 pr-4">
                  <span class="px-2.5 py-1 text-sm font-medium text-blue-500 bg-blue-500 bg-opacity-10 rounded-full">Confirmed</span>
                </td>
                <td class="py-3">
                  <a class="inline-flex" 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-3 pr-4">
                  <div class="flex flex-wrap items-center pl-12">
                    <span class="font-semibold">Esther Howard</span>
                  </div>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">phillips416@gmail.com</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">Aug 21, 2022 9:45PM</span>
                </td>
                <td class="flex justify-end py-3 pr-4">
                  <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-3">
                  <a class="inline-flex" 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-3 pr-4">
                  <div class="flex flex-wrap items-center pl-12">
                    <span class="font-semibold">Guy Hawkins</span>
                  </div>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">phillips416@gmail.com</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">Aug 21, 2022 9:45PM</span>
                </td>
                <td class="flex justify-end py-3 pr-4">
                  <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-3">
                  <a class="inline-flex" 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-3 pr-4">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3" src="dashy-assets/images/avatar5.png" alt="">
                    <span class="font-semibold">Jane Cooper</span>
                  </div>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">coy73@aol.com</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">Aug 21, 2022 9:45PM</span>
                </td>
                <td class="flex justify-end py-3 pr-4">
                  <span class="px-2.5 py-1 text-sm font-medium text-blue-500 bg-blue-500 bg-opacity-10 rounded-full">Confirmed</span>
                </td>
                <td class="py-3">
                  <a class="inline-flex" 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-3 pr-4">
                  <div class="flex flex-wrap items-center pl-12">
                    <span class="font-semibold">Darlene Robertson</span>
                  </div>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">phillips416@gmail.com</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">Aug 21, 2022 9:45PM</span>
                </td>
                <td class="flex justify-end py-3 pr-4">
                  <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-3">
                  <a class="inline-flex" 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-3 pr-4">
                  <div class="flex flex-wrap items-center">
                    <img class="mr-3" src="dashy-assets/images/avatar5.png" alt="">
                    <span class="font-semibold">Bessie Cooper</span>
                  </div>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">coy73@aol.com</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="font-medium">Aug 21, 2022 9:45PM</span>
                </td>
                <td class="flex justify-end py-3 pr-4">
                  <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-3">
                  <a class="inline-flex" 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">
            <p class="text-sm text-neutral-500">Showing 1 of 20 out of 157 results</p>
          </div>
          <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>
      </div>
    </div>
  </div>
</section>

Tailwind Component #35

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-2.5 bg-neutral-50 border border-neutral-100 rounded-xl">
      <div class="px-5 py-1">
        <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-2.5">
                    <div class="w-auto p-2.5">
                      <img src="dashy-assets/images/visa.svg" alt="">
                    </div>
                    <div class="w-auto p-2.5">
                      <span class="block mb-1 text-sm font-semibold">Visa ending 4556</span>
                      <span class="block text-xs text-neutral-500">Expiry 03/2025</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <div class="flex items-center justify-end">
                    <div class="flex items-center mr-5 px-2 py-1.5 bg-green-500 bg-opacity-10 rounded-lg">
                      <svg class="mr-1.5" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99961 14.9C11.5342 14.9 14.3996 12.0346 14.3996 8.50001C14.3996 4.96538 11.5342 2.10001 7.99961 2.10001C4.46499 2.10001 1.59961 4.96538 1.59961 8.50001C1.59961 12.0346 4.46499 14.9 7.99961 14.9ZM10.9653 7.46569C11.2777 7.15327 11.2777 6.64674 10.9653 6.33432C10.6529 6.0219 10.1463 6.0219 9.83392 6.33432L7.19961 8.96863L6.16529 7.93432C5.85288 7.6219 5.34634 7.6219 5.03392 7.93432C4.7215 8.24674 4.7215 8.75327 5.03392 9.06569L6.63392 10.6657C6.94634 10.9781 7.45288 10.9781 7.76529 10.6657L10.9653 7.46569Z" fill="#20C43A"></path>
                      </svg>
                      <span class="text-xs text-green-500 font-medium">Primary Card</span>
                    </div>
                    <a class="inline-block text-sm hover:text-neutral-700 font-medium" href="#">Edit</a>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="bg-neutral-50 border border-neutral-100 rounded-xl">
      <div class="px-5 py-1">
        <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-2.5">
                    <div class="w-auto p-2.5">
                      <img src="dashy-assets/images/visa.svg" alt="">
                    </div>
                    <div class="w-auto p-2.5">
                      <span class="block mb-1 text-sm font-semibold">Visa ending 7755</span>
                      <span class="block text-xs text-neutral-500">Expiry 04/2027</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <div class="flex items-center justify-end"><a class="inline-block mr-5 text-sm text-transparent font-medium bg-clip-text bg-gradient-purple-left" href="#">Set as Primary</a><a class="inline-block text-sm hover:text-neutral-700 font-medium" href="#">Edit</a></div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #36

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Max Meeting Duration</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto overflow-hidden border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <div class="flex flex-wrap sm:flex-nowrap sm:divide-x divide-neutral-200">
              <div class="w-full sm:flex-1">
                <input class="py-3 px-3.5 text-sm w-full h-full hover:bg-gray-50 outline-none placeholder-neutral-400" id="inputsInput2-1" type="text" placeholder="Min">
              </div>
              <div class="w-full sm:w-auto">
                <div class="py-2 px-3.5 bg-light">
                  <span class="text-sm font-medium">Min</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #37

Tailwind CSS

Dashy

<section class="py-4 bg-neutral-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <img class="mx-auto mb-8" src="dashy-assets/images/empty2.png" alt="">
    <div class="max-w-2xl mx-auto text-center">
      <p class="mb-8 text-lg">Rules help spend less time on ads management by automatically tracking your campaign performance and executing actions</p>
      <div class="flex flex-wrap justify-center -m-2">
        <div class="w-auto p-2"><a class="inline-flex px-6 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="#">Invite Team Members</a></div>
        <div class="w-auto p-2"><a class="inline-flex px-6 py-2.5 text-sm font-medium border hover:border-neutral-200 rounded-lg" href="#">Learn How It Works</a></div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #38

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="p-4 bg-white border rounded-xl">
      <div class="flex flex-wrap -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <img src="dashy-assets/images/information-circle.svg" alt="">
            </div>
            <div class="flex-1 p-1.5">
              <p class="font-medium">
                <span>You cancelled your subscription and will be under a free plan starting</span>
                <span class="text-transparent bg-clip-text bg-gradient-purple-left">Jun 1, 2022.</span>
              </p>
            </div>
          </div>
        </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="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 #39

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="pb-5 max-w-sm mx-auto bg-white rounded-xl shadow-3xl">
      <div class="px-5 pb-3.5">
        <div class="flex flex-wrap items-center justify-between border-b">
          <div class="w-auto">
            <h3 class="font-heading pt-4 pb-2.5 text-lg font-semibold">Weekly Leaderboard 🎉</h3>
          </div>
          <div class="w-auto">
            <button x-on:click="open=false" class="text-neutral-300 hover:text-neutral-400">
              <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.46967 12.9697C4.17678 13.2626 4.17678 13.7374 4.46967 14.0303C4.76256 14.3232 5.23744 14.3232 5.53033 14.0303L4.46967 12.9697ZM14.5303 5.03033C14.8232 4.73744 14.8232 4.26256 14.5303 3.96967C14.2374 3.67678 13.7626 3.67678 13.4697 3.96967L14.5303 5.03033ZM5.53033 3.96967C5.23744 3.67678 4.76256 3.67678 4.46967 3.96967C4.17678 4.26256 4.17678 4.73744 4.46967 5.03033L5.53033 3.96967ZM13.4697 14.0303C13.7626 14.3232 14.2374 14.3232 14.5303 14.0303C14.8232 13.7374 14.8232 13.2626 14.5303 12.9697L13.4697 14.0303ZM5.53033 14.0303L14.5303 5.03033L13.4697 3.96967L4.46967 12.9697L5.53033 14.0303ZM4.46967 5.03033L13.4697 14.0303L14.5303 12.9697L5.53033 3.96967L4.46967 5.03033Z" fill="currentColor"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap justify-between px-6 mb-3 -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-2">
            <div class="w-auto p-2">
              <img class="h-9" src="dashy-assets/images/avatar40.png" alt="">
            </div>
            <div class="w-auto p-2">
              <h3 class="font-heading mb-px font-medium">Darrell Steward</h3>
              <p class="text-sm text-neutral-500">Design Team</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-neutral-500">4019 Points</p>
        </div>
      </div>
      <div class="flex flex-wrap justify-between px-6 mb-3 -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-2">
            <div class="w-auto p-2">
              <img class="h-9" src="dashy-assets/images/avatar41.png" alt="">
            </div>
            <div class="w-auto p-2">
              <h3 class="font-heading mb-px font-medium">Jenny Wilson</h3>
              <p class="text-sm text-neutral-500">Marketing Team</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-neutral-500">3578 Points</p>
        </div>
      </div>
      <div class="flex flex-wrap justify-between px-6 mb-3 -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-2">
            <div class="w-auto p-2">
              <img class="h-9" src="dashy-assets/images/avatar42.png" alt="">
            </div>
            <div class="w-auto p-2">
              <h3 class="font-heading mb-px font-medium">Devon Lane</h3>
              <p class="text-sm text-neutral-500">Design Team</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-neutral-500">3146 Points</p>
        </div>
      </div>
      <div class="flex flex-wrap justify-between px-6 mb-3 -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-2">
            <div class="w-auto p-2">
              <img class="h-9" src="dashy-assets/images/avatar43.png" alt="">
            </div>
            <div class="w-auto p-2">
              <h3 class="font-heading mb-px font-medium">Jane Cooper</h3>
              <p class="text-sm text-neutral-500">Customer Support Team</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-neutral-500">2951 Points</p>
        </div>
      </div>
      <div class="flex flex-wrap justify-between px-6 -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-2">
            <div class="w-auto p-2">
              <img class="h-9" src="dashy-assets/images/avatar44.png" alt="">
            </div>
            <div class="w-auto p-2">
              <h3 class="font-heading mb-px font-medium">Dianne Russell</h3>
              <p class="text-sm text-neutral-500">Sales Team</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-neutral-500">2403 Points</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #40

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 pb-5 bg-white border rounded-xl">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading mb-1 text-sm text-neutral-400 font-medium">Total Billing</h3>
          <p class="font-semibold text-xl">$12.502K</p>
        </div>
        <div class="w-auto p-2">
          <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="#7F8995"></path>
          </svg>
        </div>
      </div>
      <div class="chart" data-type="line-graph2"></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 #21

Your next website starts here

Tailwind Component #22

Tailwind Component #23

Tailwind Component #24

Tailwind Component #25

Tailwind Component #26

Tailwind Component #27

Tailwind Component #28

Tailwind Component #29

Tailwind Component #30

Tailwind Component #31

Tailwind Component #32

Tailwind Component #33

Tailwind Component #34

Tailwind Component #35

Tailwind Component #36

Tailwind Component #37

Tailwind Component #38

Tailwind Component #39

Tailwind Component #40

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