lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
325 lines (292 loc) • 18.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Launch</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.2.0/src/lightswind.css">
</head>
<body>
<div class=" bg-white dark:bg-black">
<div class="max-w-screen-xl mx-auto p-5 sm:p-10 md:p-16 font-primarylw">
<div class="border-b border-gray-300 dark:border-gray-700 mb-5 flex justify-between text-sm">
<div
class="text-primarylw flex items-center pb-2 pr-2 border-b-2 border-blue-600 dark:border-blue-600 uppercase">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
</svg>
<a href="#" class="ml-1 font-semibold inline-block">Artificial Intelligence Blog</a>
</div>
<a href="# " class="text-primarylw-2 dark:text-primarylw-2">See All</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- CARD 1 -->
<div
class="rounded overflow-hidden shadow-lg flex flex-col text-black dark:text-white border border-gray-200 dark:border-gray-800 ">
<a href="#"></a>
<div class="relative">
<a href="#!">
<img class="w-full"
src="https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="AI Technology Blog">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
</a>
<a href="#!">
<div
class="text-xs absolute top-0 right-0 bg-primarylw px-4 py-2 text-white mt-3 mr-3 hover:bg-white hover:text-primarylw transition duration-500 ease-in-out">
AI in Tech
</div>
</a>
</div>
<div class="px-6 py-4 mb-auto">
<a href="#"
class="font-medium text-lg inline-block hover:text-primarylw transition duration-500 ease-in-out inline-block mb-2">How
AI is Revolutionizing the Tech Industry</a>
<p class="text-gray-500 text-sm">
AI is transforming industries, from healthcare to finance, with its ability to process large
amounts of data and learn from patterns.
</p>
</div>
<div class="px-6 py-3 flex flex-row items-center justify-between bg-gray-200 dark:bg-gray-800">
<span href="#" class="py-1 text-xs font-regular text-gray-900 mr-1 flex flex-row items-center ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<span class="ml-1 text-black dark:text-white">2 hours ago</span>
</span>
<span href="#" class="py-1 text-xs font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg class="h-5 text-black dark:text-white" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z">
</path>
</svg>
<span class="ml-1 text-black dark:text-white">45 Comments</span>
</span>
</div>
</div>
<!-- CARD 2 -->
<div
class="rounded overflow-hidden shadow-lg flex flex-col text-black dark:text-white border border-gray-200 dark:border-gray-800">
<a href="#"></a>
<div class="relative">
<a href="#!">
<img class="w-full"
src="https://images.pexels.com/photos/6153354/pexels-photo-6153354.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="AI in Healthcare">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
</a>
<a href="#!">
<div
class="text-xs absolute top-0 right-0 bg-primarylw px-4 py-2 text-white mt-3 mr-3 hover:bg-white hover:text-primarylw transition duration-500 ease-in-out">
AI in Healthcare
</div>
</a>
</div>
<div class="px-6 py-4 mb-auto">
<a href="#"
class="font-medium text-lg inline-block hover:text-primarylw transition duration-500 ease-in-out inline-block mb-2">AI
and the Future of Healthcare</a>
<p class="text-gray-500 text-sm">
Discover how AI-powered tools are being used for diagnostic purposes, enhancing patient
care,
and revolutionizing healthcare systems worldwide.
</p>
</div>
<div class="px-6 py-3 flex flex-row items-center justify-between bg-gray-200 dark:bg-gray-800">
<span href="#" class="py-1 text-xs font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<span class="ml-1 text-black dark:text-white">1 day ago</span>
</span>
<span href="#" class="py-1 text-xs font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg class="h-5 text-black dark:text-white" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z">
</path>
</svg>
<span class="ml-1 text-black dark:text-white">25 Comments</span>
</span>
</div>
</div>
<!-- CARD 3 -->
<div
class="rounded overflow-hidden shadow-lg flex flex-col text-black dark:text-white border border-gray-200 dark:border-gray-800">
<a href="#"></a>
<div class="relative">
<a href="#!">
<img class="w-full"
src="https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="AI in Business">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
</a>
<a href="#!">
<div
class="text-xs absolute top-0 right-0 bg-primarylw px-4 py-2 text-white mt-3 mr-3 hover:bg-white hover:text-primarylw transition duration-500 ease-in-out">
AI in Business
</div>
</a>
</div>
<div class="px-6 py-4 mb-auto">
<a href="#"
class="font-medium text-lg inline-block hover:text-primarylw transition duration-500 ease-in-out inline-block mb-2">How
AI is Transforming Business Models</a>
<p class="text-gray-500 text-sm">
Learn how AI-driven automation and predictive analytics are helping businesses increase
efficiency and profitability.
</p>
</div>
<div class="px-6 py-3 flex flex-row items-center justify-between bg-gray-200 dark:bg-gray-800">
<span href="#" class="py-1 text-xs font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<span class="ml-1 text-black dark:text-white">3 days ago</span>
</span>
<span href="#" class="py-1 text-xs font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg class="h-5 text-black dark:text-white" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z">
</path>
</svg>
<span class="ml-1 text-black dark:text-white">33 Comments</span>
</span>
</div>
</div>
<!-- CARD 4 -->
<div
class="rounded overflow-hidden shadow-lg flex flex-col text-black dark:text-white border border-gray-200 dark:border-gray-800">
<a href="#"></a>
<div class="relative">
<a href="#!">
<img class="w-full"
src="https://images.pexels.com/photos/8438922/pexels-photo-8438922.jpeg?auto=compress&cs=tinysrgb&w=600"
alt="AI in Finance">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
</a>
<a href="#!">
<div
class="text-xs absolute top-0 right-0 bg-primarylw px-4 py-2 text-white mt-3 mr-3 hover:bg-white hover:text-primarylw transition duration-500 ease-in-out">
AI in Finance
</div>
</a>
</div>
<div class="px-6 py-4 mb-auto">
<a href="#"
class="font-medium text-lg inline-block hover:text-primarylw transition duration-500 ease-in-out inline-block mb-2">AI
and Its Impact on the Financial Sector</a>
<p class="text-gray-500 text-sm">
Explore how AI is reshaping the finance industry with predictive analytics, fraud detection,
and
smarter investment strategies.
</p>
</div>
<div class="px-6 py-3 flex flex-row items-center justify-between bg-gray-200 dark:bg-gray-800">
<span href="#" class="py-1 text-xs font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 text-black dark:text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<span class="ml-1 text-black dark:text-white">5 days ago</span>
</span>
<span href="#" class="py-1 text-xs font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg class="h-5 text-black dark:text-white" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z">
</path>
</svg>
<span class="ml-1 text-black dark:text-white">12 Comments</span>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Theme Toggle Button -->
<button id="theme-toggle"
class="fixed z-50 top-2 left-2 text-gray-800 dark:text-gray-200 dark:text-white bg-gray-500/30 dark:bg-gray-900/70 p-2 rounded-full shadow-md hover:bg-gray-700">
<!-- Sun Icon for Light Mode -->
<svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
<!-- Moon Icon for Dark Mode -->
<svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
</button>
<script src="https://cdn.jsdelivr.net/npm/lightwind@3.1.0/src/lightswind.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class', // Enable class-based dark mode
theme: {
extend: {
colors: {},
},
},
};
const setInitialTheme = () => {
const currentTheme = localStorage.getItem('iframetheme') || 'dark';
if (currentTheme === 'dark') {
document.body.classList.add('dark');
document.getElementById('sun-icon').style.opacity = '0';
document.getElementById('moon-icon').style.opacity = '1';
} else {
document.body.classList.remove('dark');
document.getElementById('sun-icon').style.opacity = '1';
document.getElementById('moon-icon').style.opacity = '0';
}
};
setInitialTheme();
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', () => {
const currentTheme = localStorage.getItem('iframetheme') || 'dark';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
localStorage.setItem('iframetheme', newTheme);
document.body.classList.toggle('dark', newTheme === 'dark');
if (newTheme === 'dark') {
document.getElementById('moon-icon').style.opacity = '0';
document.getElementById('sun-icon').style.opacity = '1';
} else {
document.getElementById('moon-icon').style.opacity = '1';
document.getElementById('sun-icon').style.opacity = '0';
}
const iframe = document.querySelector('iframe');
if (iframe) {
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframe.contentDocument || iframeWindow.document;
if (iframeDocument) {
iframeDocument.addEventListener('DOMContentLoaded', () => {
iframeDocument.body.classList.toggle('dark', newTheme === 'dark');
});
}
}
});
</script>
</body>
</html>