UI Components in Dashy library

Tailwind Component #1

<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 items-center justify-between -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Activity</h3>
        </div>
        <div class="w-auto p-2">
          <div class="relative h-full overflow-hidden rounded-full">
            <select class="appearance-none py-1.5 pl-3.5 pr-10 text-sm text-neutral-600 font-medium w-full h-full bg-light outline-none cursor-pointer">
              <option value="USD">This week</option>
              <option value="CHF">This month</option>
              <option value="EUR">This year</option>
            </select>
            <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.1673 6L8.50065 10.6667L3.83398 6" stroke="#0C1523" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="chart" data-type="line-graph1"></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 #2

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">Welcome John 👋</h1>
    <p class="text-sm text-neutral-500">Check today’s sales report</p>
  </div>
</section>

Tailwind Component #3

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/4 p-3">
        <div class="p-5 h-full text-center bg-white rounded-lg">
          <p class="mb-4 text-sm text-neutral-500 font-medium">Total Sales</p>
          <h3 class="font-heading mb-1 text-4xl tracking-tight font-bold">45,305</h3>
          <p class="text-xs text-neutral-400">Last updated 2 hours ago</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 p-3">
        <div class="p-5 h-full text-center bg-white rounded-lg">
          <p class="mb-4 text-sm text-neutral-500 font-medium">Total Sales</p>
          <h3 class="font-heading mb-1 text-4xl tracking-tight font-bold">2,942</h3>
          <p class="text-xs text-neutral-400">Last updated 2 hours ago</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 p-3">
        <div class="p-5 h-full text-center bg-white rounded-lg">
          <p class="mb-4 text-sm text-neutral-500 font-medium">Today’s Revenue</p>
          <h3 class="font-heading mb-1 text-4xl tracking-tight font-bold">$35,690</h3>
          <p class="text-xs text-neutral-400">Last updated 2 hours ago</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 p-3">
        <div class="p-5 h-full text-center bg-white rounded-lg">
          <p class="mb-4 text-sm text-neutral-500 font-medium">Today’s Profit</p>
          <h3 class="font-heading mb-1 text-4xl tracking-tight font-bold">$21,495</h3>
          <p class="text-xs text-neutral-400">Last updated 2 hours ago</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #4

Tailwind CSS

Dashy

<section class="fixed inset-0 z-50 p-7 bg-neutral-500 bg-opacity-80" x-data="{ open: true }" :class="{'hidden': !open}">
  <div class="p-4 ml-auto max-w-sm w-full bg-white rounded-xl shadow-5xl">
    <div class="flex flex-wrap justify-between -m-2">
      <div class="flex-1 p-2">
        <div class="flex flex-wrap -m-2">
          <div class="w-auto p-2">
            <div class="flex items-center justify-center w-10 h-10 bg-gradient-purple-top rounded-full">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.66797 5.08333C6.25376 5.08333 5.91797 5.41912 5.91797 5.83333C5.91797 6.24755 6.25376 6.58333 6.66797 6.58333L6.66797 5.08333ZM16.668 5.83333L17.1983 6.36366C17.4912 6.07077 17.4912 5.5959 17.1983 5.303L16.668 5.83333ZM13.865 1.96967C13.5721 1.67678 13.0972 1.67678 12.8043 1.96967C12.5114 2.26256 12.5114 2.73744 12.8043 3.03033L13.865 1.96967ZM12.8043 8.63634C12.5114 8.92923 12.5114 9.4041 12.8043 9.697C13.0972 9.98989 13.5721 9.98989 13.865 9.697L12.8043 8.63634ZM13.3346 14.9167C13.7488 14.9167 14.0846 14.5809 14.0846 14.1667C14.0846 13.7525 13.7488 13.4167 13.3346 13.4167L13.3346 14.9167ZM3.33464 14.1667L2.80431 13.6363C2.51141 13.9292 2.51141 14.4041 2.80431 14.697L3.33464 14.1667ZM6.13764 18.0303C6.43053 18.3232 6.90541 18.3232 7.1983 18.0303C7.49119 17.7374 7.49119 17.2626 7.1983 16.9697L6.13764 18.0303ZM7.1983 11.3637C7.49119 11.0708 7.49119 10.5959 7.1983 10.303C6.90541 10.0101 6.43053 10.0101 6.13764 10.303L7.1983 11.3637ZM6.66797 6.58333L16.668 6.58333L16.668 5.08333L6.66797 5.08333L6.66797 6.58333ZM12.8043 3.03033L16.1376 6.36366L17.1983 5.303L13.865 1.96967L12.8043 3.03033ZM16.1376 5.303L12.8043 8.63634L13.865 9.697L17.1983 6.36366L16.1376 5.303ZM13.3346 13.4167L3.33464 13.4167L3.33464 14.9167L13.3346 14.9167L13.3346 13.4167ZM7.1983 16.9697L3.86497 13.6363L2.80431 14.697L6.13764 18.0303L7.1983 16.9697ZM3.86497 14.697L7.1983 11.3637L6.13764 10.303L2.80431 13.6363L3.86497 14.697Z" fill="white"></path>
              </svg>
            </div>
          </div>
          <div class="flex-1 p-2">
            <h3 class="font-heading mb-1 text-sm font-semibold">Transfer successful</h3>
            <p class="text-xs text-neutral-500">Your file transfer is successfully done</p>
          </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>
</section>

Tailwind Component #5

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-2">
      <li class="p-2">
        <a class="group flex items-center text-xs text-neutral-500 hover:text-neutral-600" href="#">
          <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.75 7L2.91667 5.83333M2.91667 5.83333L7 1.75L11.0833 5.83333M2.91667 5.83333V11.6667C2.91667 11.9888 3.17783 12.25 3.5 12.25H5.25M11.0833 5.83333L12.25 7M11.0833 5.83333V11.6667C11.0833 11.9888 10.8222 12.25 10.5 12.25H8.75M5.25 12.25C5.57217 12.25 5.83333 11.9888 5.83333 11.6667V9.33333C5.83333 9.01117 6.0945 8.75 6.41667 8.75H7.58333C7.9055 8.75 8.16667 9.01117 8.16667 9.33333V11.6667C8.16667 11.9888 8.42783 12.25 8.75 12.25M5.25 12.25H8.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>/</span>
        </a>
      </li>
      <li class="p-2">
        <a class="group flex items-center text-xs text-neutral-500 hover:text-neutral-600" href="#">
          <span class="mr-4">Reports</span>
          <span>/</span>
        </a>
      </li>
      <li class="p-2">
        <a class="group flex items-center text-xs text-neutral-500 hover:text-neutral-600" href="#">
          <span>Weekly Report</span>
        </a>
      </li>
    </ul>
  </div>
</section>

Tailwind Component #6

Tailwind CSS

Dashy

