Home
Crimson
content section

content section

This tailwind example is contributed by Crimson, on 14-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are blog page template, article page template

Card Blog post page

Author Crimson

1.3k

Fork Fullscreen

<aside class="lg:col-span-5 xl:col-span-4 order-1 lg:order-2 space-y-6 sm:space-y-8">
                    
                    <div class="bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-lg sm:rounded-xl p-4 sm:p-6 animate-slide-left" style="animation-delay: 0.5s">
                        <h3 class="text-base sm:text-lg font-light text-white mb-3 sm:mb-4">Key Principles</h3>
                        <ul class="space-y-2 sm:space-y-3 text-neutral-400 text-sm sm:text-base">
                            <li class="flex items-center gap-3">
                                <div class="w-1 h-1 bg-neutral-700 rounded-full"></div>
                                <span>Minimalist Approach</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <div class="w-1 h-1 bg-neutral-700 rounded-full"></div>
                                <span>Functional Aesthetics</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <div class="w-1 h-1 bg-neutral-700 rounded-full"></div>
                                <span>User-Centric Focus</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <div class="w-1 h-1 bg-neutral-700 rounded-full"></div>
                                <span>Responsive Elements</span>
                            </li>
                        </ul>
                    </div>

<div class="space-y-3 sm:space-y-4 animate-slide-left" style="animation-delay: 0.6s">
                        <h3 class="text-base sm:text-lg font-light text-white">Related Topics</h3>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-2 sm:px-3 py-1 bg-neutral-900/50 border border-neutral-800 rounded-full text-xs sm:text-sm text-neutral-400 hover:text-white hover:border-neutral-700 transition-colors duration-300">Typography</span>
                            <span class="px-2 sm:px-3 py-1 bg-neutral-900/50 border border-neutral-800 rounded-full text-xs sm:text-sm text-neutral-400 hover:text-white hover:border-neutral-700 transition-colors duration-300">Layout</span>
                            <span class="px-2 sm:px-3 py-1 bg-neutral-900/50 border border-neutral-800 rounded-full text-xs sm:text-sm text-neutral-400 hover:text-white hover:border-neutral-700 transition-colors duration-300">Color Theory</span>
                            <span class="px-2 sm:px-3 py-1 bg-neutral-900/50 border border-neutral-800 rounded-full text-xs sm:text-sm text-neutral-400 hover:text-white hover:border-neutral-700 transition-colors duration-300">Interaction</span>
                            <span class="px-2 sm:px-3 py-1 bg-neutral-900/50 border border-neutral-800 rounded-full text-xs sm:text-sm text-neutral-400 hover:text-white hover:border-neutral-700 transition-colors duration-300">Accessibility</span>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </section>
</body>
</html>

Related Examples