Tailwind CSS Components

<section class="overflow-hidden">
  <div class="px-6 lg:px-12 py-6 lg:py-3 bg-blueGray-50">
    <nav class="flex justify-between items-center">
      <div class="hidden relative xl:flex items-center py-2 px-6 bg-white rounded-3xl text-sm font-heading font-medium">
        <img class="h-10 w-10 mr-4" src="uinel-assets/images/dashboard-navigations/frame1.svg" alt="">
        <select class="relative z-10 pr-24 pl-2 bg-transparent outline-none appearance-none cursor-pointer leading-8" name="" id="">
          <option value="1">Open tasks</option>
          <option value="1">New task</option>
          <option value="1">Tables</option>
          <option value="1">Sales</option>
        </select>
        <svg class="absolute top-1/2 right-0 h-4 -mt-2 mr-8" width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.47291 8.69323C7.70854 8.43559 8.08938 8.43559 8.32328 8.69323C8.55804 8.95087 8.55978 9.36714 8.32328 9.62478L4.92529 13.3068C4.69053 13.5644 4.31056 13.5644 4.07406 13.3068L0.676073 9.62478C0.441309 9.3681 0.441309 8.95087 0.676073 8.69323C0.911706 8.43559 1.29254 8.43559 1.52644 8.69323L4.50098 11.7128L7.47291 8.69323Z" fill="#8C949F"></path>
          <path d="M1.52709 5.30677C1.29146 5.56441 0.910619 5.56441 0.676725 5.30677C0.441961 5.04913 0.440223 4.63286 0.676725 4.37522L4.07471 0.693232C4.30947 0.435589 4.68944 0.435589 4.92594 0.693232L8.32393 4.37522C8.55869 4.6319 8.55869 5.04913 8.32393 5.30677C8.08829 5.56441 7.70746 5.56441 7.47356 5.30677L4.49902 2.28716L1.52709 5.30677Z" fill="#8C949F"></path>
        </svg>
      </div>
      <div class="hidden xl:flex items-center justify-between">
        <a class="inline-block mr-20 text-darkBlueGray-300 hover:text-darkBlueGray-400" href="#">
          <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.22603 16.1331L5.22266 11.6871" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.82614 12.5306C13.0093 12.5306 15.5898 9.94935 15.5898 6.76528C15.5898 3.5812 13.0093 1 9.82614 1C6.64297 1 4.0625 3.5812 4.0625 6.76528C4.0625 9.94935 6.64297 12.5306 9.82614 12.5306Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="flex items-center text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">

<section class="py-8 bg-blueGray-50" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="pt-14 px-8 pb-12 bg-white rounded-3xl">
      <div class="flex flex-wrap justify-between items-center pl-9">
        <div class="w-full md:w-auto mb-10 md:mb-0">
          <div class="flex flex-wrap items-start mb-2">
            <h3 class="w-full md:w-auto text-3xl font-heading font-medium leading-10">Project in Progress</h3>
            <div class="order-first md:order-last mb-2 md:mb-0 px-2 md:ml-2 text-center bg-green-200 bg-opacity-70 rounded-full">
              <span class="text-xxs align-middle font-bold text-green-500 leading-7">16 NEW</span>
            </div>
          </div>
          <p class="text-darkBlueGray-400 font-heading">About recent tasks</p>
        </div>
        <div class="w-full max-w-max pr-9"><a class="block py-4 px-7 w-full leading-3 text-white font-semibold tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Add new</a></div>
      </div>
      <div class="overflow-x-auto">
        <div class="min-w-max overflow-hidden">
          <table class="table-auto w-full">
            <tbody>
              <tr>
                <td class="p-0">
                  <div class="flex items-center pl-9 p-5 mt-14 h-20 bg-blueGray-50 min-w-max border-l border-t border-b border-gray-100 rounded-tl-5xl rounded-bl-5xl">
                    <div class="flex items-center justify-start">
                      <img class="mr-5" src="uinel-assets/elements/dashboard-tables/av1.svg" alt="">

