Get started with flowbite CDN

MIT licensed

Flowbite: Free, open-source UI library for custom Tailwind CSS components.

Tags:
  • flowbite
  • html
  • css
  • javascript
  • tailwind
  • tailwind components
  • tailwind elements
  • tailwind library
  • tailwind sections
  • tailwind css
  • tailwind ui
  • tailwind css react
  • tailwind css vue
  • tailwind css angular
  • tailwind css svelte
  • tailwind css django
  • tailwind css ruby on rails

Stable version

Copied!

How to start using flowbite CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with flowbite CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flowbite@2.3.0/dist/flowbite.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.3.0/dist/flowbite.min.js"></script>
</head>
<body>
    <div class="card bg-white shadow-md">
        <div class="card-body">
            <h5 class="text-xl font-semibold text-gray-900">Flowbite Example</h5>
            <p class="text-gray-700">This is an example of using Flowbite with the provided CDN link.</p>
            <button id="toggle-button" class="btn btn-primary">Toggle</button>
            <div id="toggle-content" class="hidden">
                <p>This content is hidden by default and can be toggled using the button above.</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const toggleButton = document.getElementById('toggle-button');
            const toggleContent = document.getElementById('toggle-content');

            toggleButton.addEventListener('click', () => {
                toggleContent.classList.toggle('hidden');
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions