CODE EXAMPLE FOR CSS

Table taildwind

//with hover efect

<div class="flex flex-col">
    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
        <div class="overflow-hidden">
          <table class="min-w-full">
            <thead class="bg-white border-b">
              <tr>
                <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
                  #ID
                </th>
                <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
                  Título
                </th>
                <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
                  Contenido
                </th>
              </tr>
            </thead>
            <tbody>
              @foreach ($posts as $post)
              <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">

                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                  {{ $post->id }}
                </td>

                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                  {{ $post->title }}
                </td>

                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                  {{ $post->content }}
                </td>

              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>