<!-- Auto dark mode -->
<div class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="w-full whitespace-no-wrap">
<thead>
<tr
class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b bg-gray-50 dark:bg-gray-900 dark:text-white">
<th class="px-4 py-3">Nome</th>
<th class="px-4 py-3">E-mail</th>
<th class="px-4 py-3">Telefone</th>
</tr>
</thead>
<tbody class="bg-white text-gray-700 divide-y dark:bg-gray-800 dark:text-white">
<tr class="hover:bg-gray-500">
<td class="px-4 py-3">João Silva</td>
<td class="px-4 py-3">joao.silva@gmail.com</td>
<td class="px-4 py-3">(11) 99999-9999</td>
</tr>
<tr class="hover:bg-gray-500">
<td class="px-4 py-3">Maria Souza</td>
<td class="px-4 py-3">maria.souza@hotmail.com</td>
<td class="px-4 py-3">(21) 98888-8888</td>
</tr>
<tr class="hover:bg-gray-500">
<td class="px-4 py-3">Pedro Santos</td>
<td class="px-4 py-3">pedro.santos@yahoo.com.br</td>
<td class="px-4 py-3">(31) 97777-7777</td>
</tr>
</tbody>
</table>
</div>
</div>
Last active
May 11, 2024 01:30
-
-
Save tiagofrancafernandes/5cef9fd4849fceed8025c979fec9fdb6 to your computer and use it in GitHub Desktop.
dev-tailwind css snippets
<!-- Centered items -->
<div class="flex justify-center items-center text-gray-500 pt-4 sm:justify-center sm:pt-0">
<a class="text-center" href="http://siged.local:8000/admin" target="_self">
<h4 class="px-4 text-lg text-center tracking-wider border-r border-gray-400">
Link 1
</h4>
</a>
<a class="text-center" href="#!" target="_self">
<h4 class="px-4 text-lg text-center tracking-wider border-gray-400">
Link 2
</h4>
</a>
</div><!-- auto column -->
<div class="grid items-center grid-cols-3 gap-3">
<div>01</div>
<div>02</div>
<div>03</div>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
<!-- Styles -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Figtree', 'ui-sans-serif', 'system-ui', 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji"],
}
}
}
}
</script>
</head>
<body class="antialiased">
<div class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-gray-100 selection:bg-red-500 selection:text-white">
<div class="w-full sm:w-3/4 xl:w-1/2 mx-auto p-6">
<div class="px-6 py-4 bg-white from-gray-700/50 via-transparent rounded-lg shadow-2xl shadow-gray-500/20 flex items-center focus:outline focus:outline-2 focus:outline-red-500">
<div class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-400"></span>
</div>
<div class="ml-6">
<h2 class="text-xl font-semibold text-gray-900">Application up</h2>
<p class="mt-2 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
HTTP request received.
Response successfully rendered in 167ms.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment