Tables UI Components

<section x-data="{ inc: 10, show: 10, min: 10, max: 20 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="pt-6 pb-8 bg-gray-500 rounded-xl">
      <div class="px-6">
        <h4 class="text-lg text-gray-100 font-semibold mb-6">Companies</h4>
        <div class="w-full mt-6 pb-6 overflow-x-auto">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="p-0">
                  <div class="py-3 px-6 rounded-l-xl bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">NAME</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">INDUSTRY</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">LOCATION</span>
                  </div>
                </th>

<section class="bg-gray-50 py-8 px-4">
  <table class="table-auto w-full bg-white shadow rounded">
    <thead class="border-b border-gray-100">
      <tr>
        <th class="pl-6 py-6">
          <a class="flex items-center text-xs text-gray-500" href="#">
            <p>Name</p>
            <svg class="ml-1 w-2 h-3" width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.85956 7.52666L4.99956 10.3933L2.13956 7.52666C2.01403 7.40113 1.84376 7.3306 1.66623 7.3306C1.48869 7.3306 1.31843 7.40113 1.1929 7.52666C1.06736 7.6522 0.996835 7.82246 0.996835 8C0.996835 8.17753 1.06736 8.34779 1.1929 8.47333L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17235 12.0005 5.34132 11.9308 5.46623 11.8067L8.79956 8.47333C8.86172 8.41117 8.91103 8.33738 8.94467 8.25616C8.97831 8.17495 8.99562 8.0879 8.99562 8C8.99562 7.91209 8.97831 7.82504 8.94467 7.74383C8.91103 7.66262 8.86172 7.58882 8.79956 7.52666C8.7374 7.4645 8.66361 7.4152 8.5824 7.38156C8.50118 7.34792 8.41414 7.3306 8.32623 7.3306C8.23832 7.3306 8.15128 7.34792 8.07006 7.38156C7.98885 7.4152 7.91506 7.4645 7.8529 7.52666H7.85956ZM2.13956 4.47333L4.99956 1.60666L7.85956 4.47333C7.98447 4.5975 8.15344 4.66719 8.32956 4.66719C8.50569 4.66719 8.67465 4.5975 8.79956 4.47333C8.92373 4.34842 8.99342 4.17945 8.99342 4.00333C8.99342 3.82721 8.92373 3.65824 8.79956 3.53333L5.46623 0.199997C5.40425 0.137511 5.33052 0.0879151 5.24928 0.0540694C5.16804 0.0202236 5.0809 0.00279808 4.9929 0.00279808C4.90489 0.00279808 4.81775 0.0202236 4.73651 0.0540694C4.65527 0.0879151 4.58154 0.137511 4.51956 0.199997L1.18623 3.53333C1.06158 3.65975 0.992251 3.83051 0.993501 4.00804C0.994751 4.18558 1.06648 4.35534 1.1929 4.48C1.31932 4.60465 1.49008 4.67397 1.66761 4.67272C1.84514 4.67147 2.01491 4.59975 2.13956 4.47333Z" fill="#67798E"></path>
            </svg>
          </a>
        </th>
        <th>
          <a class="flex items-center text-xs text-gray-500" href="#">
            <p>Position</p>
            <svg class="ml-1 w-2 h-3" width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.85956 7.52666L4.99956 10.3933L2.13956 7.52666C2.01403 7.40113 1.84376 7.3306 1.66623 7.3306C1.48869 7.3306 1.31843 7.40113 1.1929 7.52666C1.06736 7.6522 0.996835 7.82246 0.996835 8C0.996835 8.17753 1.06736 8.34779 1.1929 8.47333L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17235 12.0005 5.34132 11.9308 5.46623 11.8067L8.79956 8.47333C8.86172 8.41117 8.91103 8.33738 8.94467 8.25616C8.97831 8.17495 8.99562 8.0879 8.99562 8C8.99562 7.91209 8.97831 7.82504 8.94467 7.74383C8.91103 7.66262 8.86172 7.58882 8.79956 7.52666C8.7374 7.4645 8.66361 7.4152 8.5824 7.38156C8.50118 7.34792 8.41414 7.3306 8.32623 7.3306C8.23832 7.3306 8.15128 7.34792 8.07006 7.38156C7.98885 7.4152 7.91506 7.4645 7.8529 7.52666H7.85956ZM2.13956 4.47333L4.99956 1.60666L7.85956 4.47333C7.98447 4.5975 8.15344 4.66719 8.32956 4.66719C8.50569 4.66719 8.67465 4.5975 8.79956 4.47333C8.92373 4.34842 8.99342 4.17945 8.99342 4.00333C8.99342 3.82721 8.92373 3.65824 8.79956 3.53333L5.46623 0.199997C5.40425 0.137511 5.33052 0.0879151 5.24928 0.0540694C5.16804 0.0202236 5.0809 0.00279808 4.9929 0.00279808C4.90489 0.00279808 4.81775 0.0202236 4.73651 0.0540694C4.65527 0.0879151 4.58154 0.137511 4.51956 0.199997L1.18623 3.53333C1.06158 3.65975 0.992251 3.83051 0.993501 4.00804C0.994751 4.18558 1.06648 4.35534 1.1929 4.48C1.31932 4.60465 1.49008 4.67397 1.66761 4.67272C1.84514 4.67147 2.01491 4.59975 2.13956 4.47333Z" fill="#67798E"></path>
            </svg>
          </a>
        </th>
        <th>
          <a class="flex items-center text-xs text-gray-500" href="#">
            <p>Office</p>
            <svg class="ml-1 w-2 h-3" width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-8">
  <div class="container">
    <div class="bg-white rounded shadow overflow-hidden">
      <div class="pt-4 pb-5 px-6 border-bottom border-secondary-light">
        <h4 class="mb-0" >Recent Transactions</h4>
      </div>
      <div class="px-4 table-responsive">
        <table class="table mb-0 table-borderless table-striped small">
          <thead>
            <tr class="text-secondary"  >
              <th class="py-3 px-6" >Transaction ID</th>
              <th class="py-3 px-6" >Date</th>
              <th class="py-3 px-6" >E-mail</th>
              <th class="py-3 px-6" >Subscription</th>
              <th class="py-3 px-6" >Status</th>
            </tr>
          </thead>
          <tbody>
            <tr  >
              <td class="py-5 px-6" >SR2451EW32</td>
              <td class="py-5 px-6" >08.04.2021</td>
              <td class="py-5 px-6" >name@shuffle.dev</td>
              <td class="py-5 px-6" >Monthly</td>
              <td class="py-5 px-6"><span class="badge bg-success" >Completed</span></td>

<section class="section" x-data="{ showContent: false }">
  <div class="container">
    <div class="box px-0 is-clipped">
      <div class="px-5 pb-5" style="border-bottom: 1px solid #E1E4E8;">
        <h4 class="title is-size-4 mb-0">Recent Transactions</h4>
      </div>
      <div class="table-container">
        <table class="table is-striped is-fullwidth is-size-7">
          <thead>
            <tr class="has-background-white"><th class="px-6 py-3 has-text-grey">Transaction ID</th><th class="px-6 py-3 has-text-grey">Date</th><th class="px-6 py-3 has-text-grey">E-mail</th><th class="px-6 py-3 has-text-grey">Subscription</th><th class="px-6 py-3 has-text-grey">Status</th></tr>
          </thead>
          <tbody>
            <tr class="has-background-white">
              <td class="px-6 py-5 has-text-dark">SR2451EW32</td>
              <td class="px-6 py-5 has-text-dark">08.04.2021</td>
              <td class="px-6 py-5 has-text-dark">name@shuffle.dev</td>
              <td class="px-6 py-5 has-text-dark">Monthly</td>
              <td class="px-6 py-5">
                <span class="tag is-success has-text-white">Completed</span>
              </td>
            </tr>
            <tr>
              <td class="px-6 py-5 has-text-dark">SR2451EW32</td>
              <td class="px-6 py-5 has-text-dark">08.04.2021</td>

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="pt-6 bg-secondary rounded-4">
      <div class="px-6 pb-6 border-bottom border-secondary-light border-opacity-50">
        <h6 class="fs-8 fw-semibold text-light mb-6">Companies</h6>
        <div class="w-100 overflow-scroll">
          <table class="table table-borderless w-100" style="min-width: max-content;">
            <thead>
              <tr><th class="p-0 bg-transparent" scope="col">
                <div class="rounded-start-4 py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">NAME</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">INDUSTRY</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">LOCATION</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">ENROLLMENT</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="rounded-end-4 py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">LAST CONTACT</span></div>
              </th>
            </tr></thead>

import { Grid, Box, Typography, Container, TextField, Button, Link }  from '@mui/material';
import theme from '../../theme/theme';

const FileTable = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        search: {
            position: 'absolute',
            right: 16
        },
        wrapperTextField: {
            position: 'relative',
            [theme.breakpoints.up('lg')]: {
                width: theme.spacing(41.25)
            }
        },
        textField: {
            backgroundColor: theme.palette.common.white,
            fontWeight: theme.typography.fontWeightRegular,
        },
        img: {
            display: 'block'

<section class="relative py-20 2xl:py-40 bg-gray-800">
  <div class="container px-4 pb-20 mx-auto border-b border-gray-500">
    <div class="mb-14 text-center">
      <span class="text-lg text-blue-400 font-bold">Check of details</span>
      <h2 class="mt-8 text-5xl font-bold font-heading text-white">See all features</h2>
    </div>
    <div class="pt-20 border-t border-gray-500 overflow-x-auto overflow-y-hidden">
      <table class="table-auto w-full mb-10">
        <thead>
          <tr class="text-lg text-gray-200 text-left font-bold"><th class="pb-6"></th><th class="pb-6 pr-8">Feature 1</th><th class="pb-6 pr-8">Feature 2</th><th class="pb-6 pr-8">Feature 3</th><th class="pb-6 pr-8">Feature 4</th><th class="pb-6 pr-8">Feature 5</th></tr>
        </thead>
        <tbody>
          <tr class="text-xl text-white bg-gray-700">
            <td class="py-5 pl-10 text-left text-gray-200">Number of Team Members</td>
            <td>5</td>
            <td>20</td>
            <td>200+</td>
            <td>Unlimited</td>
            <td>Unlimited</td>
          </tr>
          <tr class="text-xl text-white">
            <td class="py-5 pl-10 text-left text-gray-200">Users</td>
            <td>3</td>
            <td>10</td>

<section class="pt-24 md:pt-40 pb-24 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full xl:w-1/3 px-4 mb-16 xl:mb-0">
        <div class="flex flex-col h-full items-start px-6 sm:px-12 pt-16 pb-24 bg-white rounded-2xl" x-data="{ showContent: false }">
          <div class="w-full mb-16 pb-2 border-b border-gray-200">
            <h4 class="font-heading text-4xl">Files</h4>
          </div>
          <div class="flex mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
            <span class="text-lg">All inspirations</span>
          </div>
          <div class="flex mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
            <span class="text-lg">Bathroom design</span>
          </div>
          <div class="flex items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
            <span class="text-lg">Songs</span>
          </div>
          <div :class="{ 'hidden': !showContent, 'block': showContent }" class="flex hidden mt-14 mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
            <span class="text-lg">Travel Adventures</span>
          </div>

<section class="position-relative bg-dark py-24 py-md-40">
  <div class="container pb-24 border-bottom">
    <div class="text-center pb-16 mb-16 border-bottom"><span class="h6 text-primary" >Check of details</span>
      <h2 class="h3 text-white mt-8" >See all features</h2>
    </div>
    <div class="table-responsive mb-20">
      <table class="table table-dark table-borderless" style="min-width: max-content;">
        <thead>
          <tr>
            <th class="pb-12 text-secondary-light"></th>
            <th class="pb-12 text-secondary-light" >Feature 1</th>
            <th class="pb-12 text-secondary-light" >Feature 2</th>
            <th class="pb-12 text-secondary-light" >Feature 3</th>
            <th class="pb-12 text-secondary-light" >Feature 4</th>
            <th class="pb-12 text-secondary-light" >Feature 5</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="ps-14 py-4 pe-6 bg-secondary rounded-start" >Number of Team Members</td>
            <td class="py-4 bg-secondary" >5</td>
            <td class="py-4 bg-secondary" >20</td>
            <td class="py-4 bg-secondary" >200+</td>
            <td class="py-4 bg-secondary" >Unlimited</td>

<section class="position-relative py-24 pt-lg-40 bg-light overflow-hidden">
  <div class="container">
    <div class="row mb-20">
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="position-relative h-100 pt-20 pb-52 px-8 px-md-12 bg-white rounded">
          <div class="mb-16 pb-5 border-bottom">
            <h4 class="display-6 mb-0" >Files</h4>
          </div>
          <div class="d-flex mb-14 align-items-center"><img class="img-fluid" src="wrexa-assets/elements/folder1.svg" alt=""/><span class="ms-8" >All inspirations</span></div>
          <div class="d-flex mb-14 align-items-center"><img class="img-fluid" src="wrexa-assets/elements/folder2.svg" alt=""/><span class="ms-8" >Bathroom design</span></div>
          <div class="d-flex align-items-center"><img class="img-fluid" src="wrexa-assets/elements/folder3.svg" alt=""/><span class="ms-8" >Songs</span></div><a class="position-absolute bottom-0 start-0 ms-12 mb-24 btn mt-auto btn-primary" href="#" >All files</a>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="pt-20 pb-24 px-8 px-md-12 bg-white rounded">
          <div class="d-sm-flex align-items-center justify-content-between mb-14 pb-5 border-bottom">
            <h4 class="display-6 mb-4 mb-md-0" >Teamwork</h4>
            <select class="form-select rounded-1 py-1 ps-8" aria-label="New select example" style="max-width: max-content;">
              <option selected="">New</option>
              <option value="1">Old</option>
            </select>
          </div>
          <div class="table-responsive pb-6 px-4 w-100 mb-16" style="width: min-content;">
            <table class="table table-borderless mb-0" style="min-width: max-content;">

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 mx-auto bg-white border border-coolGray-100 rounded-md shadow-dashboard">
      <div class="flex flex-wrap items-center justify-between -m-2 mb-6">
        <div class="w-auto p-2">
          <p class="font-semibold text-lg text-coolGray-900">Schedule</p>
        </div>
        <div class="w-auto p-2">
          <div class="flex flex-wrap -m-2">
            <div class="w-auto p-2">
              <button class="px-3 py-1 text-xs font-medium text-darkCoolGray-500 bg-darkCoolGray-100 rounded-full">Today</button>
            </div>
            <div class="w-auto p-2">
              <button class="px-3 py-1 text-xs font-medium text-darkCoolGray-500 bg-transparent rounded-full">Tomorrow</button>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -m-2">
        <div class="w-full p-2">
          <h3 class="mb-1 font-medium text-lg text-coolGray-900">Group meeting</h3>
          <div class="flex flex-wrap items-center pb-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">

<section class="py-24 2xl:py-44 font-normal bg-white">
  <div class="container px-4 mx-auto">
    <div class="mb-28">
      <span class="mb-9 block font-medium uppercase tracking-widest text-xs text-gray-300 leading-4">More data</span>
      <h2 class="font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Workable</h2>
    </div>
    <div class="overflow-x-auto">
      <img class="ml-10" src="uinel-assets/elements/tables/border-top-purple.png" alt="">
      <div class="inline-block min-w-full border border-gray-100 overflow-hidden rounded-5xl">
        <table class="table-auto w-full">
          <thead>
            <tr class="border-b border-gray-100">
              <th class="min-w-max flex items-center pr-24 pl-16 lg:pl-32 h-20 font-semibold uppercase text-left text-lg bg-gray-50">
                <div class="flex">
                  <input class="mr-9 border-none form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                </div>
                <span>Our plans and pricing</span>
              </th>
              <th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 1</th><th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 2</th><th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 3</th><th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 4</th><th class="pr-16 lg:pr-32 font-semibold uppercase h-20 text-lg bg-gray-50">Feature 5</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b border-gray-100">
              <td class="relative pl-16 lg:pl-32 h-24 font-medium text-lg">

<section class="section py-24 has-background-light-light">
  <div class="container">
    <div class="has-mw-6xl mx-auto">
      <div class="px-4 px-10-tablet py-12 has-background-white" style="box-shadow: 0px 48px 86px rgb(0 0 0 / 5%) !important">
        <div class="pb-4" style="overflow-x: scroll;">
          <table class="table is-striped is-fullwidth">
            <thead>
              <tr><th scope="col"></th><th scope="col"><small class="has-text-weight-normal">Feature 1</small></th><th scope="col"><small class="has-text-weight-normal">Feature 2</small></th><th scope="col"><small class="has-text-weight-normal">Feature 3</small></th><th scope="col"><small class="has-text-weight-normal">Feature 4</small></th><th scope="col"><small class="has-text-weight-normal">Feature 5</small></th></tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"><small class="has-text-weight-normal">Number of Team Members</small></th>
                <td><small>5</small></td>
                <td><small>20</small></td>
                <td><small>200+</small></td>
                <td><small>Unlimited</small></td>
                <td><small>Unlimited</small></td>
              </tr>
              <tr>
                <th scope="row"><small class="has-text-weight-normal">Users</small></th>
                <td><small>10</small></td>
                <td><small>45</small></td>
                <td><small>500+</small></td>
                <td><small>100+</small></td>

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="py-12 px-4 md:px-10 bg-white shadow-lg">
        <div class="px-4 pb-2 overflow-x-auto">
          <table class="table-auto w-full text-left min-w-max">
            <thead>
              <tr>
                <th scope="col"></th>
                <th scope="col"><small class="font-normal" >Feature 1</small></th>
                <th scope="col"><small class="font-normal" >Feature 2</small></th>
                <th scope="col"><small class="font-normal" >Feature 3</small></th>
                <th scope="col"><small class="font-normal" >Feature 4</small></th>
                <th scope="col"><small class="font-normal" >Feature 5</small></th>
              </tr>
            </thead>
            <tbody>
              <tr class="bg-gray-100">
                <th class="pl-2 py-3" scope="row"><small class="font-normal" >Number of Team Members</small></th>
                <td class="py-3"><small class="font-normal" >5</small></td>
                <td class="py-3"><small class="font-normal" >20</small></td>
                <td class="py-3"><small class="font-normal" >200+</small></td>
                <td class="py-3"><small class="font-normal" >Unlimited</small></td>
                <td class="pr-2 py-3"><small class="font-normal" >Unlimited</small></td>

<section class="py-28 bg-white">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="py-12 px-4 px-md-10 bg-white shadow-lg">
        <div class="table-responsive">
          <table class="table table-striped table-borderless">
            <thead>
              <tr>
                <th scope="col"></th>
                <th scope="col"><small class="fw-normal" >Feature 1</small></th>
                <th scope="col"><small class="fw-normal" >Feature 2</small></th>
                <th scope="col"><small class="fw-normal" >Feature 3</small></th>
                <th scope="col"><small class="fw-normal" >Feature 4</small></th>
                <th scope="col"><small class="fw-normal" >Feature 5</small></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"><small class="fw-normal" >Number of Team Members</small></th>
                <td><small >5</small></td>
                <td><small >20</small></td>
                <td><small >200+</small></td>
                <td><small >Unlimited</small></td>
                <td><small >Unlimited</small></td>

<section class="section">
  <div class="container">
    <div class="box">
      <div class="table-container">
        <table class="table is-fullwidth is-striped">
          <thead>
            <tr><th>Package</th><th>Feature 1</th><th>Feature 2</th><th>Feature 3</th><th>Feature 4</th><th>Feature 5</th></tr>
          </thead>
          <tbody>
            <tr>
              <td class="py-4">Example for Package 1</td>
              <td class="py-4">
                <svg class="image is-24x24 has-text-danger" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </td>
              <td class="py-4">
                <svg class="image is-24x24 has-text-danger" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </td>
              <td class="py-4">
                <svg class="image is-24x24 has-text-danger" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>

<section class="py-5 bg-light">
  <div class="container">
    <div class="bg-white px-4 py-3 rounded shadow-sm">
      <table class="table table-responsive table-borderless table-striped">
        <thead>
          <tr><th>Package</th><th>Feature 1</th><th>Feature 2</th><th>Feature 3</th><th>Feature 4</th><th>Feature 5</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>Example for Package 1</td>
            <td class="text-success">
              <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="text-success">
              <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="text-success">
              <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>

<section class="py-20 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="bg-white px-6 py-4 rounded shadow">
      <table class="w-full">
        <thead>
          <tr class="text-xs"><th class="pb-4 font-normal text-left">Package</th><th class="pb-4 font-normal">Feature 1</th><th class="pb-4 font-normal">Feature 2</th><th class="pb-4 font-normal">Feature 3</th><th class="pb-4 font-normal">Feature 4</th><th class="pb-4 font-normal">Feature 5</th></tr>
        </thead>
        <tbody>
          <tr class="bg-blueGray-100">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 1</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>

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

<section class="py-20 md:py-40 bg-black">
  <div class="container px-4 mx-auto">
    <h1 class="font-heading text-6xl sm:text-7xl text-white font-semibold mb-24">Looking for team plans?</h1>
    <div class="w-full pb-6 px-1 bg-gray-900 rounded-lg overflow-x-auto">
      <table class="w-full min-w-max">
        <thead>
          <tr>
            <th class="p-0">
              <div class="h-20 flex items-center pl-12 pr-6">
                <span class="text-xl text-white font-semibold">Learn a new skills</span>
              </div>
            </th>
            <th class="p-0">
              <div class="h-20 flex items-center justify-center">
                <span class="text-xs text-gray-300">Free</span>
              </div>
            </th>
            <th class="p-0">
              <div class="h-20 flex items-center justify-center">
                <span class="text-xs text-gray-300">LOCATION</span>
              </div>
            </th>
            <th class="p-0">
              <div class="h-20 flex items-center justify-center">