Tailwind CSS Content Details Blocks

All Blocks
Marketing
Content Details

Content Details

Tailwind CSS long-form content blocks for about pages, articles, and project detail pages.

Long-Form Story Section with Hero Image Pro

Long-form copy, supporting media, and stacked detail blocks are arranged in one continuous section.

<div class="max-w-6xl px-4 sm:px-6 lg:px-8 mx-auto">
                      <div class="pt-10 md:pt-20 pb-14 md:pb-20">
                        
                        <div class="mb-10 max-w-xl mx-auto text-center">
                          <h1 class="font-bold text-foreground text-4xl md:text-5xl">
                            The story behind Preline
                          </h1>
      
                          <p class="mt-5 text-sm md:text-lg text-foreground">
                            Prelin is a web company that builds websites. Businesses of every size—from new startups to public companies—use our theme to build and manage their businesses online.
                          </p>
                        </div>

<div class="max-w-6xl px-4 sm:px-6 lg:px-8 mx-auto">
                      
                      <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 lg:gap-10">
                        <div class="lg:pe-[20%] ">
                          <h2 class="font-semibold text-2xl md:text-3xl text-foreground">
                            Tools should adapt to the user, not the other way around.
                          </h2>
                        </div>

<div class="space-y-5">
                          <p class="text-muted-foreground-1">
                            Preline is a powerful and versatile open-source library of prebuilt UI components based on the Tailwind CSS framework. With over 750 accessible and customizable components, templates, and examples, Preline empowers developers to create visually stunning and fully responsive, mobile-first websites with ease.
                          </p>
                          <p class="text-muted-foreground-1">
                            In addition to its robust component library, Preline offers a comprehensive Figma design system for seamless design-to-development workflows. Whether you're a developer or a designer, Preline provides the tools to streamline your projects and elevate your web creations.
                          </p>
                          <p class="text-muted-foreground-1">
                            Our offerings go beyond components—we specialize in custom web design and development services, including UI/UX design, starter templates, detailed documentation, and personalized support. Backed by a community-driven approach, Preline is here to help you build with confidence and creativity.
                          </p>
                        </div>
                        
                      </div>
                      
                    </div>

Open related SaaS Startup about page

Single-Column Article Detail Layout Pro

Editorial copy, article metadata, and media blocks run in a single-column reading layout.

<div class="bg-background">
                      <div class="w-full max-w-3xl px-4 xl:px-0 py-10 lg:py-20 mx-auto">
                        <div class="space-y-7">
                          <img class="w-full h-30 sm:h-50 object-cover rounded-xl" src="https://images.unsplash.com/photo-1656711103646-b1a400b48b3f?q=80&w=768&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">
      
                          <h1 class="font-semibold text-2xl lg:text-3xl text-foreground">
                            The Evolution of Authentication: From Passwords to Passwordless Security
                          </h1>
      
                          <p class="text-muted-foreground-1 leading-7">
                            In today's rapidly evolving digital landscape, authentication methods are undergoing a significant transformation. Traditional password-based authentication, once the cornerstone of digital security, is gradually giving way to more sophisticated and user-friendly alternatives.
                          </p>

<p class="text-muted-foreground-1 leading-7">
                            Passwordless authentication has emerged as a game-changer, offering enhanced security while improving user experience. Methods like biometric authentication (fingerprint, facial recognition), hardware security keys, and magic links are becoming increasingly prevalent. These approaches not only eliminate the need to remember complex passwords but also significantly reduce the risk of credential-based attacks.
                          </p>

<p class="text-muted-foreground-1 leading-7">
                            Multi-factor authentication (MFA) continues to evolve, with adaptive authentication systems that dynamically adjust security requirements based on risk factors. This intelligent approach provides stronger security without compromising user convenience.
                          </p>

<p class="text-muted-foreground-1 leading-7">
                            The future of authentication lies in a combination of these technologies, creating a seamless yet secure user experience. As cyber threats become more sophisticated, organizations must stay ahead of the curve by implementing modern authentication solutions that protect both their users and their data.
                          </p>

<p class="text-muted-foreground-1 leading-7">
                            The shift towards passwordless authentication represents not just a technological advancement, but a fundamental change in how we think about digital security and user experience.
                          </p>

<div>
                            <a class="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#" target="_parent">
                              Plan
                            </a>
                            <a class="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#" target="_parent">
                              Web development
                            </a>
                            <a class="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#" target="_parent">
                              Free
                            </a>
                            <a class="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#" target="_parent">
                              Team
                            </a>
                          </div>

