Tailwind Components in Dashy library

Tailwind Component #81

<section class="py-4 overflow-hidden" :class="{'hidden': !open }" x-data="{ open: true }">
  <div class="container px-4 mx-auto">
    <div class="bg-white overflow-hidden border rounded-xl">
      <div class="pb-8 px-7 pt-6">
        <div class="flex flex-wrap items-center justify-between mb-1 -m-2">
          <div class="w-auto p-2">
            <h3 class="text-xl font-semibold">Get more on Dashy</h3>
          </div>
          <div class="w-auto p-2">
            <button x-on:click="open = false" class="inline-flex text-neutral-300 hover:text-neutral-400">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L5.29289 17.2929ZM18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L18.7071 6.70711ZM6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L6.70711 5.29289ZM17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L17.2929 18.7071ZM6.70711 18.7071L18.7071 6.70711L17.2929 5.29289L5.29289 17.2929L6.70711 18.7071ZM5.29289 6.70711L17.2929 18.7071L18.7071 17.2929L6.70711 5.29289L5.29289 6.70711Z" fill="currentColor"></path>
              </svg>
            </button>
          </div>
        </div>
        <p class="mb-7 text-neutral-500">Easily and securely maintain your account in multiple currencies. First trade of up to $35 coins is completely free.</p>
        <ul class="mb-7">
          <li class="flex items-center mb-3.5">
            <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="10" cy="10" r="10" fill="#564AF7"></circle>
              <path d="M5.91602 10.5833L8.24935 12.9166L14.0827 7.08325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="font-medium">Live Chat</span>
          </li>
          <li class="flex items-center mb-3.5">
            <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="10" cy="10" r="10" fill="#564AF7"></circle>
              <path d="M5.91602 10.5833L8.24935 12.9166L14.0827 7.08325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="font-medium">Auto Booking Updates</span>
          </li>
          <li class="flex items-center">
            <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="10" cy="10" r="10" fill="#564AF7"></circle>
              <path d="M5.91602 10.5833L8.24935 12.9166L14.0827 7.08325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="font-medium">100+ Pro Integrations</span>
          </li>
        </ul>
        <a class="inline-flex flex-wrap items-center px-12 py-3 font-medium 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>

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

Tailwind CSS

Dashy

<section class="relative" x-data="{ mobileNavOpen: false, nav: 1 }">
  <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 w-16 bg-white">
      <div class="flex justify-center py-4 bg-white">
        <img src="dashy-assets/logos/dashy-circle-logo.svg" alt="">
      </div>
      <div class="flex-1 flex flex-col justify-between pt-8 overflow-x-hidden overflow-y-auto">
        <div class="flex flex-wrap -m-4 pb-8">
          <div class="w-full p-4">
            <a x-on:click.prevent="nav = 1" class="relative flex justify-center" href="#">
              <div :class="{'hidden': nav != 1}" class="absolute left-0 -top-2 h-10 w-0.5 bg-gradient-purple-top rounded-full"></div>
              <img src="dashy-assets/images/adjustments.svg" alt="">
            </a>
          </div>
          <div class="w-full p-4">
            <a x-on:click.prevent="nav = 2" class="relative flex justify-center" href="#">
              <div :class="{'hidden': nav != 2}" class="hidden absolute left-0 -top-2 h-10 w-0.5 bg-gradient-purple-top rounded-full"></div>
              <img src="dashy-assets/images/duplicate.svg" alt="">
            </a>
          </div>
          <div class="w-full p-4">
            <a x-on:click.prevent="nav = 3" class="relative flex justify-center" href="#">
              <div :class="{'hidden': nav != 3}" class="hidden absolute left-0 -top-2 h-10 w-0.5 bg-gradient-purple-top rounded-full"></div>
              <img src="dashy-assets/images/check.svg" alt="">
            </a>
          </div>
          <div class="w-full p-4">
            <a x-on:click.prevent="nav = 4" class="relative flex justify-center" href="#">
              <div :class="{'hidden': nav != 4}" class="hidden absolute left-0 -top-2 h-10 w-0.5 bg-gradient-purple-top rounded-full"></div>
              <img src="dashy-assets/images/inbox.svg" alt="">
            </a>
          </div>
          <div class="w-full p-4">
            <a x-on:click.prevent="nav = 5" class="relative flex justify-center" href="#">
              <div :class="{'hidden': nav != 5}" class="hidden absolute left-0 -top-2 h-10 w-0.5 bg-gradient-purple-top rounded-full"></div>
              <img src="dashy-assets/images/paper-airplane.svg" alt="">
            </a>
          </div>
          <div class="w-full p-4">
            <a x-on:click.prevent="nav = 6" class="relative flex justify-center" href="#">
              <div :class="{'hidden': nav != 6}" class="hidden absolute left-0 -top-2 h-10 w-0.5 bg-gradient-purple-top rounded-full"></div>
              <img src="dashy-assets/images/academic-cap.svg" alt="">
            </a>
          </div>
        </div>
        <div class="flex flex-wrap">
          <div class="w-full p-4">
            <a class="flex justify-center" href="#">
              <img src="dashy-assets/images/question-mark-circle.svg" alt="">
            </a>
          </div>
          <div class="w-full p-4">
            <a class="flex justify-center" href="#">
              <img src="dashy-assets/images/cog.svg" alt="">
            </a>
          </div>
          <div class="w-full p-4">
            <a class="flex justify-center" href="#">
              <img src="dashy-assets/images/avatar2.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mx-auto xl:ml-16 xl:pl-4"></div>
</section>

Tailwind Component #83

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-4 pb-7 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">Daily Visit Insights</h3>
        </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 mb-4" data-type="column-graph5"></div>
      <div class="flex flex-wrap -m-3">
        <div class="w-auto p-3">
          <div class="flex flex-wrap items-center -m-1">
            <div class="w-auto p-1">
              <div class="w-3 h-3 bg-neutral-100 rounded-full"></div>
            </div>
            <div class="w-auto p-1">
              <p class="text-sm font-medium">Mobile Browser</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-3">
          <div class="flex flex-wrap items-center -m-1">
            <div class="w-auto p-1">
              <div class="w-3 h-3 bg-gradient-purple-left rounded-full"></div>
            </div>
            <div class="w-auto p-1">
              <p class="text-sm font-medium">Desktop</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #84

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">Note</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2"><textarea class="block px-3.5 pb-3.5 pt-2.5 text-sm w-full sm:max-w-md ml-auto placeholder-neutral-400 hover:bg-gray-50 outline-none border border-neutral-200 focus:border-neutral-600 rounded-lg" id="inputsTextarea5-1" rows="4" placeholder="Write a short note"></textarea></div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #85

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" x-data="{ step: 1 }">
  <div class="container px-4 mx-auto">
    <div class="pt-5 px-6 pb-6 bg-white border rounded-xl">
      <h3 class="font-heading mb-12 text-lg font-semibold">Customizing your setup experience</h3>
      <div class="flex flex-wrap -m-2">
        <div class="flex-1 p-2 group cursor-pointer" x-on:click="step = 1">
          <div class="mb-3 h-1 bg-gradient-purple-left" :class="{'bg-gradient-purple-left': step == 1, 'bg-neutral-100 group-hover:bg-gradient-purple-left': step != 1}"></div>
          <p class="font-medium group-hover:text-neutral-900" :class="{'text-neutral-400': step != 1}">1. Payroll timeline</p>
        </div>
        <div class="flex-1 p-2 group cursor-pointer" x-on:click="step = 2">
          <div class="mb-3 h-1 bg-neutral-100 group-hover:bg-gradient-purple-left" :class="{'bg-gradient-purple-left': step == 2}"></div>
          <p class="font-medium text-neutral-400 group-hover:text-neutral-900" :class="{'text-neutral-400': step != 2}">2. Team makeup</p>
        </div>
        <div class="flex-1 p-2 group cursor-pointer" x-on:click="step = 3">
          <div class="mb-3 h-1 bg-neutral-100 group-hover:bg-gradient-purple-left" :class="{'bg-gradient-purple-left': step == 3}"></div>
          <p class="font-medium text-neutral-400 group-hover:text-neutral-900" :class="{'text-neutral-400': step != 3}">3. Entry and industry</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #86

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" x-data="{ category: 'this-week' }">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-5 pb-3 bg-white border rounded-xl">
      <h3 class="font-heading mb-7 text-lg font-semibold">Expenses Statistics</h3>
      <div class="flex flex-wrap -mx-4 mb-8 -m-2">
        <div class="w-auto p-2"><a class="px-3 py-2 text-sm font-medium rounded-full" :class="category=='day' ? 'bg-light' : 'bg-transparent text-neutral-400'" x-on:click.prevent="category='day'" href="#">Day</a></div>
        <div class="w-auto p-2"><a class="px-3 py-2 text-sm font-medium rounded-full" :class="category=='week' ? 'bg-light' : 'bg-transparent text-neutral-400'" x-on:click.prevent="category='week'" href="#">Week</a></div>
        <div class="w-auto p-2"><a class="px-3 py-2 text-sm font-medium rounded-full" :class="category=='this-week' ? 'bg-light' : 'bg-transparent text-neutral-400'" x-on:click.prevent="category='this-week'" href="#">This week</a></div>
      </div>
      <div class="chart" data-type="area-graph6"></div>
    </div>
  </div>
</section>

Tailwind Component #87

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">Job Role</h3>
          <p class="text-sm text-neutral-400">What do you do or operate</p>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="relative h-full sm:max-w-md ml-auto">
            <svg class="absolute top-1/2 left-3.5 transform -translate-y-1/2" width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.33398 17H2.58398C2.58398 17.4142 2.91977 17.75 3.33398 17.75V17ZM12.6673 17V17.75C13.0815 17.75 13.4173 17.4142 13.4173 17H12.6673ZM9.91732 7.66667C9.91732 8.72521 9.0592 9.58333 8.00065 9.58333V11.0833C9.88762 11.0833 11.4173 9.55364 11.4173 7.66667H9.91732ZM8.00065 9.58333C6.94211 9.58333 6.08398 8.72521 6.08398 7.66667H4.58398C4.58398 9.55364 6.11368 11.0833 8.00065 11.0833V9.58333ZM6.08398 7.66667C6.08398 6.60812 6.94211 5.75 8.00065 5.75V4.25C6.11368 4.25 4.58398 5.77969 4.58398 7.66667H6.08398ZM8.00065 5.75C9.0592 5.75 9.91732 6.60812 9.91732 7.66667H11.4173C11.4173 5.77969 9.88762 4.25 8.00065 4.25V5.75ZM4.08398 17C4.08398 14.8369 5.83754 13.0833 8.00065 13.0833V11.5833C5.00911 11.5833 2.58398 14.0085 2.58398 17H4.08398ZM8.00065 13.0833C10.1638 13.0833 11.9173 14.8369 11.9173 17H13.4173C13.4173 14.0085 10.9922 11.5833 8.00065 11.5833V13.0833ZM3.33398 17.75H12.6673V16.25H3.33398V17.75Z" fill="#B8C1CC"></path>
            </svg>
            <select class="appearance-none py-2 pl-10 pr-10 text-sm w-full h-full bg-white hover:bg-gray-50 outline-none border border-neutral-200 focus:border-neutral-600 cursor-pointer rounded-lg" id="inputsSelect6-1">
              <option value="role">Select your role</option>
              <option value="role2">Select your role</option>
              <option value="role3">Select your role</option>
              <option value="role4">Select your role</option>
            </select>
            <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.6673 9L8.00065 13.6667L3.33398 9" stroke="#0C1523" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #88

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="py-5 px-6 bg-white border rounded-xl">
      <h3 class="font-heading mb-5 text-lg font-semibold">Dashy setup</h3>
      <div class="mb-2 bg-neutral-100">
        <div class="w-1/12 h-1.5 bg-gradient-purple-left rounded-full"></div>
      </div>
      <p class="mb-8 font-medium">8% complete</p>
      <a class="inline-flex flex-wrap items-center justify-center mb-3 px-3.5 py-2.5 text-sm text-neutral-50 hover:text-neutral-100 font-medium text-center bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">Continue to Step 2</a>
      <p class="text-sm">
        <span class="text-neutral-500">Question?</span>
        <a class="hover:text-neutral-500" href="#">Chat with us</a>
      </p>
    </div>
  </div>
</section>

Tailwind Component #89

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pb-12 pt-8 px-6 text-center bg-white overflow-hidden border rounded-xl">
      <h3 class="mb-1 text-xl font-semibold">Time to connect your calenders</h3>
      <p class="mb-11 text-neutral-500">Unlock needs to sync your events to manage your availability</p>
      <div class="flex flex-wrap justify-center max-w-xs mx-auto -m-2">
        <div class="w-full p-2">
          <a class="inline-flex items-center p-4 w-full bg-neutral-600 hover:bg-opacity-95 focus:ring-4 focus:ring-neutral-400 rounded-lg" href="#">
            <img class="mr-6" src="dashy-assets/images/google.svg" alt="">
            <p class="text-white font-medium">Connect Google Calendar</p>
          </a>
        </div>
        <div class="w-full p-2">
          <a class="inline-flex items-center p-4 w-full bg-neutral-600 hover:bg-opacity-95 focus:ring-4 focus:ring-neutral-400 rounded-lg" href="#">
            <img class="mr-6" src="dashy-assets/images/microsoft.svg" alt="">
            <p class="text-white font-medium">Connect Microsoft Calendar</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #90

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 lg:w-1/5 p-3">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <p class="mb-2.5 text-sm text-neutral-500 font-medium">Total Tasks</p>
          <div class="flex flex-wrap items-center mb-2 -m-1">
            <div class="w-auto p-1">
              <h3 class="font-heading text-3xl font-semibold">5,943</h3>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap items-center py-px px-1 border border-green-500 rounded-full">
                <svg class="mr-0.5" width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.16667 0.916748C7.75245 0.916748 7.41667 1.25253 7.41667 1.66675C7.41667 2.08096 7.75245 2.41675 8.16667 2.41675V0.916748ZM13.5 1.66675H14.25C14.25 1.25253 13.9142 0.916748 13.5 0.916748V1.66675ZM12.75 7.00008C12.75 7.41429 13.0858 7.75008 13.5 7.75008C13.9142 7.75008 14.25 7.41429 14.25 7.00008H12.75ZM0.96967 7.80308C0.676777 8.09598 0.676777 8.57085 0.96967 8.86374C1.26256 9.15664 1.73744 9.15664 2.03033 8.86374L0.96967 7.80308ZM5.5 4.33341L6.03033 3.80308C5.73744 3.51019 5.26256 3.51019 4.96967 3.80308L5.5 4.33341ZM8.16667 7.00008L7.63634 7.53041C7.92923 7.8233 8.4041 7.8233 8.697 7.53041L8.16667 7.00008ZM8.16667 2.41675H13.5V0.916748H8.16667V2.41675ZM12.75 1.66675V7.00008H14.25V1.66675H12.75ZM2.03033 8.86374L6.03033 4.86374L4.96967 3.80308L0.96967 7.80308L2.03033 8.86374ZM4.96967 4.86374L7.63634 7.53041L8.697 6.46975L6.03033 3.80308L4.96967 4.86374ZM8.697 7.53041L14.0303 2.19708L12.9697 1.13642L7.63634 6.46975L8.697 7.53041Z" fill="#20C43A"></path>
                </svg>
                <span class="text-xs text-green-500 font-medium">16%</span>
              </div>
            </div>
          </div>
          <p class="text-xs text-neutral-400 font-medium">Tasks</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-3">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <p class="mb-2.5 text-sm text-neutral-500 font-medium">Running Tasks</p>
          <div class="flex flex-wrap items-center mb-2 -m-1">
            <div class="w-auto p-1">
              <h3 class="font-heading text-3xl font-semibold">51</h3>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap items-center py-px px-1 border border-green-500 rounded-full">
                <svg class="mr-0.5" width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.16667 0.916748C7.75245 0.916748 7.41667 1.25253 7.41667 1.66675C7.41667 2.08096 7.75245 2.41675 8.16667 2.41675V0.916748ZM13.5 1.66675H14.25C14.25 1.25253 13.9142 0.916748 13.5 0.916748V1.66675ZM12.75 7.00008C12.75 7.41429 13.0858 7.75008 13.5 7.75008C13.9142 7.75008 14.25 7.41429 14.25 7.00008H12.75ZM0.96967 7.80308C0.676777 8.09598 0.676777 8.57085 0.96967 8.86374C1.26256 9.15664 1.73744 9.15664 2.03033 8.86374L0.96967 7.80308ZM5.5 4.33341L6.03033 3.80308C5.73744 3.51019 5.26256 3.51019 4.96967 3.80308L5.5 4.33341ZM8.16667 7.00008L7.63634 7.53041C7.92923 7.8233 8.4041 7.8233 8.697 7.53041L8.16667 7.00008ZM8.16667 2.41675H13.5V0.916748H8.16667V2.41675ZM12.75 1.66675V7.00008H14.25V1.66675H12.75ZM2.03033 8.86374L6.03033 4.86374L4.96967 3.80308L0.96967 7.80308L2.03033 8.86374ZM4.96967 4.86374L7.63634 7.53041L8.697 6.46975L6.03033 3.80308L4.96967 4.86374ZM8.697 7.53041L14.0303 2.19708L12.9697 1.13642L7.63634 6.46975L8.697 7.53041Z" fill="#20C43A"></path>
                </svg>
                <span class="text-xs text-green-500 font-medium">16%</span>
              </div>
            </div>
          </div>
          <p class="text-xs text-neutral-400 font-medium">Tasks</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-3">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <p class="mb-2.5 text-sm text-neutral-500 font-medium">Pending Tasks</p>
          <div class="flex flex-wrap items-center mb-2 -m-1">
            <div class="w-auto p-1">
              <h3 class="font-heading text-3xl font-semibold">3,305</h3>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap items-center py-px px-1 border border-red-500 rounded-full">
                <svg class="mr-0.5" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.66667 7.58341C7.25245 7.58341 6.91667 7.9192 6.91667 8.33341C6.91667 8.74763 7.25245 9.08341 7.66667 9.08341V7.58341ZM13 8.33341V9.08341C13.4142 9.08341 13.75 8.74763 13.75 8.33341H13ZM13.75 3.00008C13.75 2.58587 13.4142 2.25008 13 2.25008C12.5858 2.25008 12.25 2.58587 12.25 3.00008H13.75ZM1.53033 1.13642C1.23744 0.843525 0.762563 0.843525 0.46967 1.13642C0.176777 1.42931 0.176777 1.90418 0.46967 2.19708L1.53033 1.13642ZM5 5.66675L4.46967 6.19708C4.76256 6.48997 5.23744 6.48997 5.53033 6.19708L5 5.66675ZM7.66667 3.00008L8.197 2.46975C7.9041 2.17686 7.42923 2.17686 7.13634 2.46975L7.66667 3.00008ZM7.66667 9.08341H13V7.58341H7.66667V9.08341ZM13.75 8.33341V3.00008H12.25V8.33341H13.75ZM0.46967 2.19708L4.46967 6.19708L5.53033 5.13642L1.53033 1.13642L0.46967 2.19708ZM5.53033 6.19708L8.197 3.53041L7.13634 2.46975L4.46967 5.13642L5.53033 6.19708ZM7.13634 3.53041L12.4697 8.86374L13.5303 7.80308L8.197 2.46975L7.13634 3.53041Z" fill="#FF3131"></path>
                </svg>
                <span class="text-xs text-red-500 font-medium">12%</span>
              </div>
            </div>
          </div>
          <p class="text-xs text-neutral-400 font-medium">Tasks</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-3">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <p class="mb-2.5 text-sm text-neutral-500 font-medium">Confirmed Payments</p>
          <div class="flex flex-wrap items-center mb-2 -m-1">
            <div class="w-auto p-1">
              <h3 class="font-heading text-3xl font-semibold">$194k</h3>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap items-center py-px px-1 border border-green-500 rounded-full">
                <svg class="mr-0.5" width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.16667 0.916748C7.75245 0.916748 7.41667 1.25253 7.41667 1.66675C7.41667 2.08096 7.75245 2.41675 8.16667 2.41675V0.916748ZM13.5 1.66675H14.25C14.25 1.25253 13.9142 0.916748 13.5 0.916748V1.66675ZM12.75 7.00008C12.75 7.41429 13.0858 7.75008 13.5 7.75008C13.9142 7.75008 14.25 7.41429 14.25 7.00008H12.75ZM0.96967 7.80308C0.676777 8.09598 0.676777 8.57085 0.96967 8.86374C1.26256 9.15664 1.73744 9.15664 2.03033 8.86374L0.96967 7.80308ZM5.5 4.33341L6.03033 3.80308C5.73744 3.51019 5.26256 3.51019 4.96967 3.80308L5.5 4.33341ZM8.16667 7.00008L7.63634 7.53041C7.92923 7.8233 8.4041 7.8233 8.697 7.53041L8.16667 7.00008ZM8.16667 2.41675H13.5V0.916748H8.16667V2.41675ZM12.75 1.66675V7.00008H14.25V1.66675H12.75ZM2.03033 8.86374L6.03033 4.86374L4.96967 3.80308L0.96967 7.80308L2.03033 8.86374ZM4.96967 4.86374L7.63634 7.53041L8.697 6.46975L6.03033 3.80308L4.96967 4.86374ZM8.697 7.53041L14.0303 2.19708L12.9697 1.13642L7.63634 6.46975L8.697 7.53041Z" fill="#20C43A"></path>
                </svg>
                <span class="text-xs text-green-500 font-medium">6%</span>
              </div>
            </div>
          </div>
          <p class="text-xs text-neutral-400 font-medium">Payment</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/5 p-3">
        <div class="px-5 py-3 h-full bg-white rounded-lg">
          <p class="mb-2.5 text-sm text-neutral-500 font-medium">Pending Payments</p>
          <div class="flex flex-wrap items-center mb-2 -m-1">
            <div class="w-auto p-1">
              <h3 class="font-heading text-3xl font-semibold">$37k</h3>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap items-center py-px px-1 border border-red-500 rounded-full">
                <svg class="mr-0.5" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.66667 7.58341C7.25245 7.58341 6.91667 7.9192 6.91667 8.33341C6.91667 8.74763 7.25245 9.08341 7.66667 9.08341V7.58341ZM13 8.33341V9.08341C13.4142 9.08341 13.75 8.74763 13.75 8.33341H13ZM13.75 3.00008C13.75 2.58587 13.4142 2.25008 13 2.25008C12.5858 2.25008 12.25 2.58587 12.25 3.00008H13.75ZM1.53033 1.13642C1.23744 0.843525 0.762563 0.843525 0.46967 1.13642C0.176777 1.42931 0.176777 1.90418 0.46967 2.19708L1.53033 1.13642ZM5 5.66675L4.46967 6.19708C4.76256 6.48997 5.23744 6.48997 5.53033 6.19708L5 5.66675ZM7.66667 3.00008L8.197 2.46975C7.9041 2.17686 7.42923 2.17686 7.13634 2.46975L7.66667 3.00008ZM7.66667 9.08341H13V7.58341H7.66667V9.08341ZM13.75 8.33341V3.00008H12.25V8.33341H13.75ZM0.46967 2.19708L4.46967 6.19708L5.53033 5.13642L1.53033 1.13642L0.46967 2.19708ZM5.53033 6.19708L8.197 3.53041L7.13634 2.46975L4.46967 5.13642L5.53033 6.19708ZM7.13634 3.53041L12.4697 8.86374L13.5303 7.80308L8.197 2.46975L7.13634 3.53041Z" fill="#FF3131"></path>
                </svg>
                <span class="text-xs text-red-500 font-medium">5%</span>
              </div>
            </div>
          </div>
          <p class="text-xs text-neutral-400 font-medium">Payment</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #91

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 pb-7">
        <div class="flex flex-wrap justify-between mb-5 -m-2">
          <div class="w-auto p-2">
            <h3 class="font-heading mb-1 text-lg text-neutral-600 font-semibold">Tasks</h3>
            <p class="text-sm text-neutral-400 font-medium">4 to 8 remaining</p>
          </div>
          <div class="w-auto p-2">
            <svg class="relative top-1 text-neutral-300" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.00033 3.33341C9.00033 2.78113 8.55261 2.33341 8.00033 2.33341C7.44804 2.33341 7.00033 2.78113 7.00033 3.33341L9.00033 3.33341ZM7.00033 3.34008C7.00033 3.89237 7.44804 4.34008 8.00033 4.34008C8.55261 4.34008 9.00033 3.89237 9.00033 3.34008L7.00033 3.34008ZM9.00033 8.00008C9.00033 7.4478 8.55261 7.00008 8.00033 7.00008C7.44804 7.00008 7.00033 7.4478 7.00033 8.00008L9.00033 8.00008ZM7.00033 8.00675C7.00033 8.55903 7.44804 9.00675 8.00033 9.00675C8.55261 9.00675 9.00033 8.55903 9.00033 8.00675L7.00033 8.00675ZM9.00033 12.6667C9.00033 12.1145 8.55261 11.6667 8.00033 11.6667C7.44804 11.6667 7.00033 12.1145 7.00033 12.6667L9.00033 12.6667ZM7.00033 12.6734C7.00032 13.2257 7.44804 13.6734 8.00032 13.6734C8.55261 13.6734 9.00032 13.2257 9.00033 12.6734L7.00033 12.6734ZM8.00033 3.00008C8.18442 3.00008 8.33366 3.14932 8.33366 3.33341L6.33366 3.33341C6.33366 4.25389 7.07985 5.00008 8.00033 5.00008L8.00033 3.00008ZM8.33366 3.33341C8.33366 3.51751 8.18442 3.66675 8.00033 3.66675L8.00033 1.66675C7.07985 1.66675 6.33366 2.41294 6.33366 3.33341L8.33366 3.33341ZM8.00033 3.66675C7.81623 3.66675 7.66699 3.51751 7.66699 3.33341L9.66699 3.33341C9.66699 2.41294 8.9208 1.66675 8.00033 1.66675L8.00033 3.66675ZM7.66699 3.33341C7.66699 3.14932 7.81623 3.00008 8.00033 3.00008L8.00033 5.00008C8.9208 5.00008 9.66699 4.25389 9.66699 3.33341L7.66699 3.33341ZM8.00033 7.66675C8.18442 7.66675 8.33366 7.81599 8.33366 8.00008L6.33366 8.00008C6.33366 8.92056 7.07985 9.66675 8.00033 9.66675L8.00033 7.66675ZM8.33366 8.00008C8.33366 8.18418 8.18442 8.33341 8.00033 8.33341L8.00033 6.33341C7.07985 6.33341 6.33366 7.07961 6.33366 8.00008L8.33366 8.00008ZM8.00033 8.33341C7.81623 8.33341 7.66699 8.18418 7.66699 8.00008L9.66699 8.00008C9.66699 7.07961 8.9208 6.33341 8.00033 6.33341L8.00033 8.33341ZM7.66699 8.00008C7.66699 7.81599 7.81623 7.66675 8.00033 7.66675L8.00033 9.66675C8.9208 9.66675 9.66699 8.92056 9.66699 8.00008L7.66699 8.00008ZM8.00033 12.3334C8.18442 12.3334 8.33366 12.4827 8.33366 12.6667L6.33366 12.6667C6.33366 13.5872 7.07985 14.3334 8.00032 14.3334L8.00033 12.3334ZM8.33366 12.6667C8.33366 12.8508 8.18442 13.0001 8.00032 13.0001L8.00033 11.0001C7.07985 11.0001 6.33366 11.7463 6.33366 12.6667L8.33366 12.6667ZM8.00032 13.0001C7.81623 13.0001 7.66699 12.8508 7.66699 12.6667L9.66699 12.6667C9.66699 11.7463 8.9208 11.0001 8.00033 11.0001L8.00032 13.0001ZM7.66699 12.6667C7.66699 12.4827 7.81623 12.3334 8.00033 12.3334L8.00032 14.3334C8.9208 14.3334 9.66699 13.5872 9.66699 12.6667L7.66699 12.6667ZM7.00033 3.33341L7.00033 3.34008L9.00033 3.34008L9.00033 3.33341L7.00033 3.33341ZM7.00033 8.00008L7.00033 8.00675L9.00033 8.00675L9.00033 8.00008L7.00033 8.00008ZM7.00033 12.6667L7.00033 12.6734L9.00033 12.6734L9.00033 12.6667L7.00033 12.6667Z" fill="currentColor"></path>
            </svg>
          </div>
        </div>
        <div class="pb-3.5 w-full overflow-x-auto">
          <table class="w-full min-w-max">
            <tbody>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="tableStackedCheckbox6-1" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="tableStackedCheckbox6-1">Project planning</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="tableStackedCheckbox6-2" checked="" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="tableStackedCheckbox6-2">Company organizing</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="tableStackedCheckbox6-3" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="tableStackedCheckbox6-3">HR management</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="tableStackedCheckbox6-4" checked="" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="tableStackedCheckbox6-4">Proper directing</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="tableStackedCheckbox6-5" checked="" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="tableStackedCheckbox6-5">Coordinating all tools</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2.5">
                  <div class="flex items-center">
                    <input class="opacity-0 absolute h-5 w-5" id="tableStackedCheckbox6-6" type="checkbox">
                    <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <label class="font-medium" for="tableStackedCheckbox6-6">Reporting and budgeting</label>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="flex">
          <input class="flex-1 w-full px-4 py-2.5 text-sm text-neutral-400 placeholder-neutral-400 outline-none border border-r-0 border-neutral-200 rounded-tl-lg rounded-bl-lg focus:border focus:border-gray-600" id="tableStackedInput6-1" type="text" placeholder="Type a task">
          <a class="flex items-center justify-center px-6 py-0.5 text-sm text-white font-semibold bg-neutral-600 rounded-tr-lg rounded-br-lg focus:ring-4 focus:ring-neutral-400" href="#">Add</a>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #92

Tailwind CSS

Dashy

<section class="fixed inset-0 z-50 flex items-center justify-center flex-wrap bg-neutral-500 bg-opacity-80 overflow-y-auto" :class="{'hidden': !open}" x-data="{ open: true, date: '' }" x-init="date = $refs.date1.textContent">
  <div class="ml-auto w-full min-h-full max-w-sm bg-white">
    <div class="p-6 border-b">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-auto p-2">
          <div class="flex flex-wrap -m-2">
            <div class="w-auto p-2">
              <img src="dashy-assets/images/avatar29.png" alt="">
            </div>
            <div class="w-auto p-2">
              <h3 class="font-heading mb-1 font-semibold">Darlene Robertson</h3>
              <p class="text-xs text-neutral-500">Head of Customer Relation</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="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.96967 12.9697C3.67678 13.2626 3.67678 13.7374 3.96967 14.0303C4.26256 14.3232 4.73744 14.3232 5.03033 14.0303L3.96967 12.9697ZM14.0303 5.03033C14.3232 4.73744 14.3232 4.26256 14.0303 3.96967C13.7374 3.67678 13.2626 3.67678 12.9697 3.96967L14.0303 5.03033ZM5.03033 3.96967C4.73744 3.67678 4.26256 3.67678 3.96967 3.96967C3.67678 4.26256 3.67678 4.73744 3.96967 5.03033L5.03033 3.96967ZM12.9697 14.0303C13.2626 14.3232 13.7374 14.3232 14.0303 14.0303C14.3232 13.7374 14.3232 13.2626 14.0303 12.9697L12.9697 14.0303ZM5.03033 14.0303L14.0303 5.03033L12.9697 3.96967L3.96967 12.9697L5.03033 14.0303ZM3.96967 5.03033L12.9697 14.0303L14.0303 12.9697L5.03033 3.96967L3.96967 5.03033Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="p-6 border-b">
      <h3 class="font-heading mb-6 text-lg text-neutral-600 font-semibold">Profile Info</h3>
      <div class="w-full overflow-x-auto">
        <table class="w-full min-w-max">
          <tbody>
            <tr>
              <td class="py-2">
                <div class="flex flex-wrap items-center">
                  <svg class="mr-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.66603 5.37596C2.32138 5.1462 1.85573 5.23933 1.62596 5.58397C1.3962 5.92862 1.48933 6.39427 1.83397 6.62404L2.66603 5.37596ZM8.16795 9.9453L7.75192 10.5693V10.5693L8.16795 9.9453ZM9.83205 9.9453L9.41603 9.32126L9.83205 9.9453ZM16.166 6.62404C16.5107 6.39427 16.6038 5.92862 16.374 5.58397C16.1443 5.23933 15.6786 5.1462 15.334 5.37596L16.166 6.62404ZM3.75 4.5H14.25V3H3.75V4.5ZM15 5.25V12.75H16.5V5.25H15ZM14.25 13.5H3.75V15H14.25V13.5ZM3 12.75V5.25H1.5V12.75H3ZM3.75 13.5C3.33579 13.5 3 13.1642 3 12.75H1.5C1.5 13.9926 2.50736 15 3.75 15V13.5ZM15 12.75C15 13.1642 14.6642 13.5 14.25 13.5V15C15.4926 15 16.5 13.9926 16.5 12.75H15ZM14.25 4.5C14.6642 4.5 15 4.83579 15 5.25H16.5C16.5 4.00736 15.4926 3 14.25 3V4.5ZM3.75 3C2.50736 3 1.5 4.00736 1.5 5.25H3C3 4.83579 3.33579 4.5 3.75 4.5V3ZM1.83397 6.62404L7.75192 10.5693L8.58397 9.32126L2.66603 5.37596L1.83397 6.62404ZM10.2481 10.5693L16.166 6.62404L15.334 5.37596L9.41603 9.32126L10.2481 10.5693ZM7.75192 10.5693C8.5077 11.0732 9.4923 11.0732 10.2481 10.5693L9.41603 9.32126C9.1641 9.48921 8.8359 9.48921 8.58397 9.32126L7.75192 10.5693Z" fill="#7F8995"></path>
                  </svg>
                  <span class="font-medium">darlene@gmail.com</span>
                </div>
              </td>
            </tr>
            <tr>
              <td class="py-2">
                <div class="flex flex-wrap items-center">
                  <svg class="mr-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.66603 5.37596C2.32138 5.1462 1.85573 5.23933 1.62596 5.58397C1.3962 5.92862 1.48933 6.39427 1.83397 6.62404L2.66603 5.37596ZM8.16795 9.9453L7.75192 10.5693V10.5693L8.16795 9.9453ZM9.83205 9.9453L9.41603 9.32126L9.83205 9.9453ZM16.166 6.62404C16.5107 6.39427 16.6038 5.92862 16.374 5.58397C16.1443 5.23933 15.6786 5.1462 15.334 5.37596L16.166 6.62404ZM3.75 4.5H14.25V3H3.75V4.5ZM15 5.25V12.75H16.5V5.25H15ZM14.25 13.5H3.75V15H14.25V13.5ZM3 12.75V5.25H1.5V12.75H3ZM3.75 13.5C3.33579 13.5 3 13.1642 3 12.75H1.5C1.5 13.9926 2.50736 15 3.75 15V13.5ZM15 12.75C15 13.1642 14.6642 13.5 14.25 13.5V15C15.4926 15 16.5 13.9926 16.5 12.75H15ZM14.25 4.5C14.6642 4.5 15 4.83579 15 5.25H16.5C16.5 4.00736 15.4926 3 14.25 3V4.5ZM3.75 3C2.50736 3 1.5 4.00736 1.5 5.25H3C3 4.83579 3.33579 4.5 3.75 4.5V3ZM1.83397 6.62404L7.75192 10.5693L8.58397 9.32126L2.66603 5.37596L1.83397 6.62404ZM10.2481 10.5693L16.166 6.62404L15.334 5.37596L9.41603 9.32126L10.2481 10.5693ZM7.75192 10.5693C8.5077 11.0732 9.4923 11.0732 10.2481 10.5693L9.41603 9.32126C9.1641 9.48921 8.8359 9.48921 8.58397 9.32126L7.75192 10.5693Z" fill="#7F8995"></path>
                  </svg>
                  <span class="font-medium">+1-394-596-3550</span>
                </div>
              </td>
            </tr>
            <tr>
              <td class="py-2">
                <div class="flex flex-wrap">
                  <svg class="mr-3 mt-0.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.75 7.5V2.25L3 10.5H8.25L8.25 15.75L15 7.5L9.75 7.5Z" stroke="#7F8995" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <div class="flex flex-col flex-wrap">
                    <span class="mb-1 text-neutral-500 font-medium">Las Login</span>
                    <span class="text-neutral-600 font-medium">3:07 am, 20 Mar 2022</span>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="py-2">
                <div class="flex flex-wrap">
                  <svg class="mr-3 mt-0.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.75 6C9.75 5.58579 9.41421 5.25 9 5.25C8.58579 5.25 8.25 5.58579 8.25 6H9.75ZM9 9H8.25C8.25 9.19891 8.32902 9.38968 8.46967 9.53033L9 9ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM15 9C15 12.3137 12.3137 15 9 15V16.5C13.1421 16.5 16.5 13.1421 16.5 9H15ZM9 15C5.68629 15 3 12.3137 3 9H1.5C1.5 13.1421 4.85786 16.5 9 16.5V15ZM3 9C3 5.68629 5.68629 3 9 3V1.5C4.85786 1.5 1.5 4.85786 1.5 9H3ZM9 3C12.3137 3 15 5.68629 15 9H16.5C16.5 4.85786 13.1421 1.5 9 1.5V3ZM8.25 6V9H9.75V6H8.25ZM8.46967 9.53033L10.7197 11.7803L11.7803 10.7197L9.53033 8.46967L8.46967 9.53033Z" fill="#7F8995"></path>
                  </svg>
                  <div class="flex flex-col flex-wrap">
                    <span class="mb-1 text-neutral-500 font-medium">Registered At</span>
                    <span class="text-neutral-600 font-medium">10:49 am, 14 Mar 2022</span>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="p-6 border-b">
      <h3 class="font-heading mb-7 text-lg font-semibold">Expenses Statistics</h3>
      <div class="flex flex-wrap -m-2">
        <div class="w-auto p-2"><a x-ref="date1" x-on:click.prevent="date = $refs.date1.textContent" class="px-3 py-2 text-sm font-medium bg-light text-neutral-600 rounded-full" :class="{'text-neutral-600 bg-light': date == $refs.date1.textContent, 'bg-transparent text-neutral-400': date != $refs.date1.textContent }" href="#">Day</a></div>
        <div class="w-auto p-2"><a x-ref="date2" x-on:click.prevent="date = $refs.date2.textContent" class="px-3 py-2 text-sm font-medium bg-transparent text-neutral-400 rounded-full" :class="{'text-neutral-600 bg-light': date == $refs.date2.textContent, 'bg-transparent text-neutral-400': date != $refs.date2.textContent }" href="#">Week</a></div>
        <div class="w-auto p-2"><a x-ref="date3" x-on:click.prevent="date = $refs.date3.textContent" class="px-3 py-2 text-sm font-medium bg-transparent text-neutral-400 rounded-full" :class="{'text-neutral-600 bg-light': date == $refs.date3.textContent, 'bg-transparent text-neutral-400': date != $refs.date3.textContent }" href="#">This week</a></div>
      </div>
      <div class="chart" data-type="area-graph6"></div>
    </div>
    <div class="p-6">
      <div class="flex flex-wrap justify-between mb-5 -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading mb-1 text-lg text-neutral-600 font-semibold">Tasks</h3>
          <p class="text-sm text-neutral-400 font-medium">4 to 8 remaining</p>
        </div>
        <div class="w-auto p-2">
          <svg class="relative top-1 text-neutral-300" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00033 3.33341C9.00033 2.78113 8.55261 2.33341 8.00033 2.33341C7.44804 2.33341 7.00033 2.78113 7.00033 3.33341L9.00033 3.33341ZM7.00033 3.34008C7.00033 3.89237 7.44804 4.34008 8.00033 4.34008C8.55261 4.34008 9.00033 3.89237 9.00033 3.34008L7.00033 3.34008ZM9.00033 8.00008C9.00033 7.4478 8.55261 7.00008 8.00033 7.00008C7.44804 7.00008 7.00033 7.4478 7.00033 8.00008L9.00033 8.00008ZM7.00033 8.00675C7.00033 8.55903 7.44804 9.00675 8.00033 9.00675C8.55261 9.00675 9.00033 8.55903 9.00033 8.00675L7.00033 8.00675ZM9.00033 12.6667C9.00033 12.1145 8.55261 11.6667 8.00033 11.6667C7.44804 11.6667 7.00033 12.1145 7.00033 12.6667L9.00033 12.6667ZM7.00033 12.6734C7.00032 13.2257 7.44804 13.6734 8.00032 13.6734C8.55261 13.6734 9.00032 13.2257 9.00033 12.6734L7.00033 12.6734ZM8.00033 3.00008C8.18442 3.00008 8.33366 3.14932 8.33366 3.33341L6.33366 3.33341C6.33366 4.25389 7.07985 5.00008 8.00033 5.00008L8.00033 3.00008ZM8.33366 3.33341C8.33366 3.51751 8.18442 3.66675 8.00033 3.66675L8.00033 1.66675C7.07985 1.66675 6.33366 2.41294 6.33366 3.33341L8.33366 3.33341ZM8.00033 3.66675C7.81623 3.66675 7.66699 3.51751 7.66699 3.33341L9.66699 3.33341C9.66699 2.41294 8.9208 1.66675 8.00033 1.66675L8.00033 3.66675ZM7.66699 3.33341C7.66699 3.14932 7.81623 3.00008 8.00033 3.00008L8.00033 5.00008C8.9208 5.00008 9.66699 4.25389 9.66699 3.33341L7.66699 3.33341ZM8.00033 7.66675C8.18442 7.66675 8.33366 7.81599 8.33366 8.00008L6.33366 8.00008C6.33366 8.92056 7.07985 9.66675 8.00033 9.66675L8.00033 7.66675ZM8.33366 8.00008C8.33366 8.18418 8.18442 8.33341 8.00033 8.33341L8.00033 6.33341C7.07985 6.33341 6.33366 7.07961 6.33366 8.00008L8.33366 8.00008ZM8.00033 8.33341C7.81623 8.33341 7.66699 8.18418 7.66699 8.00008L9.66699 8.00008C9.66699 7.07961 8.9208 6.33341 8.00033 6.33341L8.00033 8.33341ZM7.66699 8.00008C7.66699 7.81599 7.81623 7.66675 8.00033 7.66675L8.00033 9.66675C8.9208 9.66675 9.66699 8.92056 9.66699 8.00008L7.66699 8.00008ZM8.00033 12.3334C8.18442 12.3334 8.33366 12.4827 8.33366 12.6667L6.33366 12.6667C6.33366 13.5872 7.07985 14.3334 8.00032 14.3334L8.00033 12.3334ZM8.33366 12.6667C8.33366 12.8508 8.18442 13.0001 8.00032 13.0001L8.00033 11.0001C7.07985 11.0001 6.33366 11.7463 6.33366 12.6667L8.33366 12.6667ZM8.00032 13.0001C7.81623 13.0001 7.66699 12.8508 7.66699 12.6667L9.66699 12.6667C9.66699 11.7463 8.9208 11.0001 8.00033 11.0001L8.00032 13.0001ZM7.66699 12.6667C7.66699 12.4827 7.81623 12.3334 8.00033 12.3334L8.00032 14.3334C8.9208 14.3334 9.66699 13.5872 9.66699 12.6667L7.66699 12.6667ZM7.00033 3.33341L7.00033 3.34008L9.00033 3.34008L9.00033 3.33341L7.00033 3.33341ZM7.00033 8.00008L7.00033 8.00675L9.00033 8.00675L9.00033 8.00008L7.00033 8.00008ZM7.00033 12.6667L7.00033 12.6734L9.00033 12.6734L9.00033 12.6667L7.00033 12.6667Z" fill="currentColor"></path>
          </svg>
        </div>
      </div>
      <div class="pb-3.5 w-full overflow-x-auto">
        <table class="w-full min-w-max">
          <tbody>
            <tr>
              <td class="py-2.5">
                <div class="flex items-center">
                  <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox6-1" type="checkbox">
                  <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                    <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <label class="font-medium" for="modalCheckbox6-1">Project planning</label>
                </div>
              </td>
            </tr>
            <tr>
              <td class="py-2.5">
                <div class="flex items-center">
                  <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox6-2" checked="" type="checkbox">
                  <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                    <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <label class="font-medium" for="modalCheckbox6-2">Company organizing</label>
                </div>
              </td>
            </tr>
            <tr>
              <td class="py-2.5">
                <div class="flex items-center">
                  <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox6-3" type="checkbox">
                  <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                    <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <label class="font-medium" for="modalCheckbox6-3">HR management</label>
                </div>
              </td>
            </tr>
            <tr>
              <td class="py-2.5">
                <div class="flex items-center">
                  <input class="opacity-0 absolute h-5 w-5" id="modalCheckbox6-4" checked="" type="checkbox">
                  <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 bg-white border-2 border-neutral-200 rounded">
                    <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.33301 5.66675L3.99967 8.33341L10.6663 1.66675" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <label class="font-medium" for="modalCheckbox6-4">Proper directing</label>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