<section x-data="{ showContent: false }">
  <div class="pt-12 pb-24 2xl:pb-44 bg-blueGray-100">
    <div class="container px-4 mx-auto">
      <ul class="flex flex-wrap items-center mb-10 xl:mb-0">
        <li class="mr-6">
          <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
            <span>Home</span>
            <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li class="mr-6">
          <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
            <span>Store</span>
            <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li><a class="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#">New in</a></li>
      </ul>
      <div class="pb-9 text-center border-b border-black border-opacity-5">
        <div class="relative">

<section class="py-8 bg-white">
  <div class="container px-4 mx-auto">
    <div class="relative bg-gray-50 rounded-8xl">
      <img class="h-40 lg:h-auto w-full mb-8 object-cover rounded-t-5xl" src="uinel-assets/elements/dashboard-content/bg-linear.svg" alt="">
      <div class="px-4 pb-12">
        <div class="relative -mt-24 px-4 md:px-9 pb-6 pt-16 mb-8 text-center bg-white rounded-5xl shadow-2xl">
          <img class="mx-auto absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2" src="uinel-assets/images/dashboard-content/av2-circle-xl.png" alt="">
          <h2 class="text-xl font-heading font-medium leading-10">Faustina H. Fawn</h2>
          <p class="mb-10 text-darkBlueGray-400 font-heading">UX/UI Designer</p>
          <div class="flex flex-wrap justify-center mb-10">
            <img class="mr-6" src="uinel-assets/elements/dashboard-content/plane.svg" alt="">
            <p class="text-sm font-heading font-medium tracking-tighter">a.stones@e.mail</p>
          </div>
          <div class="flex flex-wrap justify-center -mx-1 mb-10">
            <div class="w-full sm:w-auto p-1">
              <div class="py-1 px-5 leading-7 text-blue-500 font-bold tracking-tight border border-gray-100 hover:border-gray-200 cursor-pointer rounded-full">Design</div>
            </div>
            <div class="w-full sm:w-auto p-1">
              <div class="py-1 px-5 leading-7 text-blue-500 font-bold tracking-tight border border-gray-100 hover:border-gray-200 cursor-pointer rounded-full">UX/UI</div>
            </div>
            <div class="w-full sm:w-auto p-1">
              <div class="py-1 px-5 leading-7 text-blue-500 font-bold tracking-tight border border-gray-100 hover:border-gray-200 cursor-pointer rounded-full">Motion</div>
            </div>
          </div>

<section class="relative py-24 xl:py-44 bg-darkBlueGray-500 overflow-hidden">
  <img class="absolute top-0 right-0" src="uinel-assets/elements/ecommerce-newsletter/line-dots.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-24 xl:mb-0">
        <span class="inline-block py-3 px-7 mb-10 text-lg font-medium font-heading leading-5 text-indigo-500 border border-indigo-500 bg-purple-900 bg-opacity-30 rounded-6xl">Newsletter</span>
        <h2 class="text-8xl sm:text-10xl md:text-12xl font-heading font-medium text-white leading-tight">Stay with us</h2>
      </div>
      <div class="relative w-full xl:w-2/3 px-4">
        <img class="absolute bottom-0 left-0 w-full h-80 md:h-64 xl:h-80 rounded-3xl" src="uinel-assets/images/ecommerce-newsletter/background-colors.png" alt="">
        <div class="relative py-16 xl:pt-20 xl:pb-36 px-6 md:px-20 mb-2 bg-white rounded-3xl">
          <img class="absolute bottom-0 right-0 h-16 -mb-8 mr-24 md:mr-80" src="uinel-assets/elements/ecommerce-newsletter/av1.png" alt="">
          <img class="absolute top-0 right-0 h-16 -mt-8 mr-12 md:mr-64" src="uinel-assets/elements/ecommerce-newsletter/av2.png" alt="">
          <div class="relative z-10">
            <div class="mb-10">
              <h2 class="mb-2 text-4xl font-heading font-medium leading-10">Join the our community</h2>
              <p class="text-darkBlueGray-400">Fusce sodales vitae lorem vitae now tempus.</p>
            </div>
            <div class="flex flex-wrap items-center">
              <div class="w-full md:w-12 mb-4 md:mb-0 mr-4 lg:mr-10">
                <img class="w-12" src="uinel-assets/elements/ecommerce-newsletter/user.png" alt="">
              </div>
              <div class="flex items-center lg:flex-grow w-full md:w-auto py-4 px-8 mb-4 md:mb-0 md:mr-6 leading-7 border-2 border-blue-500 rounded-xl focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                <span class="hidden md:block text-lg text-gray-300 font-medium">@</span>

<section class="py-8 bg-blueGray-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 xl:-mx-8">
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 xl:px-8 mb-8 lg:mb-0">
        <img class="mx-auto" src="uinel-assets/elements/dashboard-content/linear-top.svg" alt="">
        <div class="flex flex-wrap items-center py-5 px-8 mb-12 justify-between bg-white rounded-3xl">
          <h3 class="text-xl md:text-4xl font-medium">Backlog</h3>
          <div class="flex items-center justify-center px-5 py-2 font-bold text-white bg-blue-500 rounded-9xl">3</div>
        </div>
        <div class="px-8 pt-8 pb-14 mb-12 bg-white rounded-2xl">
          <div class="text-right mb-6">
            <a class="inline-block text-blue-500 hover:text-blue-600" href="#">
              <svg width="13" height="3" viewBox="0 0 13 3" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.8" cx="1.5" cy="1.5" r="1.5" fill="currentColor"></circle><circle opacity="0.8" cx="6.5" cy="1.5" r="1.5" fill="currentColor"></circle><circle opacity="0.8" cx="11.5" cy="1.5" r="1.5" fill="currentColor"></circle></svg>
            </a>
          </div>
          <a class="inline-block px-6 py-1 mb-8 leading-7 font-bold tracking-tight text-blue-500 bg-indigo-100 hover:bg-indigo-200 rounded-9xl" href="#">UI Design</a>
          <h3 class="mb-4 text-xl font-heading font-medium">Homepage Explorations #3</h3>
          <p class="mb-10 text-darkBlueGray-400">I haretra neque non mi aliquam, finibus hart bibendum molestie. Vestibulum suscipit.</p>
          <div class="flex flex-wrap items-center justify-between">
            <div class="flex flex-wrap items-center">
              <img src="uinel-assets/images/dashboard-content/av1.png" alt="">
              <img class="-ml-4" src="uinel-assets/images/dashboard-content/av2.png" alt="">
              <div class="relative flex justify-center items-center">
                <span class="absolute left-1 text-sm font-heading font-semibold">+3</span>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="p-10 xl:py-12 xl:px-16 h-full bg-white rounded-5xl">
      <h3 class="mb-3 text-3xl font-heading font-medium">Workflow Activity</h3>
      <p class="mb-12 text-darkBlueGray-400">Changes in current tasks</p>
      <div class="flex items-center mb-9">
        <div class="w-auto pr-8">
          <img src="uinel-assets/elements/dashboard-tables/timeline.svg" alt="">
        </div>
        <div class="flex-1">
          <div class="mb-9">
            <h3 class="mb-1 text-lg font-heading font-medium">Stand-up Meeting</h3>
            <div class="flex items-center">
              <img class="mr-5" src="uinel-assets/elements/dashboard-tables/time-quarter.svg" alt="">
              <span class="text-darkBlueGray-400">10:30 AM</span>
            </div>
          </div>
          <div class="mb-9">
            <h3 class="mb-1 text-lg font-heading font-medium">New wireframes for O24x</h3>
            <div class="flex items-center">
              <img class="mr-5" src="uinel-assets/elements/dashboard-tables/time-quarter.svg" alt="">
              <span class="text-darkBlueGray-400">9:10 AM</span>
            </div>
          </div>

<section class="py-8 bg-white" x-data="{ pagination: 4 }">
  <div class="container px-4 mx-auto">
    <div class="overflow-x-auto mb-16">
      <div class="relative inline-block min-w-full pb-2 border border-gray-100 rounded-5xl overflow-hidden">
        <table class="w-full">
          <thead class="bg-gray-50">
            <tr class="text-sm uppercase font-heading text-left">
              <th class="flex items-center pl-10 py-6 pr-12 md:pr-40 lg:pr-52 2xl:pr-64">
                <input class="appearance-none w-6 h-6 mr-9 bg-white border-2 border-darkbluegray-50 rounded-md" type="checkbox">
                <span>Customer</span>
              </th>
              <th class="py-4 pr-24">Joined</th><th class="py-4 pr-24">Department</th><th class="py-4 pr-16">Tags</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="p-0">
                <div class="flex items-center pl-10 pr-4 h-20 border-b border-gray-100">
                  <div class="w-auto">
                    <input class="appearance-none w-6 h-6 mr-9 bg-white border-2 border-darkbluegray-50 rounded-md" type="checkbox">
                  </div>
                  <div class="flex">
                    <img class="w-10 h-10 mr-4 object-cover rounded-full" src="uinel-assets/images/dashboard-tables/av1.png" alt="">
                    <div>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <img class="px-8 mx-auto w-full h-1 object-cover" src="uinel-assets/elements/dashboard-content/linear-top.svg" alt="">
    <div class="flex flex-wrap items-center py-5 px-8 mb-12 justify-between bg-white rounded-3xl">
      <h3 class="text-xl md:text-4xl font-medium">Backlog</h3>
      <div class="flex items-center justify-center px-5 py-2 font-bold text-white bg-blue-500 rounded-9xl">3</div>
    </div>
  </div>
</section>

<section class="py-8 bg-blueGray-50" x-data="{ pagination: 4 }">
  <div class="container px-4 mx-auto">
    <div class="overflow-x-auto mb-9">
      <div class="inline-block w-full min-w-max overflow-hidden">
        <table class="table-auto w-full">
          <tbody>
            <tr>
              <td class="px-0 pt-0 pb-4">
                <div class="flex items-center h-32 p-5 md:pl-14 bg-white rounded-l-5xl">
                  <div class="flex">
                    <img class="w-10 h-10 mr-4 object-cover rounded-full" src="uinel-assets/elements/dashboard-tables/av2-2.png" alt="">
                    <div>
                      <p class="font-heading font-medium leading-6">Reta Havertz</p>
                      <p class="text-sm font-normal text-darkBlueGray-400 leading-4">reta@shuffle.dev</p>
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-0 pt-0 pb-4">
                <div class="flex items-center justify-center h-32 p-5 bg-white"><a class="inline-block py-1 px-3 text-sm leading-5 font-medium text-blue-500 bg-blue-200 hover:bg-opacity-100 bg-opacity-80 rounded-full" href="#">Marketing</a></div>
              </td>
              <td class="px-0 pt-0 pb-4">
                <div class="flex items-center justify-center h-32 p-5 bg-white">
                  <span class="font-heading text-darkBlueGray-400">Shuffle</span>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="px-8 pt-8 pb-14 bg-white rounded-2xl">
      <div class="text-right mb-6">
        <a class="inline-block text-blue-500 hover:text-blue-600" href="#">
          <svg width="13" height="3" viewBox="0 0 13 3" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.8" cx="1.5" cy="1.5" r="1.5" fill="currentColor"></circle><circle opacity="0.8" cx="6.5" cy="1.5" r="1.5" fill="currentColor"></circle><circle opacity="0.8" cx="11.5" cy="1.5" r="1.5" fill="currentColor"></circle></svg>
        </a>
      </div>
      <div class="inline-block px-6 py-1 mb-8 leading-7 font-bold tracking-tight text-blue-500 bg-indigo-100 rounded-9xl">UI Design</div>
      <h3 class="mb-4 text-xl font-heading font-medium">Homepage Explorations #3</h3>
      <p class="mb-10 text-darkBlueGray-400">I haretra neque non mi aliquam, finibus hart bibendum molestie. Vestibulum suscipit.</p>
      <div class="flex flex-wrap items-center justify-between">
        <div class="flex flex-wrap items-center">
          <img src="uinel-assets/images/dashboard-content/av1.png" alt="">
          <img class="-ml-4" src="uinel-assets/images/dashboard-content/av2.png" alt="">
          <div class="relative flex justify-center items-center">
            <span class="absolute left-1 text-sm font-heading font-semibold">+3</span>
            <img class="relative" src="uinel-assets/elements/dashboard-content/dots.svg" alt="">
          </div>
        </div>
        <div class="flex">
          <a class="flex mr-4 p-1 rounded-md border border-transparent hover:border-darkBlueGray-100" href="#">
            <img class="mr-2" src="uinel-assets/elements/dashboard-content/posts.svg" alt="">
            <span class="text-sm text-darkBlueGray-400 font-heading">16</span>

<section class="py-8 bg-blueGray-50" x-data="{ 
  view: 'list',
  search: '', 
  modal: true, 
  filtersFollowers(input){ 
    return input.toLowerCase().startsWith(this.search.toLowerCase())
  } 
 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-20">
      <div class="w-full xl:w-1/2 px-4 mb-8 xl:mb-0">
        <h2 class="text-3xl font-heading font-medium leading-10">Files from Project Example</h2>
      </div>
      <div class="w-full xl:w-auto ml-auto px-4">
        <div class="flex flex-wrap items-center">
          <div class="flex w-full sm:w-auto pl-8 pr-4 py-4 mb-3 sm:mb-0 sm:mr-3 items-center bg-white border-2 border-blue-500 rounded-2xl">
            <svg class="mr-4" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.22213 16.1334L5.21875 11.6875" stroke="#8C949F" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.82614 12.5306C13.0093 12.5306 15.5898 9.94935 15.5898 6.76528C15.5898 3.5812 13.0093 1 9.82614 1C6.64297 1 4.0625 3.5812 4.0625 6.76528C4.0625 9.94935 6.64297 12.5306 9.82614 12.5306Z" stroke="#8C949F" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <input x-model="search" class="text-sm placeholder-darkBlueGray-400 bg-transparent outline-none" type="text" placeholder="Type to search">
          </div>
          <a class="inline-block w-full sm:w-auto py-4 px-10 mb-6 sm:mb-0 sm:mr-10 leading-5 text-lg text-white font-medium tracking-tighter font-heading text-center bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 rounded-xl" href="#">Time file</a>
          <div class="flex items-center">

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 xl:-mx-8">
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 xl:px-8 mb-8 lg:mb-0">
        <div class="flex flex-col h-full bg-white rounded-2xl" x-data="{ activeSlide: 1 }">
          <div class="h-full border-b border-gray-100">
            <div class="px-8 pt-8 pb-12">
              <div class="flex items-center justify-end mb-2">
                <a class="mr-2 bg-indigo-200 p-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 1, 'bg-blueGray-200 w-1 h-1': activeSlide != 1}" href="#" x-on:click.prevent="activeSlide = 1">
                    <div :class="{'bg-indigo-600': activeSlide == 1 }" class="w-2 h-2 bg-indigo-600 rounded-full"></div>
                </a>
                <a class="mr-3 bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 2, 'bg-blueGray-200 w-1 h-1': activeSlide != 2}" href="#" x-on:click.prevent="activeSlide = 2">
                    <div :class="{'bg-indigo-600': activeSlide == 2 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
                <a class="mr-3 bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 3, 'bg-blueGray-200 w-1 h-1': activeSlide != 3}" href="#" x-on:click.prevent="activeSlide = 3">
                    <div :class="{'bg-indigo-600': activeSlide == 3 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
                <a class="bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 4, 'bg-blueGray-200 w-1 h-1': activeSlide != 4}" href="#" x-on:click.prevent="activeSlide = 4">
                    <div :class="{'bg-indigo-600': activeSlide == 4 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
              </div>
              <h2 class="mb-5 text-indigo-500 font-heading font-medium">Important</h2>
              <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="mb-8 flex transition-transform duration-500 ease-in-out">

<section class="py-8 bg-blueGray-50" x-data="{ 
  view: 'list',
  search: '', 
  modal: true, 
  filtersFollowers(input){ 
    return input.toLowerCase().startsWith(this.search.toLowerCase())
  } 
 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-20">
      <div class="w-full xl:w-1/2 px-4 mb-8 xl:mb-0">
        <h2 class="text-3xl font-heading font-medium leading-10">Files from Project Example</h2>
      </div>
      <div class="w-full xl:w-auto ml-auto px-4">
        <div class="flex flex-wrap items-center">
          <div class="flex w-full sm:w-auto pl-8 pr-4 py-4 mb-3 sm:mb-0 sm:mr-3 items-center bg-white border-2 border-blue-500 rounded-2xl">
            <svg class="mr-4" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.22213 16.1334L5.21875 11.6875" stroke="#8C949F" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.82614 12.5306C13.0093 12.5306 15.5898 9.94935 15.5898 6.76528C15.5898 3.5812 13.0093 1 9.82614 1C6.64297 1 4.0625 3.5812 4.0625 6.76528C4.0625 9.94935 6.64297 12.5306 9.82614 12.5306Z" stroke="#8C949F" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <input x-model="search" class="text-sm placeholder-darkBlueGray-400 bg-transparent outline-none" type="text" placeholder="Type to search">
          </div>
          <a class="inline-block w-full sm:w-auto py-4 px-10 mb-6 sm:mb-0 sm:mr-10 leading-5 text-lg text-white font-medium tracking-tighter font-heading text-center bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 rounded-xl" href="#">Time file</a>
          <div class="flex items-center">

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 xl:-mx-8">
      <div class="w-full sm:w-1/2 lg:w-8/12 px-4 xl:px-8 mb-8 sm:mb-0">
        <div class="bg-white rounded-2xl" x-data="{ activeSlide: 1 }">
          <div class="border-b border-gray-100">
            <div class="px-8 pt-8 pb-12">
              <div class="flex items-center justify-end mb-2">
                <a class="mr-2 bg-indigo-200 p-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 1, 'bg-blueGray-200 w-1 h-1': activeSlide != 1}" href="#" x-on:click.prevent="activeSlide = 1">
                    <div :class="{'bg-indigo-600': activeSlide == 1 }" class="w-2 h-2 bg-indigo-600 rounded-full"></div>
                </a>
                <a class="mr-3 bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 2, 'bg-blueGray-200 w-1 h-1': activeSlide != 2}" href="#" x-on:click.prevent="activeSlide = 2">
                    <div :class="{'bg-indigo-600': activeSlide == 2 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
                <a class="mr-3 bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 3, 'bg-blueGray-200 w-1 h-1': activeSlide != 3}" href="#" x-on:click.prevent="activeSlide = 3">
                    <div :class="{'bg-indigo-600': activeSlide == 3 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
                <a class="bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 4, 'bg-blueGray-200 w-1 h-1': activeSlide != 4}" href="#" x-on:click.prevent="activeSlide = 4">
                    <div :class="{'bg-indigo-600': activeSlide == 4 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
              </div>
              <h2 class="mb-5 text-indigo-500 font-heading font-medium">Important</h2>
              <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="mb-8 flex transition-transform duration-500 ease-in-out">

