scripts/templates/tailwind_courses.html

<section id="courses" class="py-16 bg-white">
    <div class="container mx-auto px-4 max-w-6xl">
        <h2 class="text-3xl font-bold text-center mb-12">Explore Our <span class="text-primary">Courses</span></h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {% for course_id, course in courses.items() %}
                {% set notebooks = course.get('notebooks', []) %}
                {% set notebook_count = notebooks|length %}
                
                {% if notebook_count > 0 %}
                    {% set title = course.get('title', course_id|replace('_', ' ')|title) %}
                    {% set description = course.get('description', '') %}
                    {% if description|length > 120 %}
                        {% set description = description[:117] + '...' %}
                    {% endif %}
                    
                    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover-grow card-shadow">
                        <div class="h-2 bg-primary"></div>
                        <div class="p-6">
                            <h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
                            <p class="text-gray-600 mb-4 h-20 overflow-hidden">{{ description }}</p>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ notebook_count }} notebooks</span>
                                <a href="{{ course_id }}/index.html" class="text-primary hover:text-dark-green font-medium inline-flex items-center">
                                    Explore
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</section>