Home
Michael Andreuzza
Sticky Changelog

Sticky Changelog

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Roadmap, Changelog

Header Timeline

Author Michael Andreuzza

2.1k

Fork Fullscreen

</script>

<section>
 <div class="mx-auto max-w-5xl px-8 py-24 md:px-12 lg:px-16 divide-y prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl space-y-24 text-black text-sm">
  <div>
   <h1>Changelog</h1>
   <p class="text-balance">
    Explore the latest update featuring essential performance
    enhancements, new customization options, and critical bug fixes across
    our theme collection.
   </p>
  </div> 
  <!--
            // Assuming `changelogEntries` is an array where each object contains the date, image, title, and description of a changelog entry.
            // Start of the component.
            // This component dynamically generates a list of changelog entries using the `changelogEntries` array.
            //
            // This div is responsible for the sticky behavior of the date. It uses Tailwind's 'sticky' utility class.
                <div class="lg:sticky pb-16 top-0">
                    The key class here is 'lg:sticky', which applies sticky positioning at the large breakpoint and above.
                 'pb-16 top-0' adds padding at the bottom and positions the sticky element at the top of the viewport when it reaches it during scrolling.

</div>
-->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-32 ">
   <div>
    <div class="lg:sticky lg:pb-16 top-0">
     <div class="pt-8">
      <p>16 March - 2024</p>
     </div>
    </div>
   </div>
   <div class="lg:col-span-2 pt-8">
    <div class="flex-shrink-0">
     <div class="mx-auto "> <img class="aspect-[4/3] object-cover" src="https://i.pinimg.com/564x/59/41/a0/5941a02c048f6226031a0487451c2651.jpg" alt="#_">
      <h1>80% faster widgets</h1>
      <p class="line-clamp-4">In our latest update, we've revolutionized the performance of our widgets, achieving a remarkable 80% increase in loading speeds. This breakthrough ensures a seamless experience across all Snowpeaks widgets, setting a new standard for efficiency and user satisfaction. Dive into the details to see how our widgets now lead the pack in speed and reliability.</p>
      <p> <a href="#_">Read more</a> </p>
     </div>
    </div>
   </div>
  </div>
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-32 ">
   <div>
    <div class="lg:sticky lg:pb-16 top-0">
     <div class="pt-8">
      <p>1 March - 2024</p>
     </div>
    </div>
   </div>
   <div class="lg:col-span-2 pt-8">
    <div class="flex-shrink-0">
     <div class="mx-auto "> <img class="aspect-[4/3] object-cover" src="https://i.pinimg.com/736x/70/25/f6/7025f63ebdd1caa11b47889c4c4d8fcd.jpg" alt="#_">
      <h1>Teams support</h1>
      <p class="line-clamp-4">Expanding your business operations has never been easier with our new Teams support feature. Now, you can empower your team by inviting members to manage and run your Snowpeak store collaboratively. Streamline your workflow and boost productivity by leveraging the strengths of your team, all accessible from our revamped Team settings page.</p>
      <p> <a href="#_">Read more</a> </p>
     </div>
    </div>
   </div>
  </div>
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-32 ">
   <div>
    <div class="lg:sticky lg:pb-16 top-0">
     <div class="pt-8">
      <p>20 February - 2024</p>
     </div>
    </div>
   </div>
   <div class="lg:col-span-2 pt-8">
    <div class="flex-shrink-0">
     <div class="mx-auto "> <img class="aspect-[4/3] object-cover" src="https://i.pinimg.com/564x/4e/a7/ff/4ea7ff230ad9f3bc1c30b1b6cbaccad3.jpg" alt="#_">
      <h1>Modify subscriptions in the dashboard</h1>
      <p class="line-clamp-4">We've brought the power of our API directly to your fingertips with an intuitive dashboard feature that allows for effortless modification of subscription plans. Now, managing your subscriptions is as simple as clicking 'Modify subscription'—a feature designed to streamline plan adjustments and proration handling. Experience the ease of subscription management with our user-friendly dashboard.</p>
      <p> <a href="#_">Read more</a> </p>
     </div>
    </div>
   </div>
  </div>
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-32 ">
   <div>
    <div class="lg:sticky lg:pb-16 top-0">
     <div class="pt-8">
      <p>28 February - 2024</p>
     </div>
    </div>
   </div>
   <div class="lg:col-span-2 pt-8">
    <div class="flex-shrink-0">
     <div class="mx-auto "> <img class="aspect-[4/3] object-cover" src="https://i.pinimg.com/564x/00/03/99/000399041b1f172201a912c235521db7.jpg" alt="#_">
      <h1>New Analytics Dashboard</h1>
      <p class="line-clamp-4">Unveiling our latest innovation, the Analytics Dashboard, designed to offer deeper insights into your store's performance with just a glance. Track visitor behavior, sales trends, and more with our comprehensive and intuitive interface. This new dashboard is engineered to help you make informed decisions, driving your business towards unparalleled growth.</p>
      <p> <a href="#_">Read more</a> </p>
     </div>
    </div>
   </div>
  </div>
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-32 ">
   <div>
    <div class="lg:sticky lg:pb-16 top-0">
     <div class="pt-8">
      <p>10 February - 2024</p>
     </div>
    </div>
   </div>
   <div class="lg:col-span-2 pt-8">
    <div class="flex-shrink-0">
     <div class="mx-auto "> <img class="aspect-[4/3] object-cover" src="https://i.pinimg.com/564x/f9/1e/3a/f91e3a9f23239a2c26f5fd757dadc848.jpg" alt="#_">
      <h1>Enhanced Security Features</h1>
      <p class="line-clamp-4">Security is paramount, and with our latest update, we're introducing enhanced security features to safeguard your online store. Benefit from advanced encryption, real-time monitoring, and automated threat detection. These updates fortify your store's defenses, ensuring your data, and your customers' data, remains protected against evolving cyber threats.</p>
      <p> <a href="#_">Read more</a> </p>
     </div>
    </div>
   </div>
  </div>
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-32 ">
   <div>
    <div class="lg:sticky lg:pb-16 top-0">
     <div class="pt-8">
      <p>25 March - 2023</p>
     </div>
    </div>
   </div>
   <div class="lg:col-span-2 pt-8">
    <div class="flex-shrink-0">
     <div class="mx-auto "> <img class="aspect-[4/3] object-cover" src="https://i.pinimg.com/564x/5c/32/ad/5c32ade1feddce20f146d1b440f2ef96.jpg" alt="#_">
      <h1>New Feature Launch: Interactive Dashboards</h1>
      <p class="line-clamp-4">Our latest update introduces Interactive Dashboards, allowing users to dynamically interact with their data like never before. Customize, explore, and gain insights in a wholly intuitive and seamless manner.</p>
      <p> <a href="#_">Read more</a> </p>
     </div>
    </div>
   </div>
  </div> 
 </div> 
 <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8">
  <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
   <div class="flex w-0 flex-1 items-center p-4">
    <div class="w-full">
     <p class="text-sm font-medium text-neutral-900">Tutorial</p>
     <p class="mt-1 text-sm text-neutral-500">
      How to ceeate sticky changelog with Tailwind CSS and Astrojs
     </p>
     <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com"> by © Lexington Themes</a> </p>
    </div>
   </div>
   <div class="flex">
    <div class="flex flex-col divide-y divide-neutral-200">
     <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-sticky-changelog-with-tailwind-css-and-astrojs" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
     <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/sticky-changelog/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
    </div>
   </div>
  </div>
 </div> 
</section>

Related Examples

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

166
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

694
Brutalist Hero

Author:
threehymns

11 months ago

2.2k
Navbar
E-commerce Navbar

Author:
Aman kumar

1 year ago

4.4k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

5 months ago

779
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

503
Coffee
custom

Author:
Rebecca IRANKUNDA

5 months ago

443
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
Hero

Author:
Aman kumar

1 year ago

6.7k
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Author:
Ayyamperumal S

9 months ago

1.7k
Plasma
plasma

Author:
Raul antonio de la cruz hernandez

4 weeks ago

161
page heaading stacked
yeah booy, oh booy, o buy

Author:
Anonymous

1 year ago

9.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components