<section class="py-8 bg-blueGray-50" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="p-7 pt-12 pb-12 h-full bg-white rounded-5xl">
      <div class="flex flex-wrap justify-between items-center px-9 mb-8">
        <div class="w-full md:w-auto mb-10 md:mb-0">
          <h3 class="text-3xl font-heading font-medium leading-10">Task overview</h3>
        </div>
        <div class="w-full md:w-auto">
          <a class="inline-flex items-center py-2 px-8 leading-7 text-white font-semibold tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">
            <span class="mr-2">Change</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97291 0.693232C7.20854 0.435589 7.58938 0.435589 7.82328 0.693232C8.05804 0.950875 8.05978 1.36714 7.82328 1.62478L4.42529 5.30677C4.19053 5.56441 3.81056 5.56441 3.57406 5.30677L0.176073 1.62478C-0.0586909 1.3681 -0.0586909 0.950875 0.176073 0.693232C0.411706 0.435589 0.792544 0.435589 1.02644 0.693232L4.00098 3.71284L6.97291 0.693232Z" fill="white"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="overflow-x-auto mb-8">
        <div class="inline-block min-w-full overflow-hidden">
          <table class="table-auto w-full">
            <thead>
              <tr>
                <th class="pl-9 pb-8 text-left">
                  <span class="text-sm text-body text-opacity-40 font-heading font-semibold uppercase">Task name</span>
                </th>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 xl:-mx-8">
      <div class="w-full sm:w-1/2 px-4 xl:px-8 mb-8 sm:mb-0">
        <div class="h-full bg-white rounded-2xl" x-data="{ activeSlide: 1 }">
          <div class="border-b border-gray-100">
            <div class="px-8 pt-8 pb-12">
              <div class="flex items-center justify-end mb-2">
                <a class="mr-2 bg-indigo-200 p-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 1, 'bg-blueGray-200 w-1 h-1': activeSlide != 1}" href="#" x-on:click.prevent="activeSlide = 1">
                    <div :class="{'bg-indigo-600': activeSlide == 1 }" class="w-2 h-2 bg-indigo-600 rounded-full"></div>
                </a>
                <a class="mr-3 bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 2, 'bg-blueGray-200 w-1 h-1': activeSlide != 2}" href="#" x-on:click.prevent="activeSlide = 2">
                    <div :class="{'bg-indigo-600': activeSlide == 2 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
                <a class="mr-3 bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 3, 'bg-blueGray-200 w-1 h-1': activeSlide != 3}" href="#" x-on:click.prevent="activeSlide = 3">
                    <div :class="{'bg-indigo-600': activeSlide == 3 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
                <a class="bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 4, 'bg-blueGray-200 w-1 h-1': activeSlide != 4}" href="#" x-on:click.prevent="activeSlide = 4">
                    <div :class="{'bg-indigo-600': activeSlide == 4 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
              </div>
              <h2 class="mb-5 text-indigo-500 font-heading font-medium">Important</h2>
              <div class="overflow-hidden">
                  <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="mb-8 flex transition-transform duration-500 ease-in-out">

<section class="py-8 bg-blueGray-50" x-data="{ showContent: false, tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="pt-14 px-8 pb-12 bg-white rounded-5xl">
      <div class="flex flex-wrap mb-8 justify-between items-center">
        <div class="w-full md:w-auto mb-10 md:mb-0">
          <h3 class="text-3xl font-heading font-medium leading-10">Sales Information</h3>
        </div>
        <div class="w-full md:w-auto">
          <div class="inline-block" :class="{'border border-blue-500 rounded-xl': $refs.tab1.textContent == tab }">
            <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="inline-block py-3 px-8 w-full md:w-auto mb-2 md:mb-0 leading-5 text-darkBlueGray-400 font-semibold tracking-tighter font-heading text-center bg-purple-50 hover:text-darkBlueGray-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Daily</a>
          </div>
          <div class="inline-block" :class="{'border border-blue-500 rounded-xl': $refs.tab2.textContent == tab }">
            <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="inline-block py-3 px-8 w-full md:w-auto mb-2 md:mb-0 leading-5 text-darkBlueGray-400 font-semibold tracking-tighter font-heading text-center bg-purple-50 hover:text-darkBlueGray-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Weekly</a>
          </div>
          <div class="inline-block" :class="{'border border-blue-500 rounded-xl': $refs.tab3.textContent == tab }">
            <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="inline-block py-3 px-8 w-full md:w-auto leading-5 text-darkBlueGray-400 font-semibold tracking-tighter font-heading text-center bg-purple-50 hover:text-darkBlueGray-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Monthly</a>
        </div>
        </div>
      </div>
      <div class="overflow-x-auto">
        <div class="inline-block w-full min-w-max overflow-hidden">
          <table class="table-auto w-full">
            <thead>
              <tr><th class="pb-8 text-sm text-body text-left text-opacity-40 font-heading font-semibold uppercase">Product name</th><th class="pb-8 text-sm text-body text-right text-opacity-40 font-heading font-semibold uppercase">Ordered</th><th class="pb-8 text-sm text-body text-right text-opacity-40 font-heading font-semibold uppercase">Remaining</th><th class="pb-8 text-sm text-body text-center text-opacity-40 font-heading font-semibold uppercase">Status</th><th class="pb-8 pr-10 text-sm text-body text-right text-opacity-40 font-heading font-semibold uppercase">Action</th></tr>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 xl:-mx-8">
      <div class="w-full sm:w-1/2 px-4 xl:px-8 mb-8 sm:mb-0">
        <div class="flex flex-col h-full bg-white rounded-2xl" x-data="{ activeSlide: 1 }">
          <div class="h-full border-b border-gray-100">
            <div class="px-8 pt-8 pb-12">
              <div class="flex items-center justify-end mb-2">
                <a class="mr-2 bg-indigo-200 p-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 1, 'bg-blueGray-200 w-1 h-1': activeSlide != 1}" href="#" x-on:click.prevent="activeSlide = 1">
                    <div :class="{'bg-indigo-600': activeSlide == 1 }" class="w-2 h-2 bg-indigo-600 rounded-full"></div>
                </a>
                <a class="mr-3 bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 2, 'bg-blueGray-200 w-1 h-1': activeSlide != 2}" href="#" x-on:click.prevent="activeSlide = 2">
                    <div :class="{'bg-indigo-600': activeSlide == 2 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
                <a class="mr-3 bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 3, 'bg-blueGray-200 w-1 h-1': activeSlide != 3}" href="#" x-on:click.prevent="activeSlide = 3">
                    <div :class="{'bg-indigo-600': activeSlide == 3 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
                <a class="bg-blueGray-200 w-1 h-1 rounded-full" :class="{'bg-indigo-200 p-1': activeSlide == 4, 'bg-blueGray-200 w-1 h-1': activeSlide != 4}" href="#" x-on:click.prevent="activeSlide = 4">
                    <div :class="{'bg-indigo-600': activeSlide == 4 }" class="w-2 h-2 bg-transparent rounded-full"></div>
                </a>
              </div>
              <h2 class="mb-5 text-indigo-500 font-heading font-medium">Important</h2>
              <div class="overflow-hidden">
                  <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="mb-8 flex transition-transform duration-500 ease-in-out">

<section class="py-8 bg-blueGray-50" x-data="{ tab: ''}" x-init="tab = $refs.nav1.textContent">
  <div class="container px-4 mx-auto">
    <div class="relative px-10 py-12 xl:py-16 xl:px-20 mb-8 sm:mb-14 bg-indigo-600 overflow-hidden rounded-3xl">
      <img class="absolute right-0 sm:right-12 md:right-24 top-1/2 transform -translate-y-1/2 scale-150 md:scale-100" src="uinel-assets/images/dashboard-content/header.png" alt="">
      <div class="relative z-10">
        <h2 class="mb-5 text-5xl md:text-7xl text-white font-heading font-semibold">Are u looging for answers?</h2>
        <p class="text-white max-w-xs font-medium">We have prepared the most frequently asked questions for you.</p>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8 sm:mb-0">
        <div class="p-10 bg-white rounded-2xl">
          <a x-on:click.prevent="tab = $refs.nav1.textContent" class="flex items-center py-3 px-9 leading-7 font-heading font-medium text-white bg-indigo-600 rounded-4xl" href="#">
            <img class="mr-8" src="uinel-assets/elements/dashboard-content/dashboard.svg" alt="">
            <span x-ref="nav1">Dashboard</span>
          </a>
          <a x-on:click.prevent="tab = $refs.nav2.textContent" class="flex items-center py-3 px-9 leading-7 font-heading font-medium rounded-4xl hover:bg-purple-50" href="#">
            <img class="mr-8" src="uinel-assets/elements/dashboard-content/users.svg" alt="">
            <span x-ref="nav2">Users</span>
          </a>
          <a x-on:click.prevent="tab = $refs.nav3.textContent" class="flex items-center py-3 px-9 leading-7 font-heading font-medium rounded-4xl hover:bg-purple-50" href="#">
            <img class="mr-8" src="uinel-assets/elements/dashboard-content/chat.svg" alt="">
            <span x-ref="nav3">Chat</span>
          </a>