<section class="py-4 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <a class="group mb-2 inline-flex items-center text-sm" href="#">
      <svg class="mr-3 text-neutral-500 group-hover:text-neutral-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.13634 13.197C6.42923 13.4899 6.9041 13.4899 7.197 13.197C7.48989 12.9041 7.48989 12.4292 7.197 12.1363L6.13634 13.197ZM2 7.99998L1.46967 7.46965C1.32902 7.6103 1.25 7.80107 1.25 7.99998C1.25 8.19889 1.32902 8.38966 1.46967 8.53031L2 7.99998ZM7.197 3.86364C7.48989 3.57075 7.48989 3.09588 7.197 2.80298C6.9041 2.51009 6.42923 2.51009 6.13634 2.80298L7.197 3.86364ZM14 8.74998C14.4142 8.74998 14.75 8.41419 14.75 7.99998C14.75 7.58577 14.4142 7.24998 14 7.24998V8.74998ZM7.197 12.1363L2.53033 7.46965L1.46967 8.53031L6.13634 13.197L7.197 12.1363ZM2.53033 8.53031L7.197 3.86364L6.13634 2.80298L1.46967 7.46965L2.53033 8.53031ZM2 8.74998L14 8.74998V7.24998L2 7.24998L2 8.74998Z" fill="currentColor"></path>
      </svg>
      <span class="text-neutral-500 group-hover:text-neutral-600">Back to Home</span>
    </a>
    <h2 class="font-heading mb-11 text-xl font-semibold">Media Files</h2>
    <div class="flex flex-wrap -m-3">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media2.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media3.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media4.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media5.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media6.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media7.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media8.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media9.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media10.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #7

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">
        <h3 class="font-heading pb-5 text-lg text-neutral-600 font-semibold">Top Customers</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-2">
                    <div class="w-auto p-2">
                      <img src="dashy-assets/images/avatar12.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Theresa Webb</span>
                      <span class="block text-sm text-neutral-500">lushe@att.net</span>
                    </div>
                  </div>
                </td>
                <td class="flex items-start justify-end py-3 pl-4">
                  <span class="relative top-0.5 text-sm font-medium">$12,399</span>
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img src="dashy-assets/images/avatar11.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Brooklyn Simmons</span>
                      <span class="block text-sm text-neutral-500">manhhachkt08@gmail.com</span>
                    </div>
                  </div>
                </td>
                <td class="flex items-start justify-end py-3 pl-4">
                  <span class="relative top-0.5 text-sm font-medium">$11,234</span>
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img src="dashy-assets/images/avatar13.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Courtney Henry</span>
                      <span class="block text-sm text-neutral-500">ckctm12@gmail.com</span>
                    </div>
                  </div>
                </td>
                <td class="flex items-start justify-end py-3 pl-4">
                  <span class="relative top-0.5 text-sm font-medium">$11,159</span>
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img src="dashy-assets/images/avatar14.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Ralph Edwards</span>
                      <span class="block text-sm text-neutral-500">tranthuy.nute@gmail.com</span>
                    </div>
                  </div>
                </td>
                <td class="flex items-start justify-end py-3 pl-4">
                  <span class="relative top-0.5 text-sm font-medium">$10,483</span>
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-2">
                    <div class="w-auto p-2">
                      <img src="dashy-assets/images/avatar15.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <span class="block font-semibold">Jenny Wilson</span>
                      <span class="block text-sm text-neutral-500">binhan628@gmail.com</span>
                    </div>
                  </div>
                </td>
                <td class="flex items-start justify-end py-3 pl-4">
                  <span class="relative top-0.5 text-sm font-medium">$9,084</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #8

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 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>
    <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-ref="menu1" x-on:click.prevent="menu = $refs.menu1.textContent" :class="{'text-neutral-600': menu == $refs.menu1.textContent, 'text-neutral-400 hover:text-neutral-600': menu !== $refs.menu1.textContent}" class="text-sm font-medium text-neutral-600" href="#">Dashboard</a></li>
        <li class="mr-10"><a x-ref="menu2" x-on:click.prevent="menu = $refs.menu2.textContent" :class="{'text-neutral-600': menu == $refs.menu2.textContent}" class="text-sm font-medium text-neutral-400 hover:text-neutral-600" href="#">Tweets</a></li>
        <li class="mr-10"><a x-ref="menu3" x-on:click.prevent="menu = $refs.menu3.textContent" :class="{'text-neutral-600': menu == $refs.menu3.textContent}" class="text-sm font-medium text-neutral-400 hover:text-neutral-600" href="#">Growth</a></li>
        <li class="mr-10"><a x-ref="menu4" x-on:click.prevent="menu = $refs.menu4.textContent" :class="{'text-neutral-600': menu == $refs.menu4.textContent}" class="text-sm font-medium text-neutral-400 hover:text-neutral-600" href="#">Spaces</a></li>
        <li><a x-ref="menu5" x-on:click.prevent="menu = $refs.menu5.textContent" :class="{'text-neutral-600': menu == $refs.menu5.textContent}" class="text-sm font-medium text-neutral-400 hover:text-neutral-600" href="#">Followers</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="mr-7 px-2.5 py-1 text-xs font-medium text-white bg-gradient-purple-left focus:ring-4 focus:ring-purple-300 rounded-full" href="#">14 days left</a>
            <img class="mr-3" src="dashy-assets/images/avatar3.png" alt="">
            <a href="#">
              <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="#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 #9

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative pt-6 px-8 pb-7 bg-neutral-600 rounded-xl">
      <img class="absolute -right-px -top-px" src="dashy-assets/images/elipse-gradient2.svg" alt="">
      <img class="absolute -right-px -bottom-px" src="dashy-assets/images/elipse-gradient.svg" alt="">
      <div class="relative z-10">
        <h3 class="mb-1.5 text-xl text-white font-semibold">How can Dashy improve team insights for you?</h3>
        <p class="mb-9 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="#">Share your feedback</a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #10

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-6 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">
              <svg class="relative top-0.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 10H10.75C10.75 9.58579 10.4142 9.25 10 9.25V10ZM10 13.3333H9.25C9.25 13.7475 9.58579 14.0833 10 14.0833V13.3333ZM10.8333 14.0833C11.2475 14.0833 11.5833 13.7475 11.5833 13.3333C11.5833 12.9191 11.2475 12.5833 10.8333 12.5833V14.0833ZM9.16667 9.25C8.75245 9.25 8.41667 9.58579 8.41667 10C8.41667 10.4142 8.75245 10.75 9.16667 10.75V9.25ZM10 5.91667C9.58579 5.91667 9.25 6.25245 9.25 6.66667C9.25 7.08088 9.58579 7.41667 10 7.41667V5.91667ZM10.0083 7.41667C10.4225 7.41667 10.7583 7.08088 10.7583 6.66667C10.7583 6.25245 10.4225 5.91667 10.0083 5.91667V7.41667ZM9.25 10V13.3333H10.75V10H9.25ZM10 14.0833H10.8333V12.5833H10V14.0833ZM10 9.25H9.16667V10.75H10V9.25ZM16.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.25ZM10 7.41667H10.0083V5.91667H10V7.41667Z" fill="#B8C1CC"></path>
              </svg>
            </div>
            <div class="flex-1 p-1.5">
              <p class="font-medium">
                <span class="text-transparent bg-clip-text bg-gradient-purple-left">Register now for September office hours:</span>
                <span>WME updates and new features!</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 #11

Tailwind CSS

Dashy

<section class="py-4 bg-neutral-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <img class="mx-auto" src="dashy-assets/images/empty.png" alt="">
    <div class="max-w-md mx-auto text-center">
      <h2 class="font-heading mb-3 text-2xl font-semibold">It’s a bit empty here</h2>
      <p class="mb-7 text-neutral-500">Make sure to customize your timeline first and fill it with eye-catching articles and products.</p>
      <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="#">Add First Product</a>
    </div>
  </div>
</section>

Tailwind Component #12

Tailwind CSS

Dashy

<section class="fixed inset-0 z-50 flex items-center justify-center flex-wrap py-28 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="relative pt-16 pb-20 px-16 text-center bg-white rounded-xl shadow-3xl">
      <button x-on:click="open=false" class="absolute right-6 top-6 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.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L5.46967 17.4697ZM18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L18.5303 6.53033ZM6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L6.53033 5.46967ZM17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L17.4697 18.5303ZM6.53033 18.5303L18.5303 6.53033L17.4697 5.46967L5.46967 17.4697L6.53033 18.5303ZM5.46967 6.53033L17.4697 18.5303L18.5303 17.4697L6.53033 5.46967L5.46967 6.53033Z" fill="currentColor"></path>
        </svg>
      </button>
      <h2 class="font-heading mb-2 text-4xl text-center font-bold rounded-xl">What will you be using Dashy for?</h2>
      <p class="mb-11 text-neutral-500">We’ll use this to recommend designs and templates, especially for you</p>
      <div class="flex flex-wrap mb-9 -m-3">
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M23.75 26.25V27L23.75 27L23.75 26.25ZM6.25 26.25L6.24999 27H6.25V26.25ZM3.75001 25.5C3.3358 25.5 3.00001 25.8357 3 26.25C2.99999 26.6642 3.33578 27 3.74999 27L3.75001 25.5ZM11.25 7.99997C10.8358 7.99997 10.5 8.33576 10.5 8.74997C10.5 9.16418 10.8358 9.49997 11.25 9.49997V7.99997ZM12.5 9.49997C12.9142 9.49997 13.25 9.16418 13.25 8.74997C13.25 8.33576 12.9142 7.99997 12.5 7.99997V9.49997ZM11.25 13C10.8358 13 10.5 13.3358 10.5 13.75C10.5 14.1642 10.8358 14.5 11.25 14.5V13ZM12.5 14.5C12.9142 14.5 13.25 14.1642 13.25 13.75C13.25 13.3358 12.9142 13 12.5 13V14.5ZM17.5 7.99997C17.0858 7.99997 16.75 8.33576 16.75 8.74997C16.75 9.16418 17.0858 9.49997 17.5 9.49997V7.99997ZM18.75 9.49997C19.1642 9.49997 19.5 9.16418 19.5 8.74997C19.5 8.33576 19.1642 7.99997 18.75 7.99997V9.49997ZM17.5 13C17.0858 13 16.75 13.3358 16.75 13.75C16.75 14.1642 17.0858 14.5 17.5 14.5V13ZM18.75 14.5C19.1642 14.5 19.5 14.1642 19.5 13.75C19.5 13.3358 19.1642 13 18.75 13V14.5ZM26.25 27C26.6642 27 27 26.6642 27 26.25C27 25.8357 26.6642 25.5 26.25 25.5L26.25 27ZM8.75 4.5H21.25V3H8.75V4.5ZM23 6.25V26.25H24.5V6.25H23ZM7 26.25V6.25H5.5V26.25H7ZM21.25 4.5C22.2165 4.5 23 5.2835 23 6.25H24.5C24.5 4.45507 23.0449 3 21.25 3V4.5ZM8.75 3C6.95507 3 5.5 4.45507 5.5 6.25H7C7 5.2835 7.7835 4.5 8.75 4.5V3ZM3.74999 27L6.24999 27L6.25001 25.5L3.75001 25.5L3.74999 27ZM13.75 19.5H16.25V18H13.75V19.5ZM11.25 9.49997H12.5V7.99997H11.25V9.49997ZM11.25 14.5H12.5V13H11.25V14.5ZM17.5 9.49997H18.75V7.99997H17.5V9.49997ZM17.5 14.5H18.75V13H17.5V14.5ZM16.25 19.5C16.5261 19.5 16.75 19.7238 16.75 20H18.25C18.25 18.8954 17.3546 18 16.25 18V19.5ZM13.25 20C13.25 19.7238 13.4739 19.5 13.75 19.5V18C12.6454 18 11.75 18.8954 11.75 20H13.25ZM12.5 25.5H6.25V27H12.5V25.5ZM11.75 20V26.25H13.25V20H11.75ZM23.75 27L26.25 27L26.25 25.5L23.75 25.5L23.75 27ZM23.75 25.5H17.5V27H23.75V25.5ZM17.5 25.5H12.5V27H17.5V25.5ZM16.75 20V26.25H18.25V20H16.75Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Large company</h3>
            <p class="text-neutral-500">You’re here to scale your brand and keep it consistent</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.5805 19.4194L10.0502 19.9498L10.0502 19.9498L10.5805 19.4194ZM19.4194 19.4194L19.9497 19.9498L19.9497 19.9498L19.4194 19.4194ZM11.2644 20.1033L11.7947 19.573L11.7947 19.573L11.2644 20.1033ZM12.4999 23.0862L11.7499 23.0862V23.0862H12.4999ZM18.7355 20.1033L18.2051 19.573L18.2051 19.573L18.7355 20.1033ZM17.4999 23.0862L18.2499 23.0862L18.2499 23.0862L17.4999 23.0862ZM14.9999 26.25L14.9999 25.5L14.9999 25.5L14.9999 26.25ZM12.0793 20.5C11.6651 20.5 11.3293 20.8358 11.3293 21.25C11.3293 21.6642 11.6651 22 12.0793 22V20.5ZM17.9205 22C18.3347 22 18.6705 21.6642 18.6705 21.25C18.6705 20.8358 18.3347 20.5 17.9205 20.5V22ZM15.7499 3.75C15.7499 3.33579 15.4141 3 14.9999 3C14.5857 3 14.2499 3.33579 14.2499 3.75H15.7499ZM14.2499 5C14.2499 5.41421 14.5857 5.75 14.9999 5.75C15.4141 5.75 15.7499 5.41421 15.7499 5H14.2499ZM23.4852 7.57538C23.7781 7.28249 23.7781 6.80761 23.4852 6.51472C23.1923 6.22183 22.7174 6.22183 22.4246 6.51472L23.4852 7.57538ZM21.5407 7.3986C21.2478 7.6915 21.2478 8.16637 21.5407 8.45926C21.8336 8.75216 22.3084 8.75216 22.6013 8.45926L21.5407 7.3986ZM26.25 15.7499C26.6642 15.7499 27 15.4141 27 14.9999C27 14.5857 26.6642 14.2499 26.25 14.2499V15.7499ZM25 14.2499C24.5858 14.2499 24.25 14.5857 24.25 14.9999C24.25 15.4141 24.5858 15.7499 25 15.7499V14.2499ZM5 15.7499C5.41421 15.7499 5.75 15.4141 5.75 14.9999C5.75 14.5857 5.41421 14.2499 5 14.2499V15.7499ZM3.75 14.2499C3.33579 14.2499 3 14.5857 3 14.9999C3 15.4141 3.33579 15.7499 3.75 15.7499V14.2499ZM7.39853 8.45926C7.69143 8.75216 8.1663 8.75216 8.4592 8.45926C8.75209 8.16637 8.75209 7.69149 8.4592 7.3986L7.39853 8.45926ZM7.57531 6.51472C7.28242 6.22182 6.80754 6.22182 6.51465 6.51472C6.22176 6.80761 6.22176 7.28249 6.51465 7.57538L7.57531 6.51472ZM11.1108 18.8891C8.96296 16.7412 8.96296 13.2588 11.1108 11.1109L10.0502 10.0503C7.31652 12.784 7.31652 17.2161 10.0502 19.9498L11.1108 18.8891ZM11.1108 11.1109C13.2587 8.96306 16.7411 8.96306 18.889 11.1109L19.9497 10.0503C17.216 7.31661 12.7839 7.31661 10.0502 10.0503L11.1108 11.1109ZM18.889 11.1109C21.0369 13.2588 21.0369 16.7412 18.889 18.8891L19.9497 19.9498C22.6834 17.2161 22.6834 12.784 19.9497 10.0503L18.889 11.1109ZM10.0502 19.9498L10.7341 20.6336L11.7947 19.573L11.1108 18.8891L10.0502 19.9498ZM11.7499 23.0862V23.75H13.2499V23.0862H11.7499ZM18.889 18.8891L18.2051 19.573L19.2658 20.6336L19.9497 19.9498L18.889 18.8891ZM16.7499 23.0862V23.75H18.2499V23.0862H16.7499ZM16.7499 23.75C16.7499 24.7165 15.9664 25.5 14.9999 25.5L14.9999 27C16.7949 27 18.2499 25.5449 18.2499 23.75H16.7499ZM18.2051 19.573C17.2734 20.5047 16.7499 21.7685 16.7499 23.0862L18.2499 23.0862C18.2499 22.1663 18.6154 21.2841 19.2658 20.6336L18.2051 19.573ZM11.7499 23.75C11.7499 25.5449 13.205 27 14.9999 27L14.9999 25.5C14.0334 25.5 13.2499 24.7165 13.2499 23.75H11.7499ZM10.7341 20.6336C11.3845 21.2841 11.7499 22.1663 11.7499 23.0862L13.2499 23.0862C13.2499 21.7685 12.7265 20.5047 11.7947 19.573L10.7341 20.6336ZM12.0793 22H17.9205V20.5H12.0793V22ZM14.2499 3.75V5H15.7499V3.75H14.2499ZM22.4246 6.51472L21.5407 7.3986L22.6013 8.45926L23.4852 7.57538L22.4246 6.51472ZM26.25 14.2499H25V15.7499H26.25V14.2499ZM5 14.2499H3.75V15.7499H5V14.2499ZM8.4592 7.3986L7.57531 6.51472L6.51465 7.57538L7.39853 8.45926L8.4592 7.3986Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Personal</h3>
            <p class="text-neutral-500">You’re here to make anything and everything</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.69023 6.72856L10.0805 6.08809L9.69023 6.72856ZM12.9058 5.39664L12.177 5.2197L12.9058 5.39664ZM6.72856 9.69023L6.08809 10.0805H6.08809L6.72856 9.69023ZM5.39664 12.9058L5.2197 12.177L5.39664 12.9058ZM5.39664 17.0942L5.57357 16.3654L5.39664 17.0942ZM6.72856 20.3098L6.08809 19.9195L6.72856 20.3098ZM9.69023 23.2714L10.0805 23.9119L9.69023 23.2714ZM12.9058 24.6034L13.6346 24.4264L12.9058 24.6034ZM17.0942 24.6034L17.823 24.7803L17.0942 24.6034ZM20.3098 23.2714L19.9195 23.9119L20.3098 23.2714ZM23.2714 20.3098L23.9119 19.9195L23.2714 20.3098ZM24.6034 17.0942L24.7803 17.823L24.6034 17.0942ZM24.6034 12.9058L24.4264 13.6346L24.6034 12.9058ZM23.2714 9.69023L23.9119 10.0805L23.2714 9.69023ZM20.3098 6.72856L19.9195 6.08809L20.3098 6.72856ZM17.0942 5.39664L16.3654 5.57357L17.0942 5.39664ZM9.29998 7.36904C10.9801 8.39273 13.1705 7.48544 13.6346 5.57357L12.177 5.2197C11.9525 6.14439 10.8931 6.5832 10.0805 6.08809L9.29998 7.36904ZM7.36904 9.29998C6.60258 8.04209 8.04209 6.60258 9.29998 7.36904L10.0805 6.08809C7.47967 4.50339 4.50339 7.47967 6.08809 10.0805L7.36904 9.29998ZM5.57357 13.6346C7.48544 13.1705 8.39273 10.9801 7.36904 9.29998L6.08809 10.0805C6.58321 10.8931 6.14439 11.9525 5.2197 12.177L5.57357 13.6346ZM5.57357 16.3654C4.14214 16.0179 4.14214 13.9821 5.57357 13.6346L5.2197 12.177C2.2601 12.8954 2.2601 17.1046 5.2197 17.823L5.57357 16.3654ZM7.36904 20.7C8.39273 19.0199 7.48544 16.8295 5.57357 16.3654L5.2197 17.823C6.14439 18.0475 6.58321 19.1069 6.08809 19.9195L7.36904 20.7ZM9.29999 22.631C8.04209 23.3974 6.60259 21.9579 7.36904 20.7L6.08809 19.9195C4.50339 22.5203 7.47967 25.4966 10.0805 23.9119L9.29999 22.631ZM13.6346 24.4264C13.1705 22.5146 10.9801 21.6073 9.29999 22.631L10.0805 23.9119C10.8931 23.4168 11.9525 23.8556 12.177 24.7803L13.6346 24.4264ZM16.3654 24.4264C16.0179 25.8579 13.9821 25.8579 13.6346 24.4264L12.177 24.7803C12.8955 27.7399 17.1046 27.7399 17.823 24.7803L16.3654 24.4264ZM20.7 22.631C19.0199 21.6073 16.8295 22.5146 16.3654 24.4264L17.823 24.7803C18.0475 23.8556 19.1069 23.4168 19.9195 23.9119L20.7 22.631ZM22.631 20.7C23.3974 21.9579 21.9579 23.3974 20.7 22.631L19.9195 23.9119C22.5203 25.4966 25.4966 22.5203 23.9119 19.9195L22.631 20.7ZM24.4264 16.3654C22.5146 16.8295 21.6073 19.0199 22.631 20.7L23.9119 19.9195C23.4168 19.1069 23.8556 18.0475 24.7803 17.823L24.4264 16.3654ZM24.4264 13.6346C25.8579 13.9821 25.8579 16.0179 24.4264 16.3654L24.7803 17.823C27.7399 17.1046 27.7399 12.8954 24.7803 12.177L24.4264 13.6346ZM22.631 9.29998C21.6073 10.9801 22.5146 13.1705 24.4264 13.6346L24.7803 12.177C23.8556 11.9525 23.4168 10.8931 23.9119 10.0805L22.631 9.29998ZM20.7 7.36904C21.9579 6.60259 23.3974 8.04208 22.631 9.29998L23.9119 10.0805C25.4966 7.47967 22.5203 4.50339 19.9195 6.08809L20.7 7.36904ZM16.3654 5.57357C16.8295 7.48544 19.0199 8.39273 20.7 7.36904L19.9195 6.08809C19.1069 6.58321 18.0475 6.14439 17.823 5.2197L16.3654 5.57357ZM17.823 5.2197C17.1046 2.2601 12.8955 2.2601 12.177 5.2197L13.6346 5.57357C13.9821 4.14214 16.0179 4.14214 16.3654 5.57357L17.823 5.2197ZM18 15C18 16.6569 16.6569 18 15 18V19.5C17.4853 19.5 19.5 17.4853 19.5 15H18ZM15 18C13.3431 18 12 16.6569 12 15H10.5C10.5 17.4853 12.5147 19.5 15 19.5V18ZM12 15C12 13.3431 13.3431 12 15 12V10.5C12.5147 10.5 10.5 12.5147 10.5 15H12ZM15 12C16.6569 12 18 13.3431 18 15H19.5C19.5 12.5147 17.4853 10.5 15 10.5V12Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Teacher</h3>
            <p class="text-neutral-500">You’re here to empower your students</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 12.5V11.75C4.58579 11.75 4.25 12.0858 4.25 12.5H5ZM25 12.5H25.75C25.75 12.0858 25.4142 11.75 25 11.75V12.5ZM25 26.25V27C25.4142 27 25.75 26.6642 25.75 26.25H25ZM5 26.25H4.25C4.25 26.6642 4.58579 27 5 27V26.25ZM10.75 17.5C10.75 17.0858 10.4142 16.75 10 16.75C9.58579 16.75 9.25 17.0858 9.25 17.5H10.75ZM9.25 21.25C9.25 21.6642 9.58579 22 10 22C10.4142 22 10.75 21.6642 10.75 21.25H9.25ZM15.75 17.5C15.75 17.0858 15.4142 16.75 15 16.75C14.5858 16.75 14.25 17.0858 14.25 17.5H15.75ZM14.25 21.25C14.25 21.6642 14.5858 22 15 22C15.4142 22 15.75 21.6642 15.75 21.25H14.25ZM20.75 17.5C20.75 17.0858 20.4142 16.75 20 16.75C19.5858 16.75 19.25 17.0858 19.25 17.5H20.75ZM19.25 21.25C19.25 21.6642 19.5858 22 20 22C20.4142 22 20.75 21.6642 20.75 21.25H19.25ZM3.75 25.5C3.33579 25.5 3 25.8358 3 26.25C3 26.6642 3.33579 27 3.75 27V25.5ZM26.25 27C26.6642 27 27 26.6642 27 26.25C27 25.8358 26.6642 25.5 26.25 25.5V27ZM3.75 11.75C3.33579 11.75 3 12.0858 3 12.5C3 12.9142 3.33579 13.25 3.75 13.25V11.75ZM26.25 13.25C26.6642 13.25 27 12.9142 27 12.5C27 12.0858 26.6642 11.75 26.25 11.75V13.25ZM3.4454 8.06464C3.06688 8.23287 2.89641 8.67609 3.06464 9.0546C3.23287 9.43312 3.67609 9.60359 4.0546 9.43536L3.4454 8.06464ZM15 3.75L15.3046 3.06464C15.1107 2.97845 14.8893 2.97845 14.6954 3.06464L15 3.75ZM25.9454 9.43536C26.3239 9.60359 26.7671 9.43312 26.9354 9.0546C27.1036 8.67609 26.9331 8.23287 26.5546 8.06464L25.9454 9.43536ZM5 13.25H25V11.75H5V13.25ZM24.25 12.5V26.25H25.75V12.5H24.25ZM25 25.5H5V27H25V25.5ZM5.75 26.25V12.5H4.25V26.25H5.75ZM9.25 17.5V21.25H10.75V17.5H9.25ZM14.25 17.5V21.25H15.75V17.5H14.25ZM19.25 17.5V21.25H20.75V17.5H19.25ZM3.75 27H26.25V25.5H3.75V27ZM3.75 13.25H26.25V11.75H3.75V13.25ZM4.0546 9.43536L15.3046 4.43536L14.6954 3.06464L3.4454 8.06464L4.0546 9.43536ZM14.6954 4.43536L25.9454 9.43536L26.5546 8.06464L15.3046 3.06464L14.6954 4.43536Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Small Business</h3>
            <p class="text-neutral-500">You’re here to design your brand from the ground up</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.25 25L11.7803 25.5303C11.8764 25.4342 11.9446 25.3138 11.9776 25.1819L11.25 25ZM10 26.25L9.46967 25.7197C9.25517 25.9342 9.191 26.2568 9.30709 26.537C9.42318 26.8173 9.69665 27 10 27V26.25ZM20 26.25V27C20.3033 27 20.5768 26.8173 20.6929 26.537C20.809 26.2568 20.7448 25.9342 20.5303 25.7197L20 26.25ZM18.75 25L18.0224 25.1819C18.0554 25.3138 18.1236 25.4342 18.2197 25.5303L18.75 25ZM12.9151 21.4319C13.0156 21.0301 12.7712 20.6229 12.3694 20.5224C11.9676 20.4219 11.5604 20.6663 11.4599 21.0681L12.9151 21.4319ZM18.5401 21.0681C18.4396 20.6663 18.0324 20.4219 17.6306 20.5224C17.2288 20.6229 16.9844 21.0301 17.0849 21.4319L18.5401 21.0681ZM3.75 15.5C3.33579 15.5 3 15.8358 3 16.25C3 16.6642 3.33579 17 3.75 17V15.5ZM26.25 17C26.6642 17 27 16.6642 27 16.25C27 15.8358 26.6642 15.5 26.25 15.5V17ZM6.25 4.5H23.75V3H6.25V4.5ZM25.5 6.25V18.75H27V6.25H25.5ZM23.75 20.5H6.25V22H23.75V20.5ZM4.5 18.75V6.25H3V18.75H4.5ZM6.25 20.5C5.2835 20.5 4.5 19.7165 4.5 18.75H3C3 20.5449 4.45507 22 6.25 22V20.5ZM25.5 18.75C25.5 19.7165 24.7165 20.5 23.75 20.5V22C25.5449 22 27 20.5449 27 18.75H25.5ZM23.75 4.5C24.7165 4.5 25.5 5.2835 25.5 6.25H27C27 4.45507 25.5449 3 23.75 3V4.5ZM6.25 3C4.45507 3 3 4.45507 3 6.25H4.5C4.5 5.2835 5.2835 4.5 6.25 4.5V3ZM10.7197 24.4697L9.46967 25.7197L10.5303 26.7803L11.7803 25.5303L10.7197 24.4697ZM10 27H20V25.5H10V27ZM20.5303 25.7197L19.2803 24.4697L18.2197 25.5303L19.4697 26.7803L20.5303 25.7197ZM11.4599 21.0681L10.5224 24.8181L11.9776 25.1819L12.9151 21.4319L11.4599 21.0681ZM19.4776 24.8181L18.5401 21.0681L17.0849 21.4319L18.0224 25.1819L19.4776 24.8181ZM3.75 17H26.25V15.5H3.75V17Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Student</h3>
            <p class="text-neutral-500">You’re here to impress your teachers and classmate</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.39752 15.8525L5.92785 15.3221L5.39752 15.8525ZM13.3525 7.89752L13.8828 7.36719L13.3525 7.89752ZM15.0001 9.54511L14.4697 10.0754C14.6104 10.2161 14.8012 10.2951 15.0001 10.2951C15.199 10.2951 15.3898 10.2161 15.5304 10.0754L15.0001 9.54511ZM15.0001 25.455L14.4697 25.9853C14.6104 26.126 14.8012 26.205 15.0001 26.205C15.199 26.205 15.3897 26.126 15.5304 25.9853L15.0001 25.455ZM24.6025 15.8525L24.0721 15.3221L24.0721 15.3221L24.6025 15.8525ZM16.6475 7.89753L16.1172 7.3672L16.1172 7.36722L16.6475 7.89753ZM5.92785 15.3221C4.02405 13.4183 4.02405 10.3317 5.92785 8.42785L4.86719 7.36719C2.3776 9.85679 2.3776 13.8932 4.86719 16.3828L5.92785 15.3221ZM5.92785 8.42785C7.83166 6.52405 10.9183 6.52405 12.8221 8.42785L13.8828 7.36719C11.3932 4.8776 7.35679 4.8776 4.86719 7.36719L5.92785 8.42785ZM12.8221 8.42785L14.4697 10.0754L15.5304 9.01478L13.8828 7.36719L12.8221 8.42785ZM4.86719 16.3828L14.4697 25.9853L15.5304 24.9247L5.92785 15.3221L4.86719 16.3828ZM24.0721 8.42785C25.976 10.3317 25.976 13.4183 24.0721 15.3221L25.1328 16.3828C27.6224 13.8932 27.6224 9.85679 25.1328 7.36719L24.0721 8.42785ZM17.1779 8.42786C19.0817 6.52405 22.1683 6.52405 24.0721 8.42785L25.1328 7.36719C22.6432 4.8776 18.6068 4.8776 16.1172 7.3672L17.1779 8.42786ZM24.0721 15.3221L14.4697 24.9247L15.5304 25.9853L25.1328 16.3828L24.0721 15.3221ZM16.1172 7.36722L14.4697 9.01481L15.5304 10.0754L17.1779 8.42783L16.1172 7.36722Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Non-profit or Charity</h3>
            <p class="text-neutral-500">You’re here to design for the greater good</p>
          </div>
        </div>
      </div>
      <a class="inline-flex px-6 py-4 text-sm text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">Get Started using Dashy</a>
    </div>
  </div>