Tailwind Component #93

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">Full Name</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex items-center justify-end sm:max-w-md overflow-hidden hover:bg-gray-50 border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <div class="pl-3.5">
              <svg width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.33398 17H2.58398C2.58398 17.4142 2.91977 17.75 3.33398 17.75V17ZM12.6673 17V17.75C13.0815 17.75 13.4173 17.4142 13.4173 17H12.6673ZM9.91732 7.66667C9.91732 8.72521 9.0592 9.58333 8.00065 9.58333V11.0833C9.88762 11.0833 11.4173 9.55364 11.4173 7.66667H9.91732ZM8.00065 9.58333C6.94211 9.58333 6.08398 8.72521 6.08398 7.66667H4.58398C4.58398 9.55364 6.11368 11.0833 8.00065 11.0833V9.58333ZM6.08398 7.66667C6.08398 6.60812 6.94211 5.75 8.00065 5.75V4.25C6.11368 4.25 4.58398 5.77969 4.58398 7.66667H6.08398ZM8.00065 5.75C9.0592 5.75 9.91732 6.60812 9.91732 7.66667H11.4173C11.4173 5.77969 9.88762 4.25 8.00065 4.25V5.75ZM4.08398 17C4.08398 14.8369 5.83754 13.0833 8.00065 13.0833V11.5833C5.00911 11.5833 2.58398 14.0085 2.58398 17H4.08398ZM8.00065 13.0833C10.1638 13.0833 11.9173 14.8369 11.9173 17H13.4173C13.4173 14.0085 10.9922 11.5833 8.00065 11.5833V13.0833ZM3.33398 17.75H12.6673V16.25H3.33398V17.75Z" fill="#B8C1CC"></path>
              </svg>
            </div>
            <input class="py-2.5 pl-2 pr-3.5 text-sm w-full bg-transparent outline-none placeholder-neutral-400" id="inputsInput7-1" type="text" placeholder="Enter first &amp; last name">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #94

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pt-7 px-6 pb-5 bg-white border overflow-hidden rounded-xl">
      <div class="relative top-5 sm:flex flex-wrap hidden">
        <div class="flex-1 h-0.5 bg-neutral-600"></div>
        <div class="flex-1 bg-neutral-100"></div>
      </div>
      <div class="relative z-10 flex flex-wrap -m-2">
        <div class="w-full sm:w-1/3 text-center p-2">
          <div class="relative mb-3 w-9 h-9 mx-auto text-center">
            <div class="relative z-10 flex items-center justify-center mx-auto w-9 h-9 bg-gradient-purple-left rounded-full">
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.75 5.75L4.75 8.75L12.25 1.25" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <div class="absolute top-1/2 -left-96 transform -translate-y-1/2 h-4 w-96 bg-white"></div>
          </div>
          <p class="font-medium">Create group</p>
        </div>
        <div class="w-full sm:w-1/3 p-2">
          <div class="text-center">
            <div class="flex items-center justify-center mx-auto mb-3 w-9 h-9 bg-white border border-neutral-600 rounded-full">
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.75 5.75L4.75 8.75L12.25 1.25" stroke="#0C1523" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <p class="font-medium">Create event</p>
          </div>
        </div>
        <div class="w-full sm:w-1/3 text-center p-2">
          <div class="relative mb-3 w-9 h-9 mx-auto text-center">
            <div class="relative z-10 flex items-center justify-center mx-auto w-9 h-9 bg-white border rounded-full">
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.75 5.75L4.75 8.75L12.25 1.25" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <div class="absolute top-1/2 -right-96 transform -translate-y-1/2 h-4 w-96 bg-white"></div>
          </div>
          <p class="text-neutral-400 font-medium">Add to calendar</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #95

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pt-5 pb-2 bg-neutral-50 border border-neutral-100 rounded-xl">
      <div class="px-5">
        <h3 class="font-heading mb-1 text-lg text-neutral-600 font-semibold">Customers</h3>
        <p class="mb-5 text-sm text-neutral-500">Get all your sales performance report</p>
        <div class="w-full overflow-x-auto">
          <table class="w-full min-w-max">
            <tbody>
              <tr :class="{'hidden': visible}" x-data="{ visible: false }">
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5">
                      <img class="h-8" src="dashy-assets/images/avatar24.png" alt="">
                    </div>
                    <div class="w-auto p-1.5">
                      <span class="block text-sm font-semibold">Bessie Cooper</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <a x-on:click.prevent="visible = !visible" class="group flex flex-wrap justify-end items-center" href="#">
                    <svg class="mr-3 text-neutral-300 group-hover:text-neutral-400" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.96967 11.4697C3.67678 11.7626 3.67678 12.2374 3.96967 12.5303C4.26256 12.8232 4.73744 12.8232 5.03033 12.5303L3.96967 11.4697ZM13.0303 4.53033C13.3232 4.23744 13.3232 3.76256 13.0303 3.46967C12.7374 3.17678 12.2626 3.17678 11.9697 3.46967L13.0303 4.53033ZM5.03033 3.46967C4.73744 3.17678 4.26256 3.17678 3.96967 3.46967C3.67678 3.76256 3.67678 4.23744 3.96967 4.53033L5.03033 3.46967ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM5.03033 12.5303L13.0303 4.53033L11.9697 3.46967L3.96967 11.4697L5.03033 12.5303ZM3.96967 4.53033L11.9697 12.5303L13.0303 11.4697L5.03033 3.46967L3.96967 4.53033Z" fill="currentColor"></path>
                    </svg>
                    <span class="text-sm text-neutral-400 group-hover:text-neutral-500 font-medium">Remove</span>
                  </a>
                </td>
              </tr>
              <tr :class="{'hidden': visible}" x-data="{ visible: false }">
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5">
                      <img class="h-8" src="dashy-assets/images/avatar25.png" alt="">
                    </div>
                    <div class="w-auto p-1.5">
                      <span class="block text-sm font-semibold">Jane Cooper</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <a x-on:click.prevent="visible = !visible" class="group flex flex-wrap justify-end items-center" href="#">
                    <svg class="mr-3 text-neutral-300 group-hover:text-neutral-400" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.96967 11.4697C3.67678 11.7626 3.67678 12.2374 3.96967 12.5303C4.26256 12.8232 4.73744 12.8232 5.03033 12.5303L3.96967 11.4697ZM13.0303 4.53033C13.3232 4.23744 13.3232 3.76256 13.0303 3.46967C12.7374 3.17678 12.2626 3.17678 11.9697 3.46967L13.0303 4.53033ZM5.03033 3.46967C4.73744 3.17678 4.26256 3.17678 3.96967 3.46967C3.67678 3.76256 3.67678 4.23744 3.96967 4.53033L5.03033 3.46967ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM5.03033 12.5303L13.0303 4.53033L11.9697 3.46967L3.96967 11.4697L5.03033 12.5303ZM3.96967 4.53033L11.9697 12.5303L13.0303 11.4697L5.03033 3.46967L3.96967 4.53033Z" fill="currentColor"></path>
                    </svg>
                    <span class="text-sm text-neutral-400 group-hover:text-neutral-500 font-medium">Remove</span>
                  </a>
                </td>
              </tr>
              <tr :class="{'hidden': visible}" x-data="{ visible: false }">
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5">
                      <img class="h-8" src="dashy-assets/images/avatar26.png" alt="">
                    </div>
                    <div class="w-auto p-1.5">
                      <span class="block text-sm font-semibold">Ralph Edwards</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <a x-on:click.prevent="visible = !visible" class="group flex flex-wrap justify-end items-center" href="#">
                    <svg class="mr-3 text-neutral-300 group-hover:text-neutral-400" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.96967 11.4697C3.67678 11.7626 3.67678 12.2374 3.96967 12.5303C4.26256 12.8232 4.73744 12.8232 5.03033 12.5303L3.96967 11.4697ZM13.0303 4.53033C13.3232 4.23744 13.3232 3.76256 13.0303 3.46967C12.7374 3.17678 12.2626 3.17678 11.9697 3.46967L13.0303 4.53033ZM5.03033 3.46967C4.73744 3.17678 4.26256 3.17678 3.96967 3.46967C3.67678 3.76256 3.67678 4.23744 3.96967 4.53033L5.03033 3.46967ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM5.03033 12.5303L13.0303 4.53033L11.9697 3.46967L3.96967 11.4697L5.03033 12.5303ZM3.96967 4.53033L11.9697 12.5303L13.0303 11.4697L5.03033 3.46967L3.96967 4.53033Z" fill="currentColor"></path>
                    </svg>
                    <span class="text-sm text-neutral-400 group-hover:text-neutral-500 font-medium">Remove</span>
                  </a>
                </td>
              </tr>
              <tr :class="{'hidden': visible}" x-data="{ visible: false }">
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5">
                      <img class="h-8" src="dashy-assets/images/avatar27.png" alt="">
                    </div>
                    <div class="w-auto p-1.5">
                      <span class="block text-sm font-semibold">Albert Floresr</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <a x-on:click.prevent="visible = !visible" class="group flex flex-wrap justify-end items-center" href="#">
                    <svg class="mr-3 text-neutral-300 group-hover:text-neutral-400" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.96967 11.4697C3.67678 11.7626 3.67678 12.2374 3.96967 12.5303C4.26256 12.8232 4.73744 12.8232 5.03033 12.5303L3.96967 11.4697ZM13.0303 4.53033C13.3232 4.23744 13.3232 3.76256 13.0303 3.46967C12.7374 3.17678 12.2626 3.17678 11.9697 3.46967L13.0303 4.53033ZM5.03033 3.46967C4.73744 3.17678 4.26256 3.17678 3.96967 3.46967C3.67678 3.76256 3.67678 4.23744 3.96967 4.53033L5.03033 3.46967ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM5.03033 12.5303L13.0303 4.53033L11.9697 3.46967L3.96967 11.4697L5.03033 12.5303ZM3.96967 4.53033L11.9697 12.5303L13.0303 11.4697L5.03033 3.46967L3.96967 4.53033Z" fill="currentColor"></path>
                    </svg>
                    <span class="text-sm text-neutral-400 group-hover:text-neutral-500 font-medium">Remove</span>
                  </a>
                </td>
              </tr>
              <tr :class="{'hidden': visible}" x-data="{ visible: false }">
                <td class="py-3 pr-4">
                  <div class="flex flex-wrap items-center -m-1.5">
                    <div class="w-auto p-1.5">
                      <img class="h-8" src="dashy-assets/images/avatar28.png" alt="">
                    </div>
                    <div class="w-auto p-1.5">
                      <span class="block text-sm font-semibold">Devon Lane</span>
                    </div>
                  </div>
                </td>
                <td class="py-3 pl-4">
                  <a x-on:click.prevent="visible = !visible" class="group flex flex-wrap justify-end items-center" href="#">
                    <svg class="mr-3 text-neutral-300 group-hover:text-neutral-400" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.96967 11.4697C3.67678 11.7626 3.67678 12.2374 3.96967 12.5303C4.26256 12.8232 4.73744 12.8232 5.03033 12.5303L3.96967 11.4697ZM13.0303 4.53033C13.3232 4.23744 13.3232 3.76256 13.0303 3.46967C12.7374 3.17678 12.2626 3.17678 11.9697 3.46967L13.0303 4.53033ZM5.03033 3.46967C4.73744 3.17678 4.26256 3.17678 3.96967 3.46967C3.67678 3.76256 3.67678 4.23744 3.96967 4.53033L5.03033 3.46967ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM5.03033 12.5303L13.0303 4.53033L11.9697 3.46967L3.96967 11.4697L5.03033 12.5303ZM3.96967 4.53033L11.9697 12.5303L13.0303 11.4697L5.03033 3.46967L3.96967 4.53033Z" fill="currentColor"></path>
                    </svg>
                    <span class="text-sm text-neutral-400 group-hover:text-neutral-500 font-medium">Remove</span>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #96

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-5 pb-7 bg-white overflow-hidden border rounded-xl">
      <h3 class="text-lg font-semibold">Personal Tasks</h3>
      <p class="mb-6 text-neutral-500">Here are your 3 tasks for today</p>
      <ul class="mb-7">
        <li class="flex flex-wrap items-center justify-between mb-4">
          <div class="flex flex-wrap items-center mr-4">
            <div class="mr-2 w-3.5 h-3.5 rounded-full bg-yellow-500"></div>
            <span class="font-medium">Office Meeting at 10:45a</span>
          </div>
          <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="10" fill="#564AF7"></circle>
            <path d="M5.91602 10.5833L8.24935 12.9166L14.0827 7.08325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </li>
        <li class="flex flex-wrap items-center justify-between mb-4">
          <div class="flex flex-wrap items-center mr-4">
            <div class="mr-2 w-3.5 h-3.5 rounded-full bg-yellow-500"></div>
            <span class="font-medium">Meeting with Client at 11:15a</span>
          </div>
          <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="10" fill="#CBD2D9"></circle>
            <path d="M5.91797 10.5835L8.2513 12.9168L14.0846 7.0835" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </li>
        <li class="flex flex-wrap items-center justify-between mb-4">
          <div class="flex flex-wrap items-center mr-4">
            <div class="mr-2 w-3.5 h-3.5 rounded-full bg-indigo-500"></div>
            <span class="font-medium">Reading Break at 1:15p</span>
          </div>
          <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="10" fill="#CBD2D9"></circle>
            <path d="M5.91797 10.5835L8.2513 12.9168L14.0846 7.0835" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </li>
        <li class="flex flex-wrap items-center justify-between">
          <div class="flex flex-wrap items-center mr-4">
            <div class="mr-2 w-3.5 h-3.5 rounded-full bg-blue-500"></div>
            <span class="font-medium">Dinner at Jonathon at 7:20p</span>
          </div>
          <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="10" fill="#CBD2D9"></circle>
            <path d="M5.91797 10.5835L8.2513 12.9168L14.0846 7.0835" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </li>
      </ul>
      <a class="inline-flex flex-wrap items-center justify-center px-5 py-3 w-full text-center text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">
        <svg class="mr-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8.74935 2.6665C8.74935 2.25229 8.41356 1.9165 7.99935 1.9165C7.58513 1.9165 7.24935 2.25229 7.24935 2.6665H8.74935ZM7.24935 13.3332C7.24935 13.7474 7.58513 14.0832 7.99935 14.0832C8.41356 14.0832 8.74935 13.7474 8.74935 13.3332H7.24935ZM13.3327 8.74984C13.7469 8.74984 14.0827 8.41405 14.0827 7.99984C14.0827 7.58562 13.7469 7.24984 13.3327 7.24984V8.74984ZM2.66602 7.24984C2.2518 7.24984 1.91602 7.58562 1.91602 7.99984C1.91602 8.41405 2.2518 8.74984 2.66602 8.74984L2.66602 7.24984ZM7.24935 2.6665V13.3332H8.74935V2.6665H7.24935ZM13.3327 7.24984L2.66602 7.24984L2.66602 8.74984L13.3327 8.74984V7.24984Z" fill="currentColor"></path>
        </svg>
        <span class="font-medium">Add new task</span>
      </a>
    </div>
  </div>
</section>

Tailwind Component #97

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-5 pb-7 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between mb-7 -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Latest Projects</h3>
        </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="#B8C1CC"></path>
          </svg>
        </div>
      </div>
      <div class="flex flex-wrap divide-y -m-3">
        <div class="w-full p-3">
          <div class="flex flex-wrap items-center -m-3">
            <div class="flex-1 p-3">
              <div class="px-2.5 py-2 w-full bg-gradient-purple-left rounded-lg">
                <p class="text-sm text-white font-medium">/Email marketing</p>
              </div>
            </div>
            <div class="w-auto p-3">
              <div class="flex items-center">
                <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="12" r="11" fill="white" stroke="#EAEDF0" stroke-width="2"></circle>
                  <path d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM21.0722 12C21.0722 6.98956 17.0104 2.9278 12 2.9278C6.98956 2.9278 2.9278 6.98956 2.9278 12C2.9278 17.0104 6.98956 21.0722 12 21.0722C17.0104 21.0722 21.0722 17.0104 21.0722 12Z" fill="#0C1523"></path>
                </svg>
                <p class="font-medium">100%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full p-3">
          <div class="flex flex-wrap items-center -m-3">
            <div class="flex-1 p-3">
              <div class="px-2.5 py-2 w-9/12 bg-gradient-purple-left rounded-lg">
                <p class="text-sm text-white font-medium">/Project management</p>
              </div>
            </div>
            <div class="w-auto p-3">
              <div class="flex items-center">
                <svg class="mr-2" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="14.5117" cy="15" r="11" fill="white" stroke="#EAEDF0" stroke-width="2"></circle>
                  <path d="M4.67993 19.9325C4.18627 20.1801 3.98332 20.7837 4.27118 21.255C5.2457 22.8506 6.58227 24.2006 8.17806 25.1923C10.0577 26.3605 12.2238 26.9861 14.4368 27C16.6498 27.0139 18.8236 26.4155 20.7178 25.2711C22.6119 24.1266 24.1527 22.4806 25.1698 20.5151C26.1869 18.5496 26.6406 16.3411 26.4808 14.1338C26.3211 11.9265 25.554 9.80642 24.2645 8.00788C22.9749 6.20934 21.2131 4.80243 19.1739 3.9427C17.4426 3.21281 15.5686 2.90145 13.7032 3.0275C13.1522 3.06473 12.7767 3.57903 12.8596 4.12504L12.999 5.04232C13.082 5.58833 13.5924 5.95787 14.1442 5.93547C15.4736 5.8815 16.803 6.12051 18.0365 6.64055C19.5782 7.29052 20.9101 8.35416 21.8851 9.71389C22.86 11.0736 23.4399 12.6765 23.5607 14.3452C23.6815 16.014 23.3384 17.6836 22.5695 19.1696C21.8006 20.6555 20.6357 21.8999 19.2037 22.7651C17.7717 23.6304 16.1283 24.0827 14.4552 24.0722C12.7821 24.0617 11.1445 23.5887 9.72347 22.7056C8.58649 21.999 7.62357 21.0518 6.89977 19.9354C6.59934 19.472 6.00289 19.2688 5.50923 19.5164L4.67993 19.9325Z" fill="#0C1523"></path>
                </svg>
                <p class="font-medium">70%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full p-3">
          <div class="flex flex-wrap items-center -m-3">
            <div class="flex-1 p-3">
              <div class="px-2.5 py-2 w-6/12 bg-gradient-purple-left rounded-lg">
                <p class="text-sm text-white font-medium">/Team working</p>
              </div>
            </div>
            <div class="w-auto p-3">
              <div class="flex items-center">
                <svg class="mr-2" width="33" height="34" viewBox="0 0 33 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="16.4648" cy="17" r="11" fill="white" stroke="#EAEDF0" stroke-width="2"></circle>
                  <path d="M19.8878 27.4542C20.0596 27.979 20.6265 28.2691 21.1353 28.0542C23.4438 27.0792 25.3978 25.4015 26.7112 23.2477C28.1988 20.8082 28.7672 17.9181 28.314 15.097C27.8609 12.2759 26.4161 9.70906 24.2394 7.85816C22.3176 6.22397 19.9366 5.24257 17.4388 5.03945C16.8883 4.99468 16.4408 5.44771 16.442 5.99999L16.444 6.92779C16.4452 7.48008 16.8952 7.92111 17.4443 7.98066C19.2438 8.17584 20.9523 8.90621 22.3428 10.0886C23.9884 11.4879 25.0807 13.4285 25.4233 15.5613C25.7658 17.6941 25.3362 19.8791 24.2115 21.7233C23.2612 23.2817 21.8674 24.5104 20.2195 25.2592C19.7167 25.4877 19.4274 26.0475 19.5992 26.5724L19.8878 27.4542Z" fill="#0C1523"></path>
                </svg>
                <p class="font-medium">45%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full p-3">
          <div class="flex flex-wrap items-center -m-3">
            <div class="flex-1 p-3">
              <div class="px-2.5 py-2 w-11/12 bg-gradient-purple-left rounded-lg">
                <p class="text-sm text-white font-medium">/Planning</p>
              </div>
            </div>
            <div class="w-auto p-3">
              <div class="flex items-center">
                <svg class="mr-2" width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="16.7617" cy="17" r="11" fill="white" stroke="#EAEDF0" stroke-width="2"></circle>
                  <path d="M9.5227 8.71715C9.15929 8.30128 8.52408 8.25604 8.1399 8.6528C6.39666 10.4531 5.25456 12.7614 4.88818 15.2573C4.47322 18.0843 5.08056 20.9665 6.60097 23.3856C8.12138 25.8048 10.4551 27.602 13.1823 28.4541C15.9095 29.3062 18.8513 29.1572 21.4785 28.0339C24.1057 26.9107 26.2458 24.8869 27.5141 22.3265C28.7823 19.7662 29.0953 16.8373 28.3969 14.0668C27.6985 11.2962 26.0344 8.86577 23.7039 7.21263C21.6463 5.75303 19.1885 4.98395 16.6826 5.00037C16.1303 5.00399 15.7241 5.49447 15.7737 6.04453L15.857 6.96859C15.9065 7.51864 16.3935 7.91856 16.9456 7.9298C18.7553 7.96662 20.5212 8.54455 22.0099 9.60062C23.7718 10.8504 25.0299 12.6879 25.5579 14.7825C26.086 16.877 25.8493 19.0913 24.8905 21.027C23.9317 22.9626 22.3137 24.4927 20.3275 25.3419C18.3413 26.1911 16.1173 26.3037 14.0554 25.6595C11.9936 25.0153 10.2293 23.6566 9.07984 21.8277C7.93038 19.9988 7.47122 17.8198 7.78494 15.6826C8.05003 13.8766 8.85227 12.2007 10.076 10.8669C10.4493 10.46 10.4966 9.83166 10.1332 9.41579L9.5227 8.71715Z" fill="#0C1523"></path>
                </svg>
                <p class="font-medium">90%</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #98

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/3 p-3">
        <div class="p-6 h-full bg-white border rounded-lg">
          <div class="flex items-center justify-center w-10 h-10 mb-7 bg-gradient-purple-left rounded-full">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.0833 2.80029H10.8333C10.8333 2.58703 10.7425 2.38386 10.5837 2.24159C10.4248 2.09932 10.2129 2.0314 10.0009 2.05483L10.0833 2.80029ZM19.1996 11.9166L19.9451 11.999C19.9685 11.787 19.9006 11.5751 19.7584 11.4163C19.6161 11.2574 19.4129 11.1666 19.1996 11.1666V11.9166ZM10.0833 11.9166H9.33333C9.33333 12.3308 9.66912 12.6666 10.0833 12.6666V11.9166ZM18.7805 8.24994V8.99994C19.024 8.99994 19.2523 8.88176 19.3929 8.68298C19.5334 8.48419 19.5688 8.22954 19.4876 7.99999L18.7805 8.24994ZM13.75 8.24994H13C13 8.66416 13.3358 8.99994 13.75 8.99994V8.24994ZM13.75 3.21955L13.9999 2.51242C13.7704 2.43129 13.5157 2.46662 13.317 2.6072C13.1182 2.74777 13 2.97608 13 3.21955H13.75ZM3.5 10.9999C3.5 7.13998 6.41658 3.9602 10.1657 3.54575L10.0009 2.05483C5.50018 2.55237 2 6.36688 2 10.9999H3.5ZM11 18.4999C6.85786 18.4999 3.5 15.1421 3.5 10.9999H2C2 15.9705 6.02944 19.9999 11 19.9999V18.4999ZM18.4542 11.8342C18.0397 15.5834 14.86 18.4999 11 18.4999V19.9999C15.6331 19.9999 19.4476 16.4998 19.9451 11.999L18.4542 11.8342ZM19.1996 11.1666H10.0833V12.6666H19.1996V11.1666ZM10.8333 11.9166V2.80029H9.33333V11.9166H10.8333ZM18.7805 7.49994H13.75V8.99994H18.7805V7.49994ZM14.5 8.24994V3.21955H13V8.24994H14.5ZM13.5001 3.92668C15.6305 4.67968 17.3203 6.36946 18.0734 8.49989L19.4876 7.99999C18.5836 5.4423 16.5576 3.41644 13.9999 2.51242L13.5001 3.92668Z" fill="white"></path>
            </svg>
          </div>
          <h3 class="font-heading mb-3 text-lg font-semibold">Exploration UI Kit</h3>
          <p class="text-neutral-500">It is a long established fact that is a reader will be distracted by content of a page when looking at its layout.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/3 p-3">
        <div class="p-6 h-full bg-white border rounded-lg">
          <div class="flex items-center justify-center w-10 h-10 mb-7 bg-gradient-purple-left rounded-full">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.916 9.16667V2.75L3.66602 12.8333H10.0827L10.0827 19.25L18.3327 9.16667L11.916 9.16667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="font-heading mb-3 text-lg font-semibold">Discuss about NFT</h3>
          <p class="text-neutral-500">It is a long established fact that is a reader will be distracted by content of a page when looking at its layout.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/3 p-3">
        <div class="p-6 h-full bg-white border rounded-lg">
          <div class="flex items-center justify-center w-10 h-10 mb-7 bg-gradient-purple-left rounded-full">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.66602 4.58317C3.66602 4.07691 4.07642 3.6665 4.58268 3.6665H17.416C17.9223 3.6665 18.3327 4.07691 18.3327 4.58317V6.4165C18.3327 6.92276 17.9223 7.33317 17.416 7.33317H4.58268C4.07642 7.33317 3.66602 6.92276 3.66602 6.4165V4.58317Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3.66602 11.9165C3.66602 11.4102 4.07642 10.9998 4.58268 10.9998H10.0827C10.5889 10.9998 10.9993 11.4102 10.9993 11.9165V17.4165C10.9993 17.9228 10.5889 18.3332 10.0827 18.3332H4.58268C4.07642 18.3332 3.66602 17.9228 3.66602 17.4165V11.9165Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M14.666 11.9165C14.666 11.4102 15.0764 10.9998 15.5827 10.9998H17.416C17.9223 10.9998 18.3327 11.4102 18.3327 11.9165V17.4165C18.3327 17.9228 17.9223 18.3332 17.416 18.3332H15.5827C15.0764 18.3332 14.666 17.9228 14.666 17.4165V11.9165Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="font-heading mb-3 text-lg font-semibold">Continue Wireframing</h3>
          <p class="text-neutral-500">It is a long established fact that is a reader will be distracted by content of a page when looking at its layout.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #99

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">Email Address</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto">
            <input class="mb-2.5 py-2.5 px-3.5 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400 border border-red-500 rounded-lg" id="inputsInput8-1" type="text" value="john&amp;gmail.com" placeholder="Email address">
            <p class="text-sm text-red-500">Wrong email format. Enter correct email address</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #100

Tailwind CSS

Dashy

<section class="py-4 overflow-hidden" x-data="{ date: '' }" x-init="date = $refs.date1.textContent">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-5 pb-7 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Order Summary</h3>
        </div>
        <div class="w-auto p-2">
          <div class="flex flex-wrap -m-2">
            <div x-ref="date1" class="w-auto p-2"><a class="px-3 py-2 text-sm font-medium bg-neutral-600 text-white rounded-lg" :class="{'bg-neutral-600 text-white': date == $refs.date1.textContent, 'bg-light text-neutral-400': date != $refs.date1.textContent}" x-on:click.prevent="date = $refs.date1.textContent" href="#">Monthly</a></div>
            <div x-ref="date2" class="w-auto p-2"><a class="px-3 py-2 text-sm font-medium bg-light text-neutral-400 rounded-lg" :class="{'bg-neutral-600 text-white': date == $refs.date2.textContent, 'bg-light text-neutral-400': date != $refs.date2.textContent}" x-on:click.prevent="date = $refs.date2.textContent" href="#">Weekly</a></div>
            <div x-ref="date3" class="w-auto p-2"><a class="px-3 py-2 text-sm font-medium bg-light text-neutral-400 rounded-lg" :class="{'bg-neutral-600 text-white': date == $refs.date3.textContent, 'bg-light text-neutral-400': date != $refs.date3.textContent}" x-on:click.prevent="date = $refs.date3.textContent" href="#">Today</a></div>
          </div>
        </div>
      </div>
      <div class="mb-6 pb-3 border-b">
        <div class="chart" data-type="area-graph8"></div>
      </div>
      <div class="flex flex-wrap -m-8">
        <div class="w-auto p-8">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <img src="dashy-assets/images/graph-progress.svg" alt="">
            </div>
            <div class="w-auto p-1">
              <p>New Order</p>
              <p class="text-xl font-semibold">85%</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-8">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <p>Order Complete</p>
              <p class="text-xl font-semibold">65%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind Components in Dashy library

Framework

UI Library

Components

Tailwind Component #81

Your next website starts here

Tailwind Component #82

Tailwind Component #83

Tailwind Component #84

Tailwind Component #85

Tailwind Component #86

Tailwind Component #87

Tailwind Component #88

Tailwind Component #89

Tailwind Component #90

Tailwind Component #91

Tailwind Component #92

Tailwind Component #93

Tailwind Component #94

Tailwind Component #95

Tailwind Component #96

Tailwind Component #97

Tailwind Component #98

Tailwind Component #99

Tailwind Component #100

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