lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
53 lines (46 loc) • 2.51 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@codewith_muhilan</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://lightswind.com/tailwind.min.css">
<link rel="stylesheet" href="../../../node_modules/lightwind/src/tailwind.css">
</head>
<body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-200"> <!-- Added dark mode classes here -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl">
<div class="relative text-center flex items-center justify-center flex-wrap gap-4">
<nav class="flex py-4 px-6 font-semibold rounded-md">
<ol class="flex items-center space-x-2 text-gray-400 dark:text-gray-200"> <!-- Added dark mode support here -->
<li>
<a href="javascript:void(0)"
class="flex items-center hover:text-primarylw transition-colors duration-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
stroke="currentColor" class="w-5 h-5 mr-1">
<path strokeLinecap="round" strokeLinejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
Home
</a>
</li>
<li>
<span class="text-gray-400 dark:text-gray-500">/</span> <!-- Dark mode for separators -->
</li>
<li>
<a href="javascript:void(0)" class="hover:text-primarylw transition-colors duration-300">
Products
</a>
</li>
<li>
<span class="text-gray-400 dark:text-gray-500">/</span> <!-- Dark mode for separators -->
</li>
<li class="text-gray-500 dark:text-gray-300"> <!-- Dark mode for current page text -->
Current Page
</li>
</ol>
</nav>
</div>
</div>
</body>
</html>