</section>

Tailwind Component #13

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" x-data="{ step: 1 }">
  <div class="container px-4 mx-auto">
    <div class="p-11 px-12 sm:px-24 bg-white border rounded-xl">
      <img class="mb-9 mx-auto" src="dashy-assets/logos/dashy-logo-dark.svg" alt="">
      <div class="flex flex-wrap mb-4 -m-2">
        <div class="flex-1 p-2">
          <div x-on:click="step = 1" :class="{'bg-gradient-purple-left': step == 1, 'bg-neutral-100 hover:bg-gradient-purple-left': step != 1}" class="h-1 bg-gradient-purple-left hover:bg-gradient-purple-left rounded-full cursor-pointer"></div>
        </div>
        <div class="flex-1 p-2">
          <div x-on:click="step = 2" :class="{'bg-gradient-purple-left': step == 2, 'bg-neutral-100 hover:bg-gradient-purple-left': step != 2}" class="h-1 bg-neutral-100 hover:bg-gradient-purple-left rounded-full cursor-pointer"></div>
        </div>
        <div class="flex-1 p-2">
          <div x-on:click="step = 3" :class="{'bg-gradient-purple-left': step == 3, 'bg-neutral-100 hover:bg-gradient-purple-left': step != 3}" class="h-1 bg-neutral-100 hover:bg-gradient-purple-left rounded-full cursor-pointer"></div>
        </div>
        <div class="flex-1 p-2">
          <div x-on:click="step = 4" :class="{'bg-gradient-purple-left': step == 4, 'bg-neutral-100 hover:bg-gradient-purple-left': step != 4}" class="h-1 bg-neutral-100 hover:bg-gradient-purple-left rounded-full cursor-pointer"></div>
        </div>
      </div>
      <p :class="{'hidden': step != 1}" class="font-semibold text-center">1. Create A Project</p>
      <p :class="{'hidden': step != 2}" class="hidden font-semibold text-center">2. Customize Your Workspace</p>
      <p :class="{'hidden': step != 3}" class="hidden font-semibold text-center">3. Configure Project Settings</p>
      <p :class="{'hidden': step != 4}" class="hidden font-semibold text-center">4. Define Project Parameters</p>
    </div>
  </div>