<div class="pt-10 mt-10 border-t border-line-2">
                            <h2 class="mb-4 font-semibold text-xs uppercase text-muted-foreground-1">
                              About author
                            </h2>

<div class="flex flex-wrap gap-3">
                              <div class="shrink-0">
                                <img class="size-12 rounded-full" src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
                              </div>
  
                              <div class="grow">
                                <div class="flex justify-between items-center gap-x-2">
                                  <div>
                                    <p class="font-semibold text-foreground">
                                      Leyla Ludic
                                    </p>
  
                                    <ul class="text-xs text-muted-foreground-1">
                                      <li class="inline-block relative pe-6 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:size-1 before:bg-surface-3 before:rounded-full">
                                        January 18, 2025
                                      </li>
                                      <li class="inline-block relative pe-6 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-2 before:-translate-y-1/2 before:size-1 before:bg-surface-3 before:rounded-full">
                                        Company News
                                      </li>
                                    </ul>
                                  </div>
              
                                  
                                  <div>
                                    <button type="button" class="py-1.5 px-2.5 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border border-line-2 bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                                      <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v13"/><path d="m16 6-4-4-4 4"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/></svg>
                                      Share
                                    </button>
                                  </div>
                                  
                                </div>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>

Project Detail Layout with Media Sections Pro

Large media sections, narrative copy, and supporting detail blocks are stacked through the page.

<div class="w-full max-w-2xl mx-auto pt-10 px-4 sm:px-6 lg:px-8">
                      <div class="space-y-8">
                        <h1 class="text-xl font-medium text-foreground">
                          Japanease art
                        </h1>

<p class="text-sm text-muted-foreground-1">
                          Discover the beauty and elegance of traditional Japanese art through this captivating collection. From delicate brush paintings to intricate woodblock prints, each piece tells a story of cultural heritage and artistic mastery that has influenced art movements worldwide.
                        </p>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                          <h2 class="font-medium text-foreground">
                            We explore the intersection of creativity, beauty, and faith.
                          </h2>
      
                          <p class="text-sm text-muted-foreground-1">
                            Craftsmanship matters, too. Our books are lithographically printed, on a 15 pt cover with soft-touch aqueous coating and 80# uncoated text. It's printed by our friends at Hemlock printers, one of Canada's most environmentally friendly printing factories. Simply put, it's the best quality out there.
                          </p>
                        </div>

<p class="text-sm text-muted-foreground-1">
                          Japanese art continues to inspire contemporary artists and designers worldwide, with its timeless principles of balance, harmony, and attention to detail. The influence of Japanese aesthetics can be seen in everything from modern architecture to digital design, demonstrating the enduring power of these traditional art forms.
                        </p>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                          <div class="ps-5">
                            <div class="relative before:absolute before:top-2.5 before:-inset-s-5 before:w-3 before:h-[1.5px] before:bg-secondary">
                              <p class="font-medium text-foreground">
                                Books
                              </p>
                            </div>
                            <p class="text-sm text-muted-foreground-1">This book is 96 pages, perfect bound, and printed in full color.</p>
                          </div>

<div class="ps-5">
                            <div class="relative before:absolute before:top-2.5 before:-inset-s-5 before:w-3 before:h-[1.5px] before:bg-secondary">
                              <p class="font-medium text-foreground">
                                Notebooks
                              </p>
                            </div>
                            <p class="text-sm text-muted-foreground-1">Japanese high-grade acid-free paper.</p>
                          </div>

<div class="ps-5">
                            <div class="relative before:absolute before:top-2.5 before:-inset-s-5 before:w-3 before:h-[1.5px] before:bg-secondary">
                              <p class="font-medium text-foreground">
                                Manuscripts
                              </p>
                            </div>
                            <p class="text-sm text-muted-foreground-1">A beautifully designed manuscript of Genesis.</p>
                          </div>

<div class="ps-5">
                            <div class="relative before:absolute before:top-2.5 before:-inset-s-5 before:w-3 before:h-[1.5px] before:bg-secondary">
                              <p class="font-medium text-foreground">
                                Artwork
                              </p>
                            </div>
                            <p class="text-sm text-muted-foreground-1">Products are made custom to order.</p>
                          </div>
                        </div>

<h2 class="font-medium text-foreground">
                          What we believe...
                        </h2>
    
                        <p class="text-sm text-muted-foreground-1">
                          Quality is at the heart of everything we do. Each book is meticulously crafted using premium materials - featuring a 15 pt cover with luxurious soft-touch aqueous coating and 80# uncoated text stock.
                        </p>
                      </div>
                    </div>