Modificar el fitxer C:\Windows\System32\drivers\etc\hosts
#--------------------------------------------------------------------
#php/bg-gray-100
#--------------------------------------------------------------------
127.0.0.1 localhost
::1 localhost
#--------------------------------------------------------------------
#codeigniter/bg-red-100
#--------------------------------------------------------------------
127.0.0.1 ci4admin.test
127.0.0.1 autonomos.test
127.0.0.1 ci4kickoff.test
#--------------------------------------------------------------------
#laravel/bg-yellow-100
#--------------------------------------------------------------------
127.0.0.1 administracio.test
127.0.0.1 zenblogl11.test
127.0.0.1 yajra.test
127.0.0.1 diario_ventas.test
127.0.0.1 puigba_beauty.test
#--------------------------------------------------------------------
#php/bg-gray-100
#--------------------------------------------------------------------
127.0.0.1 synology.test
#--------------------------------------------------------------------
# wordpress/bg-blue-100
#--------------------------------------------------------------------
127.0.0.1 wpautonomos.test
127.0.0.1 wptw.test
Utilitzo aques arxiu al navbar_devdojo en tailwind3
<header x-data="{
mobileMenuOpen: false,
scrolled: false,
showOverlay: false,
topOffset: '5',
evaluateScrollPosition(){
if(window.pageYOffset > this.topOffset){
this.scrolled = true;
} else {
this.scrolled = false;
}
}
}" x-init="
window.addEventListener('resize', function() {
if(window.innerWidth > 768) {
mobileMenuOpen = false;
}
});
$watch('mobileMenuOpen', function(value){
if(value){ document.body.classList.add('overflow-hidden'); } else { document.body.classList.remove('overflow-hidden'); }
});
evaluateScrollPosition();
window.addEventListener('scroll', function() {
evaluateScrollPosition();
})
" :class="{ 'border-gray-200/60 bg-white/90 border-b backdrop-blur-lg' : scrolled, 'border-transparent border-b bg-transparent translate-y-0' : !scrolled }" class="box-content sticky top-0 z-50 w-full h-24 border-transparent border-b bg-transparent translate-y-0">
<div x-show="showOverlay" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="absolute inset-0 w-full h-screen pt-24" style="display: none;">
<div class="w-screen h-full bg-black/50"></div>
</div>
<div class="px-7 mx-auto max-w-7xl md:px-12 xl:px-20">
<div class="z-30 flex items-center justify-between h-24 md:space-x-8">
<div class="z-20 flex items-center justify-between w-full md:w-auto">
<div class="relative z-20 inline-flex">
<a href="/" class="flex items-center justify-center space-x-3 font-bold text-zinc-900">
<svg xmlns="http://www.w3.org/2000/svg" width="23.82px" height="24.px" viewBox="0 0 256 258"><g fill="none" fill-rule="evenodd"><path fill="#fb7a24" d="M127.929.002Q177.77.002 227.61 0c4.17 0 8.3.362 12.301 1.582c8.675 2.644 13.268 8.865 15.068 17.438c.715 3.4.918 6.865.925 10.33c.053 23.27.092 46.542.094 69.814c.002 42.384.007 84.768-.08 127.151c-.012 5.933-.328 11.931-3.257 17.336c-3.249 5.994-7.697 10.738-14.45 12.824c-1.22.377-2.494.806-3.745.806c-2.882.002-5.687.716-8.56.716c-65.067-.005-130.133.033-195.2-.07c-5.292-.01-10.67-.395-15.697-2.548c-1-.43-2.01-.79-2.89-1.46c-6.4-4.877-10.746-10.96-11.678-19.191c-.335-2.968-.442-5.92-.442-8.889c.01-65.952.016-131.904.05-197.856c.003-3.826.042-7.718 1.219-11.38C4.403 6.846 11.261 1.519 21.427.437C23.79.185 26.173.022 28.547.02C61.672-.007 94.801.002 127.928.002"/><path fill="#fff" d="M128.775 164.113c-.727 4.454-1.238 8.48-2.838 12.19c-7.49 17.384-20.256 27.977-39.394 30.086c-22.621 2.492-43.515-11.47-49.797-33.154c-2.277-7.858-2.049-15.869-1.223-23.867c.881-8.546 3.399-16.65 7.33-24.296c.563-1.093.552-1.918-.152-2.977c-6.036-9.078-8.378-19.107-7.528-29.932c.455-5.786 1.86-11.32 4.483-16.504c7.689-15.185 24.57-28.072 47.179-25.932c19.88 1.88 38.293 19.029 41.167 38.315c.145.968.417 1.918.735 3.346c.476-2.586.82-4.72 1.265-6.834c3.703-17.521 20.854-35.855 45.164-36.082c24.64-.228 42.887 19.097 46.33 37.045c1.455 7.585 1.202 15.163.002 22.738a81 81 0 0 1-6.672 21.775c-.716 1.529-.642 2.63.275 4.05c5.307 8.224 7.649 17.252 7.349 27.056c-.628 20.457-15.097 38.802-35.002 43.6c-27.79 6.697-49.093-9.923-56.262-30.031c-1.17-3.273-1.723-6.69-2.41-10.592m50.489-35.94c.297-1.157 1.193-1.85 1.837-2.706c6.968-9.26 10.633-19.603 9.815-31.25c-.596-8.5-7.587-14.488-16.05-14.171c-8.469.317-14.85 6.848-14.97 15.322c-.009.694.033 1.389-.01 2.078c-.583 9.031-5.566 13.978-13.117 14.53c-1.379.101-2.762.224-4.143.228c-9.8.022-19.599.018-29.4.009c-4.28-.004-8.524.462-12.6 1.72c-19.027 5.87-30.122 18.882-33.796 38.275c-.728 3.837-1.383 7.819-.125 11.76c1.805 5.653 5.17 9.857 11.126 11.263c6.173 1.457 11.55-.155 15.822-5.004c2.761-3.135 3.632-6.86 3.838-10.948c.534-10.515 6.26-15.771 15.81-15.692c14.649.122 29.3.026 43.951.037c2.6.001 2.624.036 2.637 2.608c.025 4.75-.121 9.507.062 14.252c.298 7.747 7.114 14.186 15.016 14.413c8.148.233 15.411-5.794 15.942-13.661c.458-6.81.429-13.661-.018-20.476c-.346-5.275-3.2-9.035-8.036-11.217c-1.16-.522-2.38-.913-3.591-1.37m-91.832-15.984c3.151 0 5.723-.029 8.293.013c1.274.02 1.746-.528 1.736-1.777c-.042-4.943.213-9.902-.102-14.827c-.416-6.497-3.871-11.194-9.92-13.563c-6.202-2.429-11.878-1.043-16.678 3.538c-4.821 4.603-5.464 10.232-3.777 16.392c1.55 5.662 5.21 8.878 10.968 9.85c3.344.563 6.707.293 9.48.374"/></g></svg>
</a>
</div>
<div class="flex justify-end flex-grow md:hidden">
<button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="inline-flex items-center justify-center p-2 transition duration-150 ease-in-out rounded-full text-zinc-400 hover:text-zinc-500 hover:bg-zinc-100">
<svg x-show="!mobileMenuOpen" class="w-6 h-6" 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="M4 8h16M4 16h16"></path></svg>
<svg x-show="mobileMenuOpen" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="display: none;"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg>
</button>
</div>
</div>
<nav :class="{ 'hidden' : !mobileMenuOpen, 'block md:relative absolute top-0 left-0 md:w-auto w-screen md:h-auto h-screen pointer-events-none md:z-10 z-10' : mobileMenuOpen }" class="h-full md:flex hidden">
<ul :class="{ 'hidden md:flex' : !mobileMenuOpen, 'flex flex-col absolute md:relative md:w-auto w-screen h-full md:h-full md:overflow-auto overflow-scroll md:pt-0 mt-24 md:pb-0 pb-48 bg-white md:bg-transparent' : mobileMenuOpen }" id="menu" class="items-stretch justify-start flex-1 w-full ml-0 border-t border-gray-100 pointer-events-auto md:items-center md:justify-center gap-x-8 md:border-t-0 md:flex-row hidden md:flex">
<li x-data="{ open: false }" @mouseenter="showOverlay=true" @mouseleave="showOverlay=false" class="z-30 flex flex-col items-start h-auto border-b border-gray-100 md:h-full md:border-b-0 group md:flex-row md:items-center">
<a href="#_" x-on:click="open=!open" class="flex items-center w-full h-16 gap-1 text-sm font-semibold text-gray-700 transition duration-300 hover:bg-gray-100 md:hover:bg-transparent px-7 md:h-full md:px-0 md:w-auto hover:text-gray-900">
<span>Pagines</span>
<svg :class="{ 'group-hover:-rotate-180' : !mobileMenuOpen, '-rotate-180' : mobileMenuOpen && open }" class="w-5 h-5 transition-all duration-300 ease-out group-hover:-rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
<div :class="{ 'hidden md:block opacity-0 invisible md:absolute' : !open, 'md:invisible md:opacity-0 md:hidden md:absolute' : open }" class="top-0 left-0 w-screen space-y-3 transition-transform duration-300 ease-out bg-white border-t border-b border-gray-100 md:shadow-md md:-translate-y-2 md:mt-24 md:block md:group-hover:block md:group-hover:visible md:group-hover:opacity-100 md:group-hover:translate-y-0 hidden opacity-0 invisible md:absolute">
<ul class="flex flex-col justify-between mx-auto max-w-7xl md:flex-row md:px-12">
<div class="flex flex-col w-full border-l border-r divide-x md:flex-row divide-zinc-100 border-zinc-100">
<?php
$directory = __DIR__;
$phpFiles = array_filter(glob($directory . '/*.php'), function ($file) {
return !str_starts_with(basename($file), 'navbar') && !str_starts_with(basename($file), 'post_detail') && !str_starts_with(basename($file), 'footer');
});
$chunks = array_chunk($phpFiles, ceil(count($phpFiles) / 3));
foreach ($chunks as $chunk) {
echo '<div class="w-auto divide-y divide-zinc-100">';
foreach ($chunk as $file) {
$fileName = basename($file);
echo '<a href="' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '" class="block text-sm p-7 hover:bg-neutral-100 group">';
echo '<span class="block mb-1 font-medium text-black">' . htmlspecialchars($fileName, ENT_QUOTES, 'UTF-8') . '</span>';
echo '<span class="font-light leading-5 text-gray-500">Hem llegit el directori htdocs de xampp portan tos els arxius excepte els navbar, post_detail i footer.</span>';
echo '</a>';
}
echo '</div>';
}
?>
</div>
</ul>
</div>
</li>
<li x-data="{ open: false }" @mouseenter="showOverlay=true" @mouseleave="showOverlay=false" class="z-30 flex flex-col items-start h-auto border-b border-gray-100 md:h-full md:border-b-0 group md:flex-row md:items-center">
<a href="#_" x-on:click="open=!open" class="flex items-center w-full h-16 gap-1 text-sm font-semibold text-gray-700 transition duration-300 hover:bg-gray-100 md:hover:bg-transparent px-7 md:h-full md:px-0 md:w-auto hover:text-gray-900">
<span>Projectes</span>
<svg :class="{ 'group-hover:-rotate-180' : !mobileMenuOpen, '-rotate-180' : mobileMenuOpen && open }" class="w-5 h-5 transition-all duration-300 ease-out group-hover:-rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
<div :class="{ 'hidden md:block opacity-0 invisible md:absolute' : !open, 'md:invisible md:opacity-0 md:hidden md:absolute' : open }" class="top-0 left-0 w-screen space-y-3 transition-transform duration-300 ease-out bg-white border-t border-b border-gray-100 md:shadow-md md:-translate-y-2 md:mt-24 md:block md:group-hover:block md:group-hover:visible md:group-hover:opacity-100 md:group-hover:translate-y-0 hidden opacity-0 invisible md:absolute">
<ul class="flex flex-col justify-between mx-auto max-w-7xl md:flex-row md:px-12">
<div class="flex flex-col w-full border-l border-r divide-x md:flex-row divide-zinc-100 border-zinc-100">
<?php
$hostsFile = 'C:\Windows\System32\drivers\etc\hosts';
if (file_exists($hostsFile)) {
$lines = file($hostsFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
$validHosts = [];
$currentBg = "bg-white"; // Valor predeterminado para el fondo
$currentComment = ""; // Guardar el comentario actual
foreach ($lines as $line) {
$line = trim($line);
// Detectar comentarios que especifican el color de fondo
if (strpos($line, '#') === 0) {
if (preg_match('/#([^\/]+)\/(bg-[a-zA-Z0-9-]+)/', $line, $matches)) {
$currentComment = trim($matches[1]); // Extraer el comentario
$currentBg = $matches[2]; // Extraer el color de fondo
}
continue;
}
// Procesar líneas válidas de hosts
if (!empty($line) && strpos($line, '#') !== 0) {
$parts = preg_split('/\s+/', $line);
if (isset($parts[1])) {
$validHosts[] = ['domain' => $parts[1], 'bg' => $currentBg, 'comment' => $currentComment];
}
}
}
// Dividir en columnas (en este caso, 3 columnas)
$chunks = array_chunk($validHosts, ceil(count($validHosts) / 3));
foreach ($chunks as $chunk) {
echo '<div class="w-auto divide-y divide-zinc-100">';
foreach ($chunk as $host) {
echo '<a href="http://' . htmlspecialchars($host['domain'], ENT_QUOTES, 'UTF-8') . '" class="block text-sm p-7 hover:bg-neutral-100 group ' . htmlspecialchars($host['bg'], ENT_QUOTES, 'UTF-8') . '">';
echo '<span class="block mb-1 font-medium text-black">' . htmlspecialchars($host['domain'], ENT_QUOTES, 'UTF-8') . '</span>';
echo '<span class="font-light leading-5 text-gray-500">' . htmlspecialchars($host['comment'], ENT_QUOTES, 'UTF-8') . '</span>';
echo ' - segons hem llegit a l\'arxiu C:\Windows\System32\drivers\etc\hosts.</a>';
}
echo '</div>';
}
} else {
echo '<div class="p-4 text-gray-500">Archivo hosts no encontrado.</div>';
}
?>
</div>
</ul>
</div>
</li>
<li x-data="{ open: false }" @mouseenter="showOverlay=true" @mouseleave="showOverlay=false" class="z-30 flex flex-col items-start h-auto border-b border-gray-100 md:h-full md:border-b-0 group md:flex-row md:items-center">
<a href="#_" x-on:click="open=!open" class="flex items-center w-full h-16 gap-1 text-sm font-semibold text-gray-700 transition duration-300 hover:bg-gray-100 md:hover:bg-transparent px-7 md:h-full md:px-0 md:w-auto hover:text-gray-900">
<span>Eines servidor</span>
<svg :class="{ 'group-hover:-rotate-180' : !mobileMenuOpen, '-rotate-180' : mobileMenuOpen && open }" class="w-5 h-5 transition-all duration-300 ease-out group-hover:-rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
<div :class="{ 'hidden md:block opacity-0 invisible md:absolute' : !open, 'md:invisible md:opacity-0 md:hidden md:absolute' : open }" class="top-0 left-0 w-screen space-y-3 transition-transform duration-300 ease-out bg-white border-t border-b border-gray-100 md:shadow-md md:-translate-y-2 md:mt-24 md:block md:group-hover:block md:group-hover:visible md:group-hover:opacity-100 md:group-hover:translate-y-0 hidden opacity-0 invisible md:absolute">
<ul class="flex flex-col justify-between mx-auto max-w-7xl md:flex-row md:px-12">
<div class="flex flex-col w-full border-l border-r divide-x md:flex-row divide-zinc-100 border-zinc-100">
<?php
// Conexión a la base de datos
$servername = "localhost";
$username = "joan";
$password = "queMm88/g62123";
$dbname = "postslar11";
$conn = new mysqli($servername, $username, $password, $dbname);
// Comprobar conexión
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Consulta SQL
$sql = "SELECT * FROM `posts` WHERE category_id = 4 ORDER BY title ASC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Dividimos los resultados en tres columnas
$columns = array_chunk($result->fetch_all(MYSQLI_ASSOC), ceil($result->num_rows / 3));
foreach ($columns as $column) {
echo '<div class="w-auto divide-y divide-zinc-100">';
foreach ($column as $row) {
echo '<a href="' . htmlspecialchars($row['url'], ENT_QUOTES, 'UTF-8') . '" target="_blank" class="block text-sm p-7 hover:bg-neutral-100 group">';
echo '<div class="flex items-start gap-4">';
echo '<img src="img/' . htmlspecialchars($row['img'], ENT_QUOTES, 'UTF-8') . '" alt="Post Image" class="w-8 h-8 flex-shrink-0">';
echo '<div>';
echo '<span class="block font-medium text-black">' . htmlspecialchars($row['title'], ENT_QUOTES, 'UTF-8') . '</span>';
echo '<span class="block font-light leading-5 text-gray-500">' . htmlspecialchars($row['excerpt'], ENT_QUOTES, 'UTF-8') . '</span>';
echo '</div>';
echo '</div>';
echo '</a>';
}
echo '</div>';
}
} else {
echo '<div class="p-4 text-gray-500">No hay resultados disponibles.</div>';
}
// Cerrar conexión
$conn->close();
?>
</div>
</ul>
</div>
</li>
<li x-data="{ open: false }" @mouseenter="showOverlay=true" @mouseleave="showOverlay=false" class="z-30 flex flex-col items-start h-auto border-b border-gray-100 md:h-full md:border-b-0 group md:flex-row md:items-center">
<a href="#_" x-on:click="open=!open" class="flex items-center w-full h-16 gap-1 text-sm font-semibold text-gray-700 transition duration-300 hover:bg-gray-100 md:hover:bg-transparent px-7 md:h-full md:px-0 md:w-auto hover:text-gray-900">
<span class="">Resources</span>
<svg :class="{ 'group-hover:-rotate-180' : !mobileMenuOpen, '-rotate-180' : mobileMenuOpen && open }" class="w-5 h-5 transition-all duration-300 ease-out group-hover:-rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" class=""></path></svg>
</a>
<div :class="{ 'hidden md:block opacity-0 invisible md:absolute' : !open, 'md:invisible md:opacity-0 md:hidden md:absolute' : open }" class="top-0 left-0 w-screen space-y-3 transition-transform duration-300 ease-out bg-white border-t border-b border-gray-100 md:shadow-md md:-translate-y-2 md:mt-24 md:block md:group-hover:block md:group-hover:visible md:group-hover:opacity-100 md:group-hover:translate-y-0 hidden opacity-0 invisible md:absolute">
<ul class="flex flex-col justify-between mx-auto max-w-7xl md:flex-row md:px-12">
<div class="flex flex-col w-full border-l border-r divide-x md:flex-row divide-zinc-100 border-zinc-100">
<div class="w-auto divide-y divide-zinc-100">
<a href="#_" onclick="event.preventDefault(); new FilamentNotification().title('Modify this button in your theme folder').icon('heroicon-o-pencil-square').iconColor('info').send()" class="block text-sm p-7 hover:bg-neutral-100 group">
<span class="block mb-1 font-medium text-black">Authentication</span>
<span class="block font-light leading-5 opacity-50">Configure the login, register, and forgot password for your app</span>
</a>
<a href="#_" onclick="event.preventDefault(); new FilamentNotification().title('Modify this button in your theme folder').icon('heroicon-o-pencil-square').iconColor('info').send()" class="block text-sm p-7 hover:bg-neutral-100 group">
<span class="block mb-1 font-medium text-black">Roles and Permissions</span>
<span class="block leading-5 opacity-50">We utilize the bullet-proof Spatie Permissions package</span>
</a>
</div>
<div class="w-auto divide-y divide-zinc-100">
<a href="#_" onclick="event.preventDefault(); new FilamentNotification().title('Modify this button in your theme folder').icon('heroicon-o-pencil-square').iconColor('info').send()" class="block text-sm p-7 hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Posts and Pages</span>
<span class="block font-light leading-5 opacity-50">Easily write blog articles and create pages for your application</span>
</a>
<a href="#_" onclick="event.preventDefault(); new FilamentNotification().title('Modify this button in your theme folder').icon('heroicon-o-pencil-square').iconColor('info').send()" class="block text-sm p-7 hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Themes</span>
<span class="block leading-5 opacity-50">Kick-start your app with a pre-built theme or create your own</span>
</a>
</div>
<div class="w-auto divide-y divide-zinc-100">
<a href="#_" onclick="event.preventDefault(); new FilamentNotification().title('Modify this button in your theme folder').icon('heroicon-o-pencil-square').iconColor('info').send()" class="block text-sm p-7 hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Settings and More</span>
<span class="block leading-5 opacity-50">Easily create and update app settings. And so much more</span>
</a>
<a href="#_" onclick="event.preventDefault(); new FilamentNotification().title('Modify this button in your theme folder').icon('heroicon-o-pencil-square').iconColor('info').send()" class="block text-sm p-7 hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black">Subscriptions</span>
<span class="block leading-5 opacity-50">Integration payments and let users subscribe to a plan</span>
</a>
</div>
</div>
</ul>
</div>
</li>
<li class="flex-shrink-0 h-16 border-b border-gray-100 md:border-b-0 md:h-full">
<a href="https://wave.devdojo.com/pricing" class="flex items-center h-full text-sm font-semibold text-gray-700 transition duration-300 md:px-0 px-7 hover:bg-gray-100 md:hover:bg-transparent hover:text-gray-900">
Model
</a>
</li>
<li class="flex-shrink-0 h-16 border-b border-gray-100 md:border-b-0 md:h-full">
<a href="/blog.php" class="flex items-center h-full text-sm font-semibold text-gray-700 transition duration-300 md:px-0 px-7 hover:bg-gray-100 md:hover:bg-transparent hover:text-gray-900">Blog</a>
</li>
<li class="flex items-center justify-center w-full pt-3 md:hidden px-7">
<a href="http://localhost/phpmyadmin" style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);" class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 w-full text-sm">
<span class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600">
Phpmyadmin
</span>
</a>
</li>
</ul>
</nav>
<a href="http://localhost/phpmyadmin" style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);" class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-custom fi-btn-color-primary fi-color-primary fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 focus-visible:ring-custom-500/50 dark:bg-custom-500 dark:hover:bg-custom-400 dark:focus-visible:ring-custom-400/50 relative z-20 flex-shrink-0 hidden ml-2 md:block">
<span class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600">
Phpmyadmin
</span>
</a>
</div>
</div>
</header>