</section>

Tailwind Component #14

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between mb-10 -m-2">
      <div class="w-auto p-2">
        <h2 class="font-heading text-3xl font-semibold">Design new dashboard tools</h2>
      </div>
      <div class="w-auto p-2">
        <a class="flex flex-wrap items-center hover:text-neutral-500" href="#">
          <span class="mr-2.5">Find more trading tools</span>
          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.83333 3.33331L14.5 7.99998M14.5 7.99998L9.83333 12.6666M14.5 7.99998L2.5 7.99998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full sm:w-1/3 p-3">
        <a class="inline-block h-full bg-white border overflow-hidden rounded-xl" href="#">
          <img class="w-full" src="dashy-assets/images/card-media3.png" alt="">
          <div class="p-6">
            <p class="mb-8 text-xl font-medium">Management tool that tracks, gathers, and displays business data</p>
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-neutral-500">Cameron Williamson</p>
              </div>
              <div class="w-auto p-2">
                <img src="dashy-assets/images/card-avatar.png" alt="">
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/3 p-3">
        <a class="inline-block h-full bg-white border overflow-hidden rounded-xl" href="#">
          <img class="w-full" src="dashy-assets/images/card-media.png" alt="">
          <div class="p-6">
            <p class="mb-8 text-xl font-medium">Management tool that tracks, gathers, and displays business data</p>
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-neutral-500">Devon Lane</p>
              </div>
              <div class="w-auto p-2">
                <img src="dashy-assets/images/card-avatar2.png" alt="">
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/3 p-3">
        <a class="inline-block h-full bg-white border overflow-hidden rounded-xl" href="#">
          <img class="w-full" src="dashy-assets/images/card-media2.png" alt="">
          <div class="p-6">
            <p class="mb-8 text-xl font-medium">Management tool that tracks, gathers, and displays business data</p>
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-neutral-500">Cody Fisher</p>
              </div>
              <div class="w-auto p-2">
                <img src="dashy-assets/images/card-avatar.png" alt="">
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #15

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">Username</h3>
          <p class="text-sm text-neutral-500">Enter your website url</p>
        </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:w-auto">
                <div class="py-2 px-3.5 bg-light">
                  <span class="text-sm font-medium">dashy.com/</span>
                </div>
              </div>
              <div class="w-full sm:flex-1">
                <input class="py-3 px-3.5 text-sm w-full h-full outline-none hover:bg-gray-50 placeholder-neutral-400" id="inputsInput1-1" type="text" placeholder="username">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #16

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">
        <h3 class="font-heading pb-8 text-lg text-neutral-600 font-semibold">Sessions Overview</h3>
        <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 uppercase" href="#">Id</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="#">Email</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="#">Name</a></div>
                </th>
                <th class="p-0 border-b border-neutral-100">
                  <div class="pb-3.5">
                    <a class="inline-flex items-center text-sm text-gray-400 font-medium" href="#">
                      <span class="mr-2.5">Last Session</span>
                      <svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.13666 2.71969C0.843769 3.01258 0.843769 3.48746 1.13666 3.78035C1.42956 4.07324 1.90443 4.07324 2.19732 3.78035L1.13666 2.71969ZM4.00033 0.916687L4.53066 0.386357C4.39 0.245705 4.19924 0.166687 4.00033 0.166687C3.80141 0.166687 3.61065 0.245705 3.47 0.386357L4.00033 0.916687ZM5.80333 3.78035C6.09622 4.07324 6.5711 4.07324 6.86399 3.78035C7.15688 3.48746 7.15688 3.01258 6.86399 2.71969L5.80333 3.78035ZM6.86399 7.28035C7.15688 6.98746 7.15688 6.51258 6.86399 6.21969C6.5711 5.9268 6.09622 5.9268 5.80333 6.21969L6.86399 7.28035ZM4.00033 9.08335L3.47 9.61368C3.76289 9.90658 4.23776 9.90658 4.53066 9.61368L4.00033 9.08335ZM2.19732 6.21969C1.90443 5.9268 1.42956 5.9268 1.13666 6.21969C0.843769 6.51258 0.843769 6.98746 1.13666 7.28035L2.19732 6.21969ZM2.19732 3.78035L4.53066 1.44702L3.47 0.386357L1.13666 2.71969L2.19732 3.78035ZM3.47 1.44702L5.80333 3.78035L6.86399 2.71969L4.53066 0.386357L3.47 1.44702ZM5.80333 6.21969L3.47 8.55302L4.53066 9.61368L6.86399 7.28035L5.80333 6.21969ZM4.53066 8.55302L2.19732 6.21969L1.13666 7.28035L3.47 9.61368L4.53066 8.55302Z" fill="#7F8995"></path>
                      </svg>
                    </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="#">Tickets</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="#">Resolved</a></div>
                </th>
                <th class="p-0 border-b border-neutral-100">
                  <div class="pb-3.5"></div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">3849</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">lushe@att.net</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm font-semibold">Floyd Miles</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">15 May 2022 8:30 am</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">4/5</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap">
                    <img class="mr-2" src="dashy-assets/images/progress.svg" alt="">
                    <span class="text-sm">1/2</span>
                  </div>
                </td>
                <td class="py-3 border-b border-neutral-100">
                  <a href="#">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="10" cy="10" r="9.25" fill="white" stroke="#B8C1CC" stroke-width="1.5"></circle>
                      <path d="M13.5 8.5L10 12L6.5 8.5" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">3849</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">jaesenj@mac.com</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm font-semibold">Marvin McKinney</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">15 May 2022 8:30 am</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">4/5</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap">
                    <img class="mr-2" src="dashy-assets/images/progress.svg" alt="">
                    <span class="text-sm">1/2</span>
                  </div>
                </td>
                <td class="py-3 border-b border-neutral-100">
                  <a href="#">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="10" cy="10" r="9.25" fill="white" stroke="#B8C1CC" stroke-width="1.5"></circle>
                      <path d="M13.5 8.5L10 12L6.5 8.5" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">3849</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">mhoffman@live.com</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm font-semibold">Jerome Bell</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">15 May 2022 8:30 am</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">4/5</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap">
                    <img class="mr-2" src="dashy-assets/images/progress.svg" alt="">
                    <span class="text-sm">1/2</span>
                  </div>
                </td>
                <td class="py-3 border-b border-neutral-100">
                  <a href="#">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="10" cy="10" r="9.25" fill="white" stroke="#B8C1CC" stroke-width="1.5"></circle>
                      <path d="M13.5 8.5L10 12L6.5 8.5" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">3849</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">sammiwierd@att.net</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm font-semibold">Courtney Henry</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">15 May 2022 8:30 am</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <span class="text-sm">4/5</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap">
                    <img class="mr-2" src="dashy-assets/images/progress.svg" alt="">
                    <span class="text-sm">1/2</span>
                  </div>
                </td>
                <td class="py-3 border-b border-neutral-100">
                  <a href="#">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="10" cy="10" r="9.25" fill="white" stroke="#B8C1CC" stroke-width="1.5"></circle>
                      <path d="M13.5 8.5L10 12L6.5 8.5" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </td>
              </tr>
              <tr>
                <td class="py-3 pr-4">
                  <span class="text-sm">3849</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="text-sm">carybitca@yahoo.ca</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="text-sm font-semibold">Savannah Nguyen</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="text-sm">15 May 2022 8:30 am</span>
                </td>
                <td class="py-3 pr-4">
                  <span class="text-sm">4/5</span>
                </td>
                <td class="py-3 pr-4 border-b border-neutral-100">
                  <div class="flex flex-wrap">
                    <img class="mr-2" src="dashy-assets/images/progress.svg" alt="">
                    <span class="text-sm">1/2</span>
                  </div>
                </td>
                <td class="py-3">
                  <a href="#">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="10" cy="10" r="9.25" fill="white" stroke="#B8C1CC" stroke-width="1.5"></circle>
                      <path d="M13.5 8.5L10 12L6.5 8.5" stroke="#B8C1CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #17

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-11 -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Analytics</h3>
        </div>
        <div class="w-auto p-2">
          <svg class="text-neutral-300" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.75 8C3.19772 8 2.75 8.44772 2.75 9C2.75 9.55228 3.19772 10 3.75 10V8ZM3.7575 10C4.30978 10 4.7575 9.55228 4.7575 9C4.7575 8.44772 4.30978 8 3.7575 8V10ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10V8ZM9.0075 10C9.55978 10 10.0075 9.55228 10.0075 9C10.0075 8.44772 9.55978 8 9.0075 8V10ZM14.25 8C13.6977 8 13.25 8.44772 13.25 9C13.25 9.55228 13.6977 10 14.25 10V8ZM14.2575 10C14.8098 10 15.2575 9.55228 15.2575 9C15.2575 8.44772 14.8098 8 14.2575 8V10ZM3.5 9C3.5 8.86193 3.61193 8.75 3.75 8.75V10.75C4.7165 10.75 5.5 9.9665 5.5 9H3.5ZM3.75 8.75C3.88807 8.75 4 8.86193 4 9H2C2 9.9665 2.7835 10.75 3.75 10.75V8.75ZM4 9C4 9.13807 3.88807 9.25 3.75 9.25V7.25C2.7835 7.25 2 8.0335 2 9H4ZM3.75 9.25C3.61193 9.25 3.5 9.13807 3.5 9H5.5C5.5 8.0335 4.7165 7.25 3.75 7.25V9.25ZM8.75 9C8.75 8.86193 8.86193 8.75 9 8.75V10.75C9.9665 10.75 10.75 9.9665 10.75 9H8.75ZM9 8.75C9.13807 8.75 9.25 8.86193 9.25 9H7.25C7.25 9.9665 8.0335 10.75 9 10.75V8.75ZM9.25 9C9.25 9.13807 9.13807 9.25 9 9.25V7.25C8.0335 7.25 7.25 8.0335 7.25 9H9.25ZM9 9.25C8.86193 9.25 8.75 9.13807 8.75 9H10.75C10.75 8.0335 9.9665 7.25 9 7.25V9.25ZM14 9C14 8.86193 14.1119 8.75 14.25 8.75V10.75C15.2165 10.75 16 9.9665 16 9H14ZM14.25 8.75C14.3881 8.75 14.5 8.86193 14.5 9H12.5C12.5 9.9665 13.2835 10.75 14.25 10.75V8.75ZM14.5 9C14.5 9.13807 14.3881 9.25 14.25 9.25V7.25C13.2835 7.25 12.5 8.0335 12.5 9H14.5ZM14.25 9.25C14.1119 9.25 14 9.13807 14 9H16C16 8.0335 15.2165 7.25 14.25 7.25V9.25ZM3.75 10H3.7575V8H3.75V10ZM9 10H9.0075V8H9V10ZM14.25 10H14.2575V8H14.25V10Z" fill="currentColor"></path>
          </svg>
        </div>
      </div>
      <div class="chart mb-10" data-type="donut"></div>
      <div class="flex flex-wrap justify-center -m-5">
        <div class="w-auto p-5">
          <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">Sale</span>
          </div>
        </div>
        <div class="w-auto p-5">
          <div class="inline-flex items-center">
            <div class="mr-3 w-3 h-3 bg-neutral-600 rounded-full"></div>
            <span class="font-medium">Expenses</span>
          </div>
        </div>
        <div class="w-auto p-5">
          <div class="inline-flex items-center">
            <div class="mr-3 w-3 h-3 bg-neutral-200 rounded-full"></div>
            <span class="font-medium">Revenue</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #18

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" x-data="{ tab: 1 }">
  <div class="container px-4 mx-auto">
    <ul class="inline-flex flex-wrap items-center -m-4">
      <li class="p-4">
        <a x-on:click.prevent="tab = 1" class="group flex items-center text-sm text-neutral-600 font-medium" :class="{'text-neutral-600': tab == 1, 'text-neutral-400 hover:text-neutral-600': tab != 1}" href="#">
          <svg class="mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.75 15.75H3C3 16.1642 3.33579 16.5 3.75 16.5V15.75ZM14.25 15.75V16.5C14.6642 16.5 15 16.1642 15 15.75H14.25ZM11.25 5.25C11.25 6.49264 10.2426 7.5 9 7.5V9C11.0711 9 12.75 7.32107 12.75 5.25H11.25ZM9 7.5C7.75736 7.5 6.75 6.49264 6.75 5.25H5.25C5.25 7.32107 6.92893 9 9 9V7.5ZM6.75 5.25C6.75 4.00736 7.75736 3 9 3V1.5C6.92893 1.5 5.25 3.17893 5.25 5.25H6.75ZM9 3C10.2426 3 11.25 4.00736 11.25 5.25H12.75C12.75 3.17893 11.0711 1.5 9 1.5V3ZM4.5 15.75C4.5 13.2647 6.51472 11.25 9 11.25V9.75C5.68629 9.75 3 12.4363 3 15.75H4.5ZM9 11.25C11.4853 11.25 13.5 13.2647 13.5 15.75H15C15 12.4363 12.3137 9.75 9 9.75V11.25ZM3.75 16.5H14.25V15H3.75V16.5Z" fill="currentColor"></path>
          </svg>
          <span x-ref="tab1">My Account</span>
        </a>
      </li>
      <li class="p-4">
        <a x-on:click.prevent="tab = 2" class="group flex items-center text-sm text-neutral-400 hover:text-neutral-600 font-medium" :class="{'text-neutral-600': tab == 2, 'hover:text-neutral-600': tab != 2}" href="#">
          <svg class="mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6H12.75ZM11.25 12C11.25 12.4142 11.5858 12.75 12 12.75C12.4142 12.75 12.75 12.4142 12.75 12H11.25ZM9.75 8.25C9.75 7.83579 9.41421 7.5 9 7.5C8.58579 7.5 8.25 7.83579 8.25 8.25H9.75ZM8.25 12C8.25 12.4142 8.58579 12.75 9 12.75C9.41421 12.75 9.75 12.4142 9.75 12H8.25ZM6.75 10.5C6.75 10.0858 6.41421 9.75 6 9.75C5.58579 9.75 5.25 10.0858 5.25 10.5H6.75ZM5.25 12C5.25 12.4142 5.58579 12.75 6 12.75C6.41421 12.75 6.75 12.4142 6.75 12H5.25ZM4.5 3.75H13.5V2.25H4.5V3.75ZM14.25 4.5V13.5H15.75V4.5H14.25ZM13.5 14.25H4.5V15.75H13.5V14.25ZM3.75 13.5V4.5H2.25V13.5H3.75ZM4.5 14.25C4.08579 14.25 3.75 13.9142 3.75 13.5H2.25C2.25 14.7426 3.25736 15.75 4.5 15.75V14.25ZM14.25 13.5C14.25 13.9142 13.9142 14.25 13.5 14.25V15.75C14.7426 15.75 15.75 14.7426 15.75 13.5H14.25ZM13.5 3.75C13.9142 3.75 14.25 4.08579 14.25 4.5H15.75C15.75 3.25736 14.7426 2.25 13.5 2.25V3.75ZM4.5 2.25C3.25736 2.25 2.25 3.25736 2.25 4.5H3.75C3.75 4.08579 4.08579 3.75 4.5 3.75V2.25ZM11.25 6V12H12.75V6H11.25ZM8.25 8.25V12H9.75V8.25H8.25ZM5.25 10.5V12H6.75V10.5H5.25Z" fill="currentColor"></path>
          </svg>
          <span x-ref="tab2">Licenses</span>
        </a>
      </li>
      <li class="p-4">
        <a x-on:click.prevent="tab = 3" class="group flex items-center text-sm text-neutral-400 hover:text-neutral-600 font-medium" :class="{'text-neutral-600': tab == 3, 'hover:text-neutral-600': tab != 3}" href="#">
          <svg class="mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.75 6H14.25M3.75 6C2.92157 6 2.25 5.32843 2.25 4.5C2.25 3.67157 2.92157 3 3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5C15.75 5.32843 15.0784 6 14.25 6M3.75 6L3.75 13.5C3.75 14.3284 4.42157 15 5.25 15H12.75C13.5784 15 14.25 14.3284 14.25 13.5V6M7.5 9H10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span x-ref="tab3">Products</span>
        </a>
      </li>
      <li class="p-4">
        <a x-on:click.prevent="tab = 4" class="group flex items-center text-sm text-neutral-400 hover:text-neutral-600 font-medium" :class="{'text-neutral-600': tab == 4, 'hover:text-neutral-600': tab != 4}" href="#">
          <svg class="mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.25 6.75C1.83579 6.75 1.5 7.08579 1.5 7.5C1.5 7.91421 1.83579 8.25 2.25 8.25V6.75ZM15.75 8.25C16.1642 8.25 16.5 7.91421 16.5 7.5C16.5 7.08579 16.1642 6.75 15.75 6.75V8.25ZM5.25 10.5C4.83579 10.5 4.5 10.8358 4.5 11.25C4.5 11.6642 4.83579 12 5.25 12V10.5ZM6 12C6.41421 12 6.75 11.6642 6.75 11.25C6.75 10.8358 6.41421 10.5 6 10.5V12ZM9 10.5C8.58579 10.5 8.25 10.8358 8.25 11.25C8.25 11.6642 8.58579 12 9 12V10.5ZM9.75 12C10.1642 12 10.5 11.6642 10.5 11.25C10.5 10.8358 10.1642 10.5 9.75 10.5V12ZM4.5 4.5H13.5V3H4.5V4.5ZM15 6V12H16.5V6H15ZM13.5 13.5H4.5V15H13.5V13.5ZM3 12V6H1.5V12H3ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12H1.5C1.5 13.6569 2.84315 15 4.5 15V13.5ZM15 12C15 12.8284 14.3284 13.5 13.5 13.5V15C15.1569 15 16.5 13.6569 16.5 12H15ZM13.5 4.5C14.3284 4.5 15 5.17157 15 6H16.5C16.5 4.34315 15.1569 3 13.5 3V4.5ZM4.5 3C2.84315 3 1.5 4.34315 1.5 6H3C3 5.17157 3.67157 4.5 4.5 4.5V3ZM2.25 8.25H15.75V6.75H2.25V8.25ZM5.25 12H6V10.5H5.25V12ZM9 12H9.75V10.5H9V12Z" fill="currentColor"></path>
          </svg>
          <span x-ref="tab4">Transactions</span>
        </a>
      </li>
    </ul>
  </div>
</section>

Tailwind Component #19

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 Company</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-white border-l border-r border-b rounded-b-lg">
          <div class="flex flex-wrap px-5 pt-5 pb-2 -m-3">
            <div class="w-full p-3">
              <a class="block" href="#">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2">
                    <img src="dashy-assets/images/company.svg" alt="">
                  </div>
                  <div class="w-auto p-2">
                    <h3 class="font-heading mb-0.5 text-sm font-medium">Labdrill</h3>
                    <span class="text-sm text-neutral-500">11-50 Members</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="w-full p-3">
              <a class="block" href="#">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2">
                    <img src="dashy-assets/images/company3.svg" alt="">
                  </div>
                  <div class="w-auto p-2">
                    <h3 class="font-heading mb-0.5 text-sm font-medium">Bioplex</h3>
                    <span class="text-sm text-neutral-500">1-10 Members</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="w-full p-3">
              <a class="block" href="#">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2">
                    <img src="dashy-assets/images/company2.svg" alt="">
                  </div>
                  <div class="w-auto p-2">
                    <h3 class="font-heading mb-0.5 text-sm font-medium">Y-corporation</h3>
                    <span class="text-sm text-neutral-500">50-100 Members</span>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

Tailwind Component #20

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-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="flex-1 py-6 overflow-x-hidden 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-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 }">
            <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 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">
            <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>
    </div>
  </div>
  <div class="mx-auto xl:ml-xss xl:pl-4"></div>
</section>

Dashy UI Components by Shuffle

Choose from 124 of ready-made UI components available in Shuffle Editor.

By subscribing to the editor, you get access to all of them.

The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.

Try for Free →

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

Shuffle Components in Dashy library

Framework

UI Library

Components

Tailwind Component #1

Your next website starts here

Tailwind Component #2

Tailwind Component #3

Tailwind Component #4

Tailwind Component #5

Tailwind Component #6

Tailwind Component #7

Tailwind Component #8

Tailwind Component #9

Tailwind Component #10

Tailwind Component #11

Tailwind Component #12

Tailwind Component #13

Tailwind Component #14

Tailwind Component #15

Tailwind Component #16

Tailwind Component #17

Tailwind Component #18

Tailwind Component #19

Tailwind Component #20

Dashy UI Components by Shuffle

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