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

894

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

News Feed

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

9 months ago

1.5k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

9 months ago

1.2k
Food Order Card
Ecommerce/Food order card layout

Author:
Rajesh Maheshwari

8 months ago

1.1k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

7 months ago

1.1k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

6 months ago

857
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

6 months ago

435
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

6 months ago

946
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

6 months ago

886
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

652
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

131
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

172
Card
Simple Card

Author:
Anonymous

6 months ago

701

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components