lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
75 lines (67 loc) • 4.4 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://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
<link rel="stylesheet" href="../../../../node_modules/lightwind//tailwind.css">
</head>
<body class="flex items-center justify-center font-semibold h-screen bg-gray-50 dark:bg-gray-900 dark">
<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="p-4 font-semibold">
<ol class="flex items-center space-x-2 text-gray-600 dark:text-primarylw-2">
<!-- Home Breadcrumb -->
<li class="group flex items-center">
<a href="javascript:void(0)"
class="relative text-sm p-2 font-medium text-gray-500 dark:text-gray-300 hover:text-primarylw dark:hover:text-blue-600 transition-all duration-300">
<span
class="absolute inset-0 scale-0 bg-indigo-100 dark:bg-primarylw p-2 rounded-full group-hover:scale-100 group-hover:opacity-100 transition-transform duration-300 ease-in-out"></span>
<span class="relative z-10 flex items-center gap-2">
<!-- Home Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="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
</span>
</a>
<!-- Arrow Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5 text-gray-400 dark:text-gray-500 group-hover:text-primarylw dark:group-hover:text-primarylw transition-colors duration-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 15l7.5-7.5M8.25 7.5l7.5 7.5" />
</svg>
</li>
<!-- Products Breadcrumb -->
<li class="group flex items-center">
<a href="javascript:void(0)"
class="relative text-sm p-2 font-medium text-gray-500 dark:text-gray-300 hover:text-primarylw dark:hover:text-blue-600 transition-all duration-300">
<span
class="absolute inset-0 p-2 scale-0 bg-indigo-100 dark:bg-primarylw rounded-full group-hover:scale-100 group-hover:opacity-100 transition-transform duration-300 ease-in-out"></span>
<span class="relative z-10">Products</span>
</a>
<!-- Arrow Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5 text-gray-400 dark:text-gray-500 group-hover:text-primarylw dark:group-hover:text-primarylw transition-colors duration-300">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 15l7.5-7.5M8.25 7.5l7.5 7.5" />
</svg>
</li>
<!-- Current Page (Product Details) -->
<li class="relative">
<span class="text-sm font-semibold text-primarylw dark:text-primarylw-2">
Product Details
</span>
</li>
</ol>
</nav>
</div>
</div>
</body>
</html>