knowledge-kitchen / course-notes

TailwindCSS - Code Examples

• What is in this folder
• Where to learn more

Demonstrating common web page-building tasks using Tailwind CSS.

Every file loads Tailwind via its Play CDN with a single <script> tag - no terminal commands, no npm, no build step. Open any HTML file directly in your web browser to see it work.

What is in this folder

index.html

The main demo - a homepage for the “Beautiful Flowers” site, showing typography, buttons, a responsive 3-column card grid, and a small bit of custom CSS in css/main.css.

layouts/ - empty page layout skeletons

Four common outer-page architectures with no content inside them, so you can see the bones of each layout. Useful as starting points for your own pages.

• 1-header-main-footer.html - the simplest layout.
• 2-sidebar-left.html - documentation/blog style.
• 3-card-grid.html - gallery/catalog style.
• 4-hero-with-features.html - landing-page style.

filled-layouts/ - the same layouts with sample content

The same four layouts, this time populated with realistic headings, paragraphs, navigation links, and images so you can see how each one feels in practice.

alpine/ - interactive components powered by Alpine.js

Tailwind itself ships no JavaScript, so to build interactive components like dropdowns and modal dialogs the Tailwind community pairs Tailwind with Alpine.js - a tiny declarative JavaScript framework also loaded via a single CDN tag.

• 1-dropdown.html - a toggle-open dropdown menu.
• 2-modal.html - a pop-up dialog with a dimmed backdrop.
• 3-tooltip.html - hover-triggered help text.
• 4-accordion.html - expandable/collapsible sections.
• 5-carousel.html - an image slideshow with previous/next buttons and indicator dots.
• 6-navbar.html - a responsive navigation bar that collapses into a hamburger menu on small screens.

Other folders

• css/ - a single main.css showing where to put your own custom CSS alongside Tailwind.
• images/ - the flower photographs reused across examples.

Where to learn more

• Tailwind CSS documentation - the searchable, complete reference for every utility class.
• Alpine.js documentation - the full reference for the directives used in alpine/.
• Course notes: Tailwind CSS.