Twigwind Examples
Explore various examples of how to use Twigwind in your projects.
Example 1: Basic Usage
This example demonstrates the basic usage of Twigwind to style a button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body>
<button class="bg-blue color-white transition:all_0.1s_ease-out hover:shadow-lg border-2 border-transparent p-7 border-radius-7px">Click Me</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 2: Code displaying
This example shows how to display code snippets with syntax highlighting.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<div class="w-600 mt-50 bg-black border-radius-8px relative p-4">
<!-- Header with copy button -->
<div class="flex:row-right-center mb-3 pb-2" style="border-bottom: 1px solid #333;">
<span class="color-white" style="font-size: 14px; font-family: monospace;">Python</span>
<button class="material-symbols-outlined color-white hover:bg-red p-2 border-radius-4px transition:all_0.2s_ease ml-4"
onclick="copyCode()"
title="Copy code">
content_copy
</button>
</div>
<!-- Code content -->
<pre style="margin: 0; overflow-x: auto;"><code class="language-python">def greet(name):
"""A simple greeting function"""
return f"Hello, {name}!"
# Example usage
user_name = "World"
message = greet(user_name)
print(message)
# More examples
numbers = [1, 2, 3, 4, 5]
squared = [x**2 for x in numbers]
print(f"Original: {numbers}")
print(f"Squared: {squared}")</code></pre>
</div>
<script>
function copyCode() {
const code = document.querySelector('code').textContent;
navigator.clipboard.writeText(code).then(() => {
const button = document.querySelector('.material-symbols-outlined');
const originalText = button.textContent;
button.textContent = 'check';
button.style.color = '#4CAF50';
setTimeout(() => {
button.textContent = originalText;
button.style.color = 'white';
}, 2000);
});
}
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 3: Card Layout with Flexbox
This example demonstrates creating a responsive card layout using Twigwind's flex utilities.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Layout</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-lightBlue p-20">
<div class="flex:row-center-center">
<div class="bg-white border-radius-12px p-20 m-10 w-300 hover:shadow-xl transition:all_0.3s_ease">
<h3 class="color-purple mb-10">Feature Card</h3>
<p class="color-blueGrey mb-15">This is a beautiful card component built with Twigwind utilities.</p>
<button class="bg-purple color-white p-10 border-radius-6px hover:bg-deepPurple transition:all_0.2s_ease">Learn More</button>
</div>
<div class="bg-white border-radius-12px p-20 m-10 w-300 hover:shadow-xl transition:all_0.3s_ease">
<h3 class="color-teal mb-10">Another Card</h3>
<p class="color-blueGrey mb-15">Cards can be easily customized with different colors and effects.</p>
<button class="bg-teal color-white p-10 border-radius-6px hover:bg-green transition:all_0.2s_ease">Get Started</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 4: Grid Layout with Animations
This example shows how to create a grid layout with hover animations and gradients.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid with Animations</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-black p-30">
<h1 class="color-white mb-30 flex:row-center-center">Animated Grid Gallery</h1>
<div class="grid:3,2,20px">
<div class="gradient-to-br-purple-pink border-radius-10px p-20 hover:animate-bounce-500ms-normal hover:shadow-2xl transition:all_0.3s_ease">
<h3 class="color-white mb-10">Item 1</h3>
<p class="color-white">Hover to see animation</p>
</div>
<div class="gradient-to-br-blue-cyan border-radius-10px p-20 hover:animate-pulse-800ms-infinite hover:shadow-2xl transition:all_0.3s_ease">
<h3 class="color-white mb-10">Item 2</h3>
<p class="color-white">Different animation</p>
</div>
<div class="gradient-to-br-green-lime border-radius-10px p-20 hover:animate-spin-1s-normal hover:shadow-2xl transition:all_0.3s_ease">
<h3 class="color-white mb-10">Item 3</h3>
<p class="color-white">Spin on hover</p>
</div>
<div class="gradient-to-br-orange-red border-radius-10px p-20 hover:transform:scale-1.1 hover:shadow-2xl transition:all_0.3s_ease">
<h3 class="color-white mb-10">Item 4</h3>
<p class="color-white">Scale transform</p>
</div>
<div class="gradient-to-br-indigo-purple border-radius-10px p-20 hover:transform:rotate-5deg hover:shadow-2xl transition:all_0.3s_ease">
<h3 class="color-white mb-10">Item 5</h3>
<p class="color-white">Rotate effect</p>
</div>
<div class="gradient-to-br-pink-red border-radius-10px p-20 hover:transform:skew-10deg hover:shadow-2xl transition:all_0.3s_ease">
<h3 class="color-white mb-10">Item 6</h3>
<p class="color-white">Skew transform</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 5: Navigation Bar
This example demonstrates creating a responsive navigation bar with hover effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-white">
<nav class="bg-blue p-15 shadow-lg">
<div class="flex:row-left-center">
<div class="color-white size-xl mr-30">TwigWind</div>
<div class="flex:row-left-center">
<a href="#" class="color-white p-10 mr-15 hover:bg-lightBlue border-radius-5px transition:all_0.2s_ease">Home</a>
<a href="#" class="color-white p-10 mr-15 hover:bg-lightBlue border-radius-5px transition:all_0.2s_ease">About</a>
<a href="#" class="color-white p-10 mr-15 hover:bg-lightBlue border-radius-5px transition:all_0.2s_ease">Services</a>
<a href="#" class="color-white p-10 mr-15 hover:bg-lightBlue border-radius-5px transition:all_0.2s_ease">Contact</a>
</div>
</div>
</nav>
<main class="p-30">
<h1 class="color-blue mb-20">Welcome to Our Website</h1>
<p class="color-blueGrey mb-20">This is a sample page with a beautiful navigation bar created using Twigwind utilities.</p>
<button class="bg-blue color-white p-15 border-radius-8px hover:bg-deepPurple hover:shadow-lg transition:all_0.3s_ease">Get Started</button>
</main>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 6: Form with Validation Styling
This example shows how to create a styled form with different states using Twigwind.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Form</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-sand p-30">
<div class="flex:row-center-center">
<form class="bg-white p-30 border-radius-12px shadow-xl w-400">
<h2 class="color-purple mb-25 flex:row-center-center">Contact Form</h2>
<div class="mb-20">
<label class="color-blueGrey mb-5">Name</label>
<input type="text" class="w-100% p-12 border-2 border-lightBlue border-radius-6px hover:border-blue transition:all_0.2s_ease" placeholder="Enter your name">
</div>
<div class="mb-20">
<label class="color-blueGrey mb-5">Email</label>
<input type="email" class="w-100% p-12 border-2 border-green border-radius-6px hover:border-teal transition:all_0.2s_ease" placeholder="Enter your email">
</div>
<div class="mb-20">
<label class="color-blueGrey mb-5">Message</label>
<textarea class="w-100% p-12 border-2 border-orange border-radius-6px hover:border-deepOrange transition:all_0.2s_ease h-100" placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="w-100% bg-purple color-white p-15 border-radius-8px hover:bg-deepPurple hover:shadow-lg transition:all_0.3s_ease">Send Message</button>
</form>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 7: Dashboard Layout
This example demonstrates a complex dashboard layout with positioning and multiple components.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-lightBlue">
<!-- Header -->
<header class="bg-blue color-white p-15 shadow-md relative z-10">
<div class="flex:row-left-center">
<h1 class="size-lg">Dashboard</h1>
<div class="absolute right-20">
<span class="bg-green color-white p-8 border-radius-20px">Online</span>
</div>
</div>
</header>
<!-- Main Content -->
<div class="flex:row-left-center p-20">
<!-- Sidebar -->
<aside class="bg-white w-250 p-20 border-radius-8px shadow-lg mr-20">
<nav>
<div class="mb-15 p-10 bg-purple color-white border-radius-6px">Dashboard</div>
<div class="mb-10 p-10 hover:bg-lightBlue border-radius-6px transition:all_0.2s_ease">Analytics</div>
<div class="mb-10 p-10 hover:bg-lightBlue border-radius-6px transition:all_0.2s_ease">Users</div>
<div class="mb-10 p-10 hover:bg-lightBlue border-radius-6px transition:all_0.2s_ease">Settings</div>
</nav>
</aside>
<!-- Content Area -->
<main class="flex-1">
<!-- Stats Cards -->
<div class="grid:3,1,20px mb-30">
<div class="bg-white p-20 border-radius-8px shadow-md hover:shadow-lg transition:all_0.3s_ease">
<h3 class="color-blue mb-10">Total Users</h3>
<p class="size-xl color-purple">1,234</p>
</div>
<div class="bg-white p-20 border-radius-8px shadow-md hover:shadow-lg transition:all_0.3s_ease">
<h3 class="color-green mb-10">Revenue</h3>
<p class="size-xl color-teal">$45,678</p>
</div>
<div class="bg-white p-20 border-radius-8px shadow-md hover:shadow-lg transition:all_0.3s_ease">
<h3 class="color-orange mb-10">Orders</h3>
<p class="size-xl color-deepOrange">567</p>
</div>
</div>
<!-- Chart Area -->
<div class="bg-white p-30 border-radius-8px shadow-md">
<h3 class="color-blueGrey mb-20">Analytics Chart</h3>
<div class="bg-lightBlue h-200 border-radius-6px flex:row-center-center">
<p class="color-blue">Chart would go here</p>
</div>
</div>
</main>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 8: Dark Mode Toggle
This example demonstrates implementing a dark mode toggle with Twigwind's dark mode utilities.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Toggle</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-white dark:bg-black transition:all_0.3s_ease">
<div class="p-30">
<!-- Header with toggle -->
<header class="flex:row-left-center mb-30">
<h1 class="color-black dark:color-white mr-30">Dark Mode Demo</h1>
<button id="darkToggle" class="bg-blue dark:bg-purple color-white p-12 border-radius-8px hover:shadow-lg transition:all_0.3s_ease">
Toggle Dark Mode
</button>
</header>
<!-- Content cards -->
<div class="grid:2,1,20px">
<div class="bg-lightBlue dark:bg-blueGrey p-25 border-radius-12px shadow-md dark:shadow-2xl transition:all_0.3s_ease">
<h3 class="color-blue dark:color-lightBlue mb-15">Light Theme Card</h3>
<p class="color-blueGrey dark:color-white">This card adapts to the current theme automatically using Twigwind's dark mode utilities.</p>
</div>
<div class="bg-sand dark:bg-deepPurple p-25 border-radius-12px shadow-md dark:shadow-2xl transition:all_0.3s_ease">
<h3 class="color-orange dark:color-yellow mb-15">Adaptive Colors</h3>
<p class="color-brown dark:color-white">Colors change seamlessly between light and dark modes for optimal readability.</p>
</div>
</div>
</div>
<script>
const darkToggle = document.getElementById('darkToggle');
const body = document.body;
darkToggle.addEventListener('click', () => {
body.classList.toggle('dark');
});
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 9: CSS Shortcuts with Twigwind Tags
This example shows how to use Twigwind's CSS shortcuts feature to create reusable component styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Shortcuts Demo</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-lightBlue p-30">
<!-- Define CSS shortcuts -->
<twigwind style="display:none">
card {
bg-white;
p-20;
border-radius-12px;
shadow-lg;
hover:shadow-xl;
transition:all_0.3s_ease;
}
btn-primary {
bg-blue;
color-white;
p-12;
border-radius-6px;
hover:bg-deepPurple;
hover:shadow-md;
transition:all_0.2s_ease;
}
btn-secondary {
bg-transparent;
color-blue;
p-12;
border-2;
border-blue;
border-radius-6px;
hover:bg-blue;
hover:color-white;
transition:all_0.2s_ease;
}
feature-icon {
w-60;
h-60;
bg-purple;
border-radius-50%;
flex:row-center-center;
color-white;
mb-15;
}
</twigwind>
<h1 class="color-blue mb-30 flex:row-center-center">CSS Shortcuts Demo</h1>
<div class="grid:3,1,20px">
<div class="card">
<div class="feature-icon">🚀</div>
<h3 class="color-purple mb-15">Fast Development</h3>
<p class="color-blueGrey mb-20">Build components quickly with reusable CSS shortcuts.</p>
<button class="btn-primary mr-10">Learn More</button>
<button class="btn-secondary">Demo</button>
</div>
<div class="card">
<div class="feature-icon">⚡</div>
<h3 class="color-teal mb-15">Performance</h3>
<p class="color-blueGrey mb-20">Lightweight and optimized for production use.</p>
<button class="btn-primary mr-10">Benchmark</button>
<button class="btn-secondary">Test</button>
</div>
<div class="card">
<div class="feature-icon">🎨</div>
<h3 class="color-orange mb-15">Customizable</h3>
<p class="color-blueGrey mb-20">Create your own utility classes and shortcuts.</p>
<button class="btn-primary mr-10">Customize</button>
<button class="btn-secondary">Guide</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 10: Modal Dialog
This example demonstrates creating a modal dialog with backdrop blur and animations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Dialog</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-sand p-30">
<div class="flex:row-center-center h-100vh">
<button id="openModal" class="bg-purple color-white p-20 border-radius-8px hover:bg-deepPurple hover:shadow-lg transition:all_0.3s_ease">
Open Modal
</button>
</div>
<!-- Modal Backdrop -->
<div id="modalBackdrop" class="fixed top-0 left-0 w-100vw h-100vh bg-black opacity-0 backdrop-blur-10px z-50 transition:all_0.3s_ease" style="display: none; pointer-events: none;">
<div class="flex:row-center-center h-100%">
<!-- Modal Content -->
<div id="modalContent" class="bg-white p-30 border-radius-12px shadow-2xl w-400 transform:scale-0.8 transition:all_0.3s_ease">
<div class="flex:row-left-center mb-20">
<h2 class="color-purple">Modal Title</h2>
<button id="closeModal" class="absolute right-20 top-20 color-blueGrey hover:color-red transition:all_0.2s_ease">✕</button>
</div>
<p class="color-blueGrey mb-25">This is a beautiful modal dialog created with Twigwind utilities. It features backdrop blur, smooth animations, and responsive design.</p>
<div class="flex:row-right-center">
<button id="cancelBtn" class="bg-transparent color-blueGrey p-12 border-radius-6px hover:bg-lightBlue transition:all_0.2s_ease mr-15">Cancel</button>
<button id="confirmBtn" class="bg-purple color-white p-12 border-radius-6px hover:bg-deepPurple transition:all_0.2s_ease">Confirm</button>
</div>
</div>
</div>
</div>
<script>
const openModal = document.getElementById('openModal');
const closeModal = document.getElementById('closeModal');
const cancelBtn = document.getElementById('cancelBtn');
const confirmBtn = document.getElementById('confirmBtn');
const modalBackdrop = document.getElementById('modalBackdrop');
const modalContent = document.getElementById('modalContent');
function showModal() {
modalBackdrop.style.display = 'block';
modalBackdrop.style.pointerEvents = 'auto';
setTimeout(() => {
modalBackdrop.style.opacity = '0.5';
modalContent.style.transform = 'scale(1)';
}, 10);
}
function hideModal() {
modalBackdrop.style.opacity = '0';
modalContent.style.transform = 'scale(0.8)';
setTimeout(() => {
modalBackdrop.style.display = 'none';
modalBackdrop.style.pointerEvents = 'none';
}, 300);
}
openModal.addEventListener('click', showModal);
closeModal.addEventListener('click', hideModal);
cancelBtn.addEventListener('click', hideModal);
confirmBtn.addEventListener('click', () => {
alert('Confirmed!');
hideModal();
});
modalBackdrop.addEventListener('click', (e) => {
if (e.target === modalBackdrop) hideModal();
});
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 11: Pricing Table
This example demonstrates creating a responsive pricing table with hover effects and gradients.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Table</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-lightBlue p-30">
<h1 class="color-blue mb-40 flex:row-center-center size-xxl">Choose Your Plan</h1>
<div class="grid:3,1,30px">
<!-- Basic Plan -->
<div class="bg-white p-30 border-radius-12px shadow-lg hover:shadow-2xl hover:transform:translateY-5px transition:all_0.3s_ease">
<h3 class="color-blueGrey mb-10 flex:row-center-center">Basic</h3>
<div class="flex:row-center-center mb-20">
<span class="size-xxl color-blue">$9</span>
<span class="color-blueGrey ml-5">/month</span>
</div>
<ul class="mb-30">
<li class="color-blueGrey mb-10">✓ 5 Projects</li>
<li class="color-blueGrey mb-10">✓ 10GB Storage</li>
<li class="color-blueGrey mb-10">✓ Email Support</li>
<li class="color-lightGrey mb-10">✗ Priority Support</li>
<li class="color-lightGrey mb-10">✗ Advanced Features</li>
</ul>
<button class="w-100% bg-blue color-white p-15 border-radius-8px hover:bg-deepPurple transition:all_0.2s_ease">Get Started</button>
</div>
<!-- Pro Plan (Featured) -->
<div class="gradient-to-br-purple-pink p-30 border-radius-12px shadow-xl hover:shadow-2xl hover:transform:translateY-5px transition:all_0.3s_ease relative">
<div class="absolute top-10 right-10 bg-yellow color-black p-5 border-radius-20px size-sm">Popular</div>
<h3 class="color-white mb-10 flex:row-center-center">Pro</h3>
<div class="flex:row-center-center mb-20">
<span class="size-xxl color-white">$29</span>
<span class="color-white ml-5">/month</span>
</div>
<ul class="mb-30">
<li class="color-white mb-10">✓ 50 Projects</li>
<li class="color-white mb-10">✓ 100GB Storage</li>
<li class="color-white mb-10">✓ Priority Support</li>
<li class="color-white mb-10">✓ Advanced Features</li>
<li class="color-white mb-10">✓ API Access</li>
</ul>
<button class="w-100% bg-white color-purple p-15 border-radius-8px hover:bg-yellow hover:color-black transition:all_0.2s_ease">Get Started</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white p-30 border-radius-12px shadow-lg hover:shadow-2xl hover:transform:translateY-5px transition:all_0.3s_ease">
<h3 class="color-blueGrey mb-10 flex:row-center-center">Enterprise</h3>
<div class="flex:row-center-center mb-20">
<span class="size-xxl color-blue">$99</span>
<span class="color-blueGrey ml-5">/month</span>
</div>
<ul class="mb-30">
<li class="color-blueGrey mb-10">✓ Unlimited Projects</li>
<li class="color-blueGrey mb-10">✓ 1TB Storage</li>
<li class="color-blueGrey mb-10">✓ 24/7 Support</li>
<li class="color-blueGrey mb-10">✓ Custom Integrations</li>
<li class="color-blueGrey mb-10">✓ Dedicated Manager</li>
</ul>
<button class="w-100% bg-blue color-white p-15 border-radius-8px hover:bg-deepPurple transition:all_0.2s_ease">Contact Sales</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>Example 12: Loading Animations
This example showcases various loading animations and spinners using Twigwind's animation utilities.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animations</title>
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">
</head>
<body class="bg-black p-30">
<h1 class="color-white mb-40 flex:row-center-center">Loading Animations</h1>
<div class="grid:4,2,30px">
<!-- Spinner 1 -->
<div class="bg-blueGrey p-30 border-radius-12px flex:column-center-center">
<div class="w-40 h-40 border-4 border-blue border-top-transparent border-radius-50% animate-spin-1s-infinite mb-15"></div>
<p class="color-white">Classic Spinner</p>
</div>
<!-- Pulse Animation -->
<div class="bg-blueGrey p-30 border-radius-12px flex:column-center-center">
<div class="w-40 h-40 bg-green border-radius-50% animate-pulse-1s-infinite mb-15"></div>
<p class="color-white">Pulse Effect</p>
</div>
<!-- Bounce Animation -->
<div class="bg-blueGrey p-30 border-radius-12px flex:column-center-center">
<div class="w-40 h-40 bg-purple border-radius-50% animate-bounce-800ms-infinite mb-15"></div>
<p class="color-white">Bounce Ball</p>
</div>
<!-- Fade Animation -->
<div class="bg-blueGrey p-30 border-radius-12px flex:column-center-center">
<div class="w-40 h-40 bg-orange border-radius-8px animate-fade-1.5s-infinite mb-15"></div>
<p class="color-white">Fade In/Out</p>
</div>
<!-- Dots Loading -->
<div class="bg-blueGrey p-30 border-radius-12px flex:column-center-center">
<div class="flex:row-center-center mb-15">
<div class="w-8 h-8 bg-pink border-radius-50% animate-bounce-600ms-infinite mr-5"></div>
<div class="w-8 h-8 bg-pink border-radius-50% animate-bounce-600ms-infinite mr-5" style="animation-delay: 0.2s;"></div>
<div class="w-8 h-8 bg-pink border-radius-50% animate-bounce-600ms-infinite" style="animation-delay: 0.4s;"></div>
</div>
<p class="color-white">Dot Sequence</p>
</div>
<!-- Scale Animation -->
<div class="bg-blueGrey p-30 border-radius-12px flex:column-center-center">
<div class="w-40 h-40 bg-teal border-radius-8px animate-scale-1s-infinite mb-15"></div>
<p class="color-white">Scale Effect</p>
</div>
<!-- Rotate Animation -->
<div class="bg-blueGrey p-30 border-radius-12px flex:column-center-center">
<div class="w-40 h-40 bg-yellow border-radius-8px animate-spin-2s-infinite mb-15"></div>
<p class="color-white">Slow Rotate</p>
</div>
<!-- Progress Bar -->
<div class="bg-blueGrey p-30 border-radius-12px flex:column-center-center">
<div class="w-100 h-4 bg-lightGrey border-radius-2px overflow-hidden mb-15">
<div class="h-100% bg-blue animate-slide-2s-infinite"></div>
</div>
<p class="color-white">Progress Bar</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
Twigwind.twInject();
});
</script>
</body>
</html>