<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex flex-col"> <div class="flex flex-1"> <nav class="bg-white shadow-lg w-64"> <div class="p-4"> <h2 class="text-xl font-bold">Menu</h2> <ul class="mt-4"> <li><a href="#" class="block py-2 text-gray-700 hover:bg-gray-200">Home</a></li> <li><a href="#" class="block py-2 text-gray-700 hover:bg-gray-200">Empresas</a></li> <li><a href="#" class="block py-2 text-gray-700 hover:bg-gray-200">Configurações</a></li> </ul> </div> </nav> <div class="flex-1 p-6"> <div class="bg-white shadow-lg rounded-lg p-6"> <div class="flex items-center justify-between mb-4"> <h1 class="text-2xl font-bold">Empresas</h1> <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400 transition-all duration-300 ease-in-out">Adicionar</button> </div> <div class="overflow-x-auto"> <table class="min-w-full bg-white"> <thead> <tr class="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal"> <th class="py-3 px-6 text-left">Nome Comercial</th> <th class="py-3 px-6 text-left">Rua</th> <th class="py-3 px-6 text-left">Número</th> <th class="py-3 px-6 text-left">Complemento</th> <th class="py-3 px-6 text-left">Bairro</th> <th class="py-3 px-6 text-left">CEP</th> <th class="py-3 px-6 text-left">Cidade</th> <th class="py-3 px-6 text-left">Estado</th> <th class="py-3 px-6 text-left">Editar</th> <th class="py-3 px-6 text-left">Desativar</th> </tr> </thead> <tbody class="text-gray-600 text-sm font-light"> <tr class="border-b border-gray-200 hover:bg-gray-100"> <td class="py-3 px-6">Empresa A</td> <td class="py-3 px-6">Rua A</td> <td class="py-3 px-6">123</td> <td class="py-3 px-6">Apto 1</td> <td class="py-3 px-6">Bairro A</td> <td class="py-3 px-6">12345-678</td> <td class="py-3 px-6">Cidade A</td> <td class="py-3 px-6">Estado A</td> <td class="py-3 px-6"><button class="text-blue-500 hover:underline">Editar</button></td> <td class="py-3 px-6"><button class="text-red-500 hover:underline">Desativar</button></td> </tr> <tr class="border-b border-gray-200 hover:bg-gray-100"> <td class="py-3 px-6">Empresa B</td> <td class="py-3 px-6">Rua B</td> <td class="py-3 px-6">456</td> <td class="py-3 px-6">Apto 2</td> <td class="py-3 px-6">Bairro B</td> <td class="py-3 px-6">23456-789</td> <td class="py-3 px-6">Cidade B</td> <td class="py-3 px-6">Estado B</td> <td class="py-3 px-6"><button class="text-blue-500 hover:underline">Editar</button></td> <td class="py-3 px-6"><button class="text-red-500 hover:underline">Desativar</button></td> </tr> <tr class="border-b border-gray-200 hover:bg-gray-100"> <td class="py-3 px-6">Empresa C</td> <td class="py-3 px-6">Rua C</td> <td class="py-3 px-6">789</td> <td class="py-3 px-6">Apto 3</td> <td class="py-3 px-6">Bairro C</td> <td class="py-3 px-6">34567-890</td> <td class="py-3 px-6">Cidade C</td> <td class="py-3 px-6">Estado C</td> <td class="py-3 px-6"><button class="text-blue-500 hover:underline">Editar</button></td> <td class="py-3 px-6"><button class="text-red-500 hover:underline">Desativar</button></td> </tr> </tbody> </table> </div> </div> </div> </div> </body>