Div Tables with Forms

by jasper502

HTML

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="md:table w-full md:border-collapse bg-white text-left text-sm md:text-base md:text-center rounded shadow table-responsive">
  <div class="hidden md:w-auto md:table-header-group bg-blue-50">
    <div class="border-b border-gray-300 table-row">
      <div class="table-cell p-3 text-sm font-bold uppercase">
        <a class="text-gray-700 mr-1" data-action="click->sort#toggle" href="/projects?count=10&amp;direction=desc&amp;query=alw&amp;sort=status">Status</a>
      </div>
      <div class="table-cell p-3 text-sm font-bold uppercase">
        <a class="text-gray-700 mr-1" data-action="click->sort#toggle" href="/projects?count=10&amp;direction=desc&amp;query=alw&amp;sort=name">Name <i class="fas fa-caret-up" aria-hidden="true"></i></a>
      </div>
      <div class="table-cell p-3 text-sm font-bold uppercase">
        <a class="text-gray-700 mr-1" data-action="click->sort#toggle" href="/projects?count=10&amp;direction=desc&amp;query=alw&amp;sort=state">State</a>
      </div>
      <div class="table-cell p-3 text-sm font-bold uppercase">
        <a class="text-gray-700 mr-1" data-action="click->sort#toggle" href="/projects?count=10&amp;direction=desc&amp;query=alw&amp;sort=state">Issues</a>
      </div>
      <div class="table-cell p-3 text-sm font-bold uppercase">
        <a class="text-gray-700 mr-1" data-action="click->sort#toggle" href="/projects?count=10&amp;direction=desc&amp;query=alw&amp;sort=user_id">User</a>
      </div>
      
    </div>
  </div>
  <div class="md:table-row-group divide-y divide-gray-300">
    <!-- BEGIN app/views/projects/_index.html.erb --><turbo-frame class="md:table-row md:table-row p-3 space-y-3 hover:bg-gray-100&quot; data-stream-enter-class=&quot;animate-index-in&quot; data-stream-exit-class=&quot;animate-index-out&quot;" id="index_project_234">
    <!-- BEGIN...