Tailwind Content Components (224)

Content from Saturn

Rich Text Feature Section with Headline and Illustration

A two-column content section with a small orange 'Rich Text Module' label, a large mixed-weight headline, and a textured orange character illustration on the left, paired with multiple paragraphs of body text on the right. The layout is a split screen with no navigation, forms, or interactive controls visible.

<section class="py-20 lg:py-24">
  <div class="px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="relative w-full lg:w-1/2 px-4 mb-12 lg:mb-0 lg:pr-24 xl:pr-40">
        <div class="max-w-md md:max-w-lg mx-auto lg:mr-0 mb-12 md:mb-20">
          <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">RICH TEXT MODULE</span>
          <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900">
            <span class="block">Saturn</span>
            <span>is a beautiful</span>
            <span class="block font-serif italic">UI Library</span>
          </h1>
        </div>
        <img class="block w-full" src="saturn-assets/images/content/image-big-article.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-md md:max-w-lg xl:max-w-2xl mx-auto lg:mx-0">
          <p class="text-2xl text-gray-800 mb-8">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi. Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt. Sed tristique sit faucibus nisi rutrum lacus. Sollicitudin non pretium commodo ut fermentum.</p>
          <p class="text-lg font-semibold text-gray-800 mb-8">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam.</p>
          <p class="text-lg text-gray-700 mb-8">Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
          <p class="text-lg text-gray-700 mb-8">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
          <p class="text-lg text-gray-700">Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh. Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Content from DarkPro

Tailwind CSS

DarkPro

Dark blog article header with breadcrumb, author byline, hero code image, and body text

A dark-themed blog article page showing a breadcrumb trail, large centered headline, author avatar with name and date, a wide framed hero photo of code on a monitor, and a single-column body text block. The layout is a centered stack with no interactive controls visible.

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto mb-12">
    <div class="max-w-xl lg:max-w-2xl mx-auto text-center">
      <div class="flex mb-4 items-center justify-center">
        <a class="text-xs text-neutral-400 hover:text-white transition-colors duration-200" href="#">Home</a>
        <svg class="w-3 h-3 mx-1 text-neutral-400" xmlns="http://www.w3.org/2000/svg" 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"></path>
        </svg>
        <a class="text-xs text-neutral-400 hover:text-white transition-colors duration-200" href="#">Blog</a>
        <svg class="w-3 h-3 mx-1 text-neutral-400" xmlns="http://www.w3.org/2000/svg" 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"></path>
        </svg>
        <a class="text-xs text-white" href="#">Article</a>
      </div>
      <h2 class="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar domor</h2>
      <div class="flex items-center justify-center">
        <div class="mr-4">
          <div class="w-16 h-16 rounded-full p-1 border border-white border-opacity-20">
            <img class="w-full h-full object-cover rounded-full" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
          </div>
        </div>
        <div class="text-left">
          <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Danny Bailey</h3>
          <p class="text-sm text-neutral-300">February 26, 2025</p>
        </div>
      </div>
    </div>
  </div>
  <div class="h-96 mb-16 container px-4 mx-auto">
    <div class="relative h-full">
      <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
      <div class="relative p-1 border border-white border-opacity-20 rounded-2xl h-full">
        <img class="w-full h-full object-cover rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHx0ZWNofGVufDB8fHx8MTc0ODkzNjgyOHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080" alt="">
      </div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto">
      <p class="mb-6 text-lg lg:text-xl leading-relaxed text-neutral-300">Building websites from wireframes that I had received. Some of those questions were:</p>
      <p class="mb-6 text-lg lg:text-xl leading-relaxed text-neutral-300">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg lg:text-xl leading-relaxed text-neutral-300">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it's easy to lose track. To save time and energy for myself, I gatheblue all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

Content from Solstice

Tailwind CSS

Solstice

Blog Article Page with Hero Image and Newsletter Signup

A single blog post layout with a back link, full-width hero photo, centered date and read time, large article title, and multi-section body text. It ends with a newsletter subscription callout and an author byline with a share button.

<section class="overflow-hidden py-24">
  <div class="container mx-auto px-4">
    <div class="flex justify-center">
      <a class=" text-gray-500 group mb-6 inline-flex items-center gap-2 flex-wrap" href="#">
        <div class="group-hover:text-gray-600 transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <span class="group-hover:text-gray-600 transition duration-200 font-bold">Back to Blog</span>
      </a>
    </div>
    <img class="w-full rounded-2xl mb-12" src="solstice-assets/images/blog/post-picture.png" alt="">
    <div class="flex items-center justify-center flex-wrap gap-3 mb-4">
      <span class="text-gray-500">17 Jul 2023</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="4" height="5" viewBox="0 0 4 5" fill="none"><circle cx="2" cy="2.66669" r="2" fill="#D1D1D1"></circle></svg>
      <span class="text-gray-500">4 min read</span>
    </div>
    <h1 class="text-center text-3xl lg:text-5xl font-bold mb-12 max-w-xl lg:max-w-3xl mx-auto">The Art and Science of Design Development: Crafting Digital Experiences</h1>
    <div class="px-8 lg:px-24">
      <h2 class="text-xl lg:text-4xl font-bold mb-6">The Essence of Design Development</h2>
      <p class="text-gray-700 font-medium text-lg mb-6">
        <span>Design development is the dynamic process that breathes life into creative concepts, transforming them into tangible and functional digital experiences. It's the synergy of artistic vision and technical prowess that defines the essence of this discipline.</span>
        <br>
        <br>
        <span>In the world of design development, aesthetics and functionality dance in harmony. It's not just about creating visually stunning interfaces; it's about crafting user-centric designs that resonate with the intended audience. By blending creativity with technological expertise, design development lays the foundation for digital products that not only captivate but also enrich the user experience.</span>
      </p>
      <ul class="mb-8">
        <li class="text-gray-700 text-lg font-medium">1. Defining the Vision</li>
        <li class="text-gray-700 text-lg font-medium">2. Team Collaboration</li>
        <li class="text-gray-700 text-lg font-medium">3. Data Acquisition and Management</li>
      </ul>
      <h2 class="text-xl lg:text-4xl font-bold mb-6">The Collaborative Symphony</h2>
      <p class="text-gray-700 font-medium text-lg mb-6">The development process was marked by countless hours of research, prototyping, and iteration. We explored various machine learning algorithms and deep neural network architectures to ensure optimal performance and accuracy in content classification. Through rigorous testing and fine-tuning, we trained our AI model to recognize patterns, categorize assets, and recommend relevant collections with impressive precision.</p>
      <p class="text-gray-700 font-medium text-lg mb-6">
        <span>1.</span>
        <span class="text-gray-900 font-bold">Defining the Vision:</span>
        <span>We begin by discussing the initial vision behind AI-Collections and the objectives we aimed to achieve. We highlight the need for a sophisticated content curation system that leverages AI capabilities to enhance user experiences and streamline information discovery.</span>
      </p>
      <p class="text-gray-700 font-medium text-lg mb-6">
        <span>2.</span>
        <span class="text-gray-900 font-bold">Team Collaboration:</span>
        <span>Successful projects require effective teamwork. We emphasize the importance of collaboration and detail how our team of experts, including developers, data scientists, and designers, worked together to bring AI-Collections to life. We share insights on how we fostered a creative and innovative environment throughout the development process.</span>
      </p>
      <p class="text-gray-700 font-medium text-lg mb-8">
        <span>3.</span>
        <span class="text-gray-900 font-bold">Data Acquisition and Management:</span>
        content demands a reliable and extensive dataset. We provide an overview of the strategies we employed to gather and manage the data required for AI-Collections. This includes sourcing relevant content, data cleaning, and ensuring data quality and diversity.
      </p>
      <h2 class="text-xl lg:text-4xl font-bold mb-6">From Pixels to Interactions</h2>
      <p class="text-gray-700 font-medium text-lg mb-8">
        <span>Design played a crucial role in the development of AI-Collections. We wanted to create an intuitive user interface that empowers users to effortlessly manage their digital assets. Our design team conducted extensive user research and feedback sessions to understand the pain points and needs of content creators. The result is a sleek, user-friendly interface that allows for seamless navigation, quick bookmarking, and efficient organization of assets.</span>
        <br>
        <br>
        <span>Throughout the process, we prioritized data privacy and security. We implemented robust encryption protocols and strict access controls to ensure that sensitive user information remains protected at all times. Building trust with our users has been of utmost importance, and we are committed to maintaining a secure environment for their valuable assets.</span>
      </p>
      <h2 class="text-xl lg:text-4xl font-bold mb-6">Conclusion</h2>
      <p class="text-gray-700 font-medium text-lg mb-12">Design development is the alchemical blend of creativity and technology, where pixels transform into interactive experiences. It's a collaborative endeavor, a symphony of design and code, crafting digital landscapes that captivate and engage. From the initial concept to the continuous evolution, design development is the heartbeat of the digital realm, shaping the way we interact with and experience technology.</p>
      <div class="w-full h-px bg-gray-200 mb-12"></div>
      <div class="rounded-lg px-6 py-4 flex items-center flex-wrap gap-2 bg-gray-50 border border-gray-200 mb-5">
        <span class="text-gray-700 text-lg">Interested in more tips like this?</span>
        <a class="flex items-center flex-wrap gap-2 text-orange-500 hover:text-orange-600 transition duration-200 font-bold" href="#">
          <span>Subscribe to our newsletter</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
            <path d="M4.99984 10.6667H15.4165M15.4165 10.6667L10.4165 5.66675M15.4165 10.6667L10.4165 15.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
      <div class="w-full h-px bg-gray-200 mb-6"></div>
      <div class="flex items-center justify-between flex-wrap gap-4">
        <div class="flex items-center gap-4 flex-wrap">
          <img src="solstice-assets/images/blog/avatar1.png" alt="">
          <div>
            <p class="text-lg font-semibold">John Doe</p>
            <span class="text-gray-500 font-medium">Content Writer, Solstice</span>
          </div>
        </div>
        <a class="py-2 px-4 h-10 inline-flex items-center justify-center w-full sm:w-auto rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Share this post</a>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Content from Nightsable

Tailwind CSS

Nightsable

Blog article page with interview content and From the blog card grid

A dark-themed blog article layout showing an interview header, hero image, body text with headings, a blockquote, inline image, share buttons, and a three-card 'From the blog' grid below. The outer component is a blog post page with a footer-style related posts section.

<section class="relative py-20 overflow-hidden">
  <img class="absolute top-0 left-0" src="nightsable-assets/images/blog-content/shadow.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative z-10 mb-12 md:max-w-md text-center mx-auto">
      <h2 class="font-heading mb-4 text-3xl text-white tracking-3xl">Women in business: an interview with Sarah Townsend</h2>
      <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="flex flex-wrap justify-center items-center -m-2">
        <div class="w-auto p-2">
          <img src="nightsable-assets/images/blog-content/avatar.png" alt="">
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-white font-medium tracking-tighter">Wade Warren</p>
        </div>
        <div class="w-auto p-2">
          <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
          </svg>
        </div>
        <div class="w-auto p-2">
          <p class="text-sm text-white font-medium tracking-tighter">9 min read</p>
        </div>
      </div>
    </div>
  </div>
  <div class="relative px-4">
    <img class="hidden md:block absolute -top-44 right-0" src="nightsable-assets/images/blog-content/lines.png" alt="">
    <img class="relative z-10 mx-auto border border-white border-opacity-10 rounded-5xl" src="nightsable-assets/images/blog-content/header.png" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative border-b border-blueGray-900">
      <div class="max-w-3xl pt-8 mx-auto">
        <div class="border-b border-blueGray-900">
          <h3 class="mb-10 text-2xl text-gray-100 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</h3>
        </div>
        <div class="pt-8 pb-16">
          <h2 class="font-heading mb-4 text-3xl text-blueGray-50 tracking-3xl">Header 1</h2>
          <p class="mb-6 text-lg text-blueGray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
          <div class="flex flex-wrap mb-9">
            <div class="w-auto p-3">
              <div class="w-0.5 bg-green-400 h-full rounded-md"></div>
            </div>
            <div class="flex-1 mb-5 p-3">
              <h3 class="mb-4 text-2xl text-gray-200 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</h3>
              <p class="text-lg text-gray-100">— John Doe, CEO &amp; Founder</p>
            </div>
            <p class="mb-8 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
            <img class="mb-4" src="nightsable-assets/images/blog-content/header2.png" alt="">
            <p class="text-lg text-blueGray-200">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
          </div>
          <h2 class="font-heading mb-4 text-3xl text-blueGray-50 tracking-3xl">Header 1</h2>
          <h3 class="mb-9 text-2xl text-gray-100 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</h3>
          <h3 class="mb-9 text-2xl text-gray-100 tracking-2xl">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</h3>
          <ul class="mb-9">
            <li class="text-2xl text-gray-100">1. Lectus id duis vitae porttitor enim gravida morbi.</li>
            <li class="text-2xl text-gray-100">2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
            <li class="text-2xl text-gray-100">3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
          </ul>
          <h3 class="mb-12 text-2xl text-gray-100 tracking-2xl">Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim. <a class="text-green-500 underline" href="#">Vivamus id pharetra massa</a>. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</h3>
          <div class="flex flex-wrap justify-center -m-2">
            <div class="w-auto p-2"><a class="inline-block px-8 py-4 text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Copy Link</a></div>
            <div class="w-auto p-2">
              <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
                <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.59948 3.43344H9.16615V0.78344C8.4076 0.704562 7.64544 0.665619 6.88281 0.666773C4.61615 0.666773 3.06615 2.05011 3.06615 4.58344V6.76677H0.507812V9.73344H3.06615V17.3334H6.13281V9.73344H8.68281L9.06614 6.76677H6.13281V4.87511C6.13281 4.00011 6.36615 3.43344 7.59948 3.43344Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto p-2">
              <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.3346 1.83326C16.7083 2.10501 16.0458 2.28465 15.368 2.3666C16.0831 1.93936 16.619 1.26725 16.8763 0.474931C16.2043 0.874983 15.4686 1.15684 14.7013 1.30826C14.1884 0.752074 13.5054 0.381844 12.7595 0.25564C12.0135 0.129436 11.2468 0.254396 10.5795 0.610922C9.91217 0.967448 9.38208 1.53537 9.07234 2.22563C8.76259 2.91588 8.69071 3.68942 8.86797 4.42493C7.50916 4.3562 6.18 4.00239 4.96685 3.38648C3.75369 2.77057 2.68367 1.90634 1.8263 0.84993C1.52558 1.37507 1.36757 1.96978 1.36797 2.57493C1.3669 3.13692 1.50482 3.69044 1.76943 4.18623C2.03405 4.68202 2.41715 5.10469 2.88464 5.4166C2.34128 5.40181 1.80954 5.25601 1.33464 4.9916V5.03326C1.33871 5.82067 1.61463 6.58251 2.11573 7.1899C2.61683 7.7973 3.31235 8.21297 4.08464 8.3666C3.78735 8.45707 3.4787 8.50477 3.16797 8.50826C2.95288 8.50575 2.73832 8.48625 2.5263 8.44993C2.74623 9.12727 3.17182 9.71922 3.74386 10.1434C4.31591 10.5676 5.00595 10.8029 5.71797 10.8166C4.51564 11.7627 3.03121 12.279 1.5013 12.2833C1.22275 12.2842 0.944415 12.2675 0.667969 12.2333C2.22999 13.2418 4.05031 13.7772 5.90964 13.7749C7.19271 13.7883 8.46558 13.5458 9.6539 13.0617C10.8422 12.5775 11.9222 11.8615 12.8306 10.9553C13.7391 10.0492 14.4579 8.97109 14.9451 7.78402C15.4323 6.59695 15.678 5.3247 15.668 4.0416C15.668 3.89993 15.668 3.74993 15.668 3.59993C16.3219 3.11227 16.8859 2.51445 17.3346 1.83326Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto p-2">
              <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.4513 3.55008C13.2535 3.55008 13.0602 3.60873 12.8957 3.71861C12.7313 3.82849 12.6031 3.98467 12.5274 4.1674C12.4517 4.35012 12.4319 4.55119 12.4705 4.74517C12.5091 4.93915 12.6043 5.11734 12.7442 5.25719C12.884 5.39704 13.0622 5.49228 13.2562 5.53087C13.4502 5.56945 13.6513 5.54965 13.834 5.47396C14.0167 5.39827 14.1729 5.2701 14.2828 5.10565C14.3927 4.9412 14.4513 4.74786 14.4513 4.55008C14.4513 4.28486 14.3459 4.03051 14.1584 3.84297C13.9709 3.65544 13.7165 3.55008 13.4513 3.55008V3.55008ZM17.2846 5.56675C17.2684 4.87533 17.1389 4.19125 16.9013 3.54175C16.6894 2.98603 16.3596 2.48281 15.9346 2.06675C15.522 1.6396 15.0176 1.3119 14.4596 1.10841C13.8118 0.863549 13.127 0.73109 12.4346 0.716748C11.5513 0.666748 11.268 0.666748 9.0013 0.666748C6.73464 0.666748 6.4513 0.666748 5.56797 0.716748C4.8756 0.73109 4.19075 0.863549 3.54297 1.10841C2.98603 1.31396 2.48208 1.64138 2.06797 2.06675C1.64082 2.4794 1.31312 2.98378 1.10964 3.54175C0.864769 4.18953 0.73231 4.87438 0.717969 5.56675C0.667969 6.45008 0.667969 6.73342 0.667969 9.00008C0.667969 11.2667 0.667969 11.5501 0.717969 12.4334C0.73231 13.1258 0.864769 13.8106 1.10964 14.4584C1.31312 15.0164 1.64082 15.5208 2.06797 15.9334C2.48208 16.3588 2.98603 16.6862 3.54297 16.8917C4.19075 17.1366 4.8756 17.2691 5.56797 17.2834C6.4513 17.3334 6.73464 17.3334 9.0013 17.3334C11.268 17.3334 11.5513 17.3334 12.4346 17.2834C13.127 17.2691 13.8118 17.1366 14.4596 16.8917C15.0176 16.6883 15.522 16.3606 15.9346 15.9334C16.3615 15.5189 16.6916 15.0152 16.9013 14.4584C17.1389 13.8089 17.2684 13.1248 17.2846 12.4334C17.2846 11.5501 17.3346 11.2667 17.3346 9.00008C17.3346 6.73342 17.3346 6.45008 17.2846 5.56675V5.56675ZM15.7846 12.3334C15.7786 12.8624 15.6828 13.3865 15.5013 13.8834C15.3682 14.2461 15.1545 14.5738 14.8763 14.8417C14.606 15.1172 14.279 15.3304 13.918 15.4667C13.4211 15.6482 12.8969 15.744 12.368 15.7501C11.5346 15.7917 11.2263 15.8001 9.03464 15.8001C6.84297 15.8001 6.53464 15.8001 5.7013 15.7501C5.15204 15.7604 4.60513 15.6758 4.08464 15.5001C3.73945 15.3568 3.42743 15.1441 3.16797 14.8751C2.89138 14.6074 2.68034 14.2794 2.5513 13.9167C2.34785 13.4127 2.23501 12.8767 2.21797 12.3334C2.21797 11.5001 2.16797 11.1917 2.16797 9.00008C2.16797 6.80842 2.16797 6.50008 2.21797 5.66675C2.2217 5.12596 2.32043 4.59004 2.50964 4.08341C2.65634 3.73167 2.88152 3.41813 3.16797 3.16675C3.42115 2.88022 3.73404 2.65266 4.08464 2.50008C4.59259 2.31678 5.12797 2.22098 5.66797 2.21675C6.5013 2.21675 6.80964 2.16675 9.0013 2.16675C11.193 2.16675 11.5013 2.16675 12.3346 2.21675C12.8636 2.22282 13.3877 2.31862 13.8846 2.50008C14.2633 2.64063 14.6032 2.86912 14.8763 3.16675C15.1494 3.42273 15.3628 3.73569 15.5013 4.08341C15.6865 4.59086 15.7824 5.12656 15.7846 5.66675C15.8263 6.50008 15.8346 6.80842 15.8346 9.00008C15.8346 11.1917 15.8263 11.5001 15.7846 12.3334ZM9.0013 4.72508C8.15614 4.72673 7.33044 4.97885 6.62851 5.4496C5.92659 5.92034 5.37995 6.58858 5.05766 7.36988C4.73538 8.15117 4.65191 9.01047 4.8178 9.83919C4.98369 10.6679 5.3915 11.4289 5.9897 12.0259C6.5879 12.6229 7.34964 13.0293 8.17869 13.1935C9.00773 13.3578 9.86686 13.2727 10.6475 12.9489C11.4282 12.6251 12.0954 12.0771 12.5647 11.3743C13.0341 10.6714 13.2846 9.84524 13.2846 9.00008C13.2857 8.43767 13.1756 7.88059 12.9607 7.36088C12.7457 6.84117 12.4301 6.36909 12.032 5.97179C11.634 5.57449 11.1613 5.25981 10.6411 5.04586C10.121 4.8319 9.56371 4.72288 9.0013 4.72508V4.72508ZM9.0013 11.7751C8.45246 11.7751 7.91594 11.6123 7.45959 11.3074C7.00325 11.0025 6.64757 10.5691 6.43754 10.062C6.2275 9.55496 6.17255 8.997 6.27962 8.45871C6.3867 7.92041 6.65099 7.42595 7.03908 7.03786C7.42717 6.64977 7.92163 6.38548 8.45993 6.2784C8.99822 6.17133 9.55618 6.22628 10.0632 6.43632C10.5703 6.64635 11.0037 7.00203 11.3086 7.45837C11.6136 7.91472 11.7763 8.45124 11.7763 9.00008C11.7763 9.3645 11.7045 9.72535 11.5651 10.062C11.4256 10.3987 11.2212 10.7046 10.9635 10.9623C10.7058 11.22 10.3999 11.4244 10.0632 11.5638C9.72657 11.7033 9.36572 11.7751 9.0013 11.7751V11.7751Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-16">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">The latest news</span>
      <h2 class="font-heading mb-16 text-5xl lg:text-7xl xl:text-8xl text-white tracking-5xl lg:tracking-7xl xl:tracking-8xl">From the blog</h2>
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/cash.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/skyscraper.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/skyscraper2.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Content from Zeus

Tailwind CSS

Zeus

Blog Article Header with Author and Hero Image

A centered blog article header showing breadcrumb navigation, a two-line bold heading, an author avatar with name and date, followed by a full-width photographic hero image. Decorative blue and yellow icon circles and dashed line swirls flank the heading area.

<section class="relative py-20">
  <img class="hidden lg:block absolute top-0 left-0 mt-24" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="hidden lg:block absolute top-0 right-0 mt-40" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container px-4 mx-auto mb-16">
    <div class="max-w-2xl mx-auto text-center">
      <div class="flex mb-8 items-center justify-center text-xs text-gray-500 font-semibold">
        <a href="#">Home</a>
        <span class="inline-block px-1">/</span>
        <a href="#">Blog</a>
        <span class="inline-block px-1">/</span>
        <a href="#">Article</a>
      </div>
      <h2 class="mb-10 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <div class="flex items-center justify-center">
        <div class="mr-6">
          <img class="w-16 h-16 object-cover object-top rounded-full" src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
        </div>
        <div class="text-left">
          <h3 class="mb-2 text-2xl font-semibold font-heading">Esther Bailey</h3>
          <p class="text-gray-500">February 26, 2021</p>
        </div>
      </div>
    </div>
  </div>
  <div class="h-112 lg:h-1/2">
    <img class="w-full h-full object-cover object-top" src="https://images.unsplash.com/photo-1525129498994-580709352e20?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
  </div>
</section>

Content from Artemis Dashboard

Tailwind CSS

Artemis Dashboard

Project Card Grid with Avatars and Progress Bars

A 4-column grid of white project cards, each showing a colored folder icon, project name, location, client name, overlapping avatars with a +3 count, a colored progress bar, and a phase badge with status text. The layout repeats identical cards across two rows on a light gray background.

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded">
          <div class="flex items-center mb-6">
            <span class="flex-shrink-0 inline-flex justify-center items-center mr-3 w-10 h-10 rounded-full bg-purple-500">
              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8335 2.58333H9.60014L9.33348 1.75C9.1606 1.26102 8.83993 0.837918 8.41589 0.539299C7.99185 0.24068 7.48544 0.0813322 6.96681 0.0833316H3.16681C2.50377 0.0833316 1.86788 0.346724 1.39904 0.815565C0.930201 1.28441 0.666809 1.92029 0.666809 2.58333V13.4167C0.666809 14.0797 0.930201 14.7156 1.39904 15.1844C1.86788 15.6533 2.50377 15.9167 3.16681 15.9167H14.8335C15.4965 15.9167 16.1324 15.6533 16.6012 15.1844C17.0701 14.7156 17.3335 14.0797 17.3335 13.4167V5.08333C17.3335 4.42029 17.0701 3.78441 16.6012 3.31557C16.1324 2.84672 15.4965 2.58333 14.8335 2.58333ZM15.6668 13.4167C15.6668 13.6377 15.579 13.8496 15.4227 14.0059C15.2665 14.1622 15.0545 14.25 14.8335 14.25H3.16681C2.9458 14.25 2.73383 14.1622 2.57755 14.0059C2.42127 13.8496 2.33348 13.6377 2.33348 13.4167V2.58333C2.33348 2.36232 2.42127 2.15036 2.57755 1.99408C2.73383 1.8378 2.9458 1.75 3.16681 1.75H6.96681C7.14151 1.74955 7.31194 1.80401 7.454 1.9057C7.59606 2.00739 7.70257 2.15115 7.75848 2.31667L8.20848 3.68333C8.26438 3.84885 8.37089 3.99261 8.51295 4.0943C8.65501 4.19598 8.82544 4.25045 9.00014 4.25H14.8335C15.0545 4.25 15.2665 4.3378 15.4227 4.49408C15.579 4.65036 15.6668 4.86232 15.6668 5.08333V13.4167Z" fill="#E6D4F8"></path>
              </svg>
            </span>
            <div>
              <p class="text-xs font-bold">Example project name here dolor sit</p>
            </div>
          </div>
          <div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6415 9.65834C10.5397 9.61785 10.431 9.5978 10.3215 9.59934C10.212 9.60088 10.1038 9.62397 10.0032 9.66731C9.90261 9.71064 9.81153 9.77337 9.73518 9.8519C9.65882 9.93043 9.59868 10.0232 9.55819 10.125C9.5177 10.2268 9.49765 10.3355 9.49919 10.4451C9.50073 10.5546 9.52382 10.6627 9.56716 10.7633C9.61049 10.8639 9.67321 10.955 9.75175 11.0314C9.83028 11.1077 9.92308 11.1678 10.0249 11.2083C11.2415 11.6917 11.9999 12.4417 11.9999 13.1667C11.9999 14.35 9.94986 15.6667 6.99986 15.6667C4.04986 15.6667 1.99986 14.35 1.99986 13.1667C1.99986 12.4417 2.75819 11.6917 3.97486 11.2083C4.1804 11.1266 4.34504 10.9665 4.43256 10.7633C4.52007 10.5602 4.5233 10.3305 4.44152 10.125C4.35975 9.91946 4.19967 9.75482 3.99651 9.66731C3.79334 9.57979 3.56373 9.57656 3.35819 9.65834C1.46652 10.4083 0.333191 11.7167 0.333191 13.1667C0.333191 15.5 3.25819 17.3333 6.99986 17.3333C10.7415 17.3333 13.6665 15.5 13.6665 13.1667C13.6665 11.7167 12.5332 10.4083 10.6415 9.65834ZM6.16652 7.21667V13.1667C6.16652 13.3877 6.25432 13.5996 6.4106 13.7559C6.56688 13.9122 6.77884 14 6.99986 14C7.22087 14 7.43283 13.9122 7.58911 13.7559C7.74539 13.5996 7.83319 13.3877 7.83319 13.1667V7.21667C8.61874 7.01384 9.30335 6.53148 9.75869 5.86C10.214 5.18852 10.4088 4.37402 10.3066 3.56917C10.2044 2.76433 9.81214 2.0244 9.20338 1.48807C8.59463 0.951747 7.81117 0.655853 6.99986 0.655853C6.18855 0.655853 5.40508 0.951747 4.79633 1.48807C4.18757 2.0244 3.79532 2.76433 3.69309 3.56917C3.59086 4.37402 3.78568 5.18852 4.24102 5.86C4.69637 6.53148 5.38097 7.01384 6.16652 7.21667ZM6.99986 2.33334C7.32949 2.33334 7.65172 2.43109 7.92581 2.61422C8.19989 2.79736 8.41351 3.05766 8.53966 3.3622C8.6658 3.66674 8.69881 4.00185 8.6345 4.32516C8.57019 4.64846 8.41146 4.94543 8.17837 5.17852C7.94528 5.41161 7.64831 5.57034 7.32501 5.63465C7.00171 5.69896 6.66659 5.66595 6.36205 5.53981C6.05751 5.41366 5.79721 5.20004 5.61407 4.92596C5.43094 4.65187 5.33319 4.32964 5.33319 4.00001C5.33319 3.55798 5.50879 3.13406 5.82135 2.82149C6.13391 2.50893 6.55783 2.33334 6.99986 2.33334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Warsaw, Poland</span>
            </div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.833 3.41668H12.333V2.58334C12.333 1.9203 12.0696 1.28442 11.6008 0.815577C11.1319 0.346736 10.496 0.0833435 9.83299 0.0833435H8.16632C7.50328 0.0833435 6.86739 0.346736 6.39855 0.815577C5.92971 1.28442 5.66632 1.9203 5.66632 2.58334V3.41668H3.16632C2.50328 3.41668 1.86739 3.68007 1.39855 4.14891C0.929713 4.61775 0.666321 5.25363 0.666321 5.91668V13.4167C0.666321 14.0797 0.929713 14.7156 1.39855 15.1844C1.86739 15.6533 2.50328 15.9167 3.16632 15.9167H14.833C15.496 15.9167 16.1319 15.6533 16.6008 15.1844C17.0696 14.7156 17.333 14.0797 17.333 13.4167V5.91668C17.333 5.25363 17.0696 4.61775 16.6008 4.14891C16.1319 3.68007 15.496 3.41668 14.833 3.41668ZM7.33299 2.58334C7.33299 2.36233 7.42079 2.15037 7.57707 1.99409C7.73335 1.83781 7.94531 1.75001 8.16632 1.75001H9.83299C10.054 1.75001 10.266 1.83781 10.4222 1.99409C10.5785 2.15037 10.6663 2.36233 10.6663 2.58334V3.41668H7.33299V2.58334ZM15.6663 13.4167C15.6663 13.6377 15.5785 13.8497 15.4222 14.0059C15.266 14.1622 15.054 14.25 14.833 14.25H3.16632C2.94531 14.25 2.73335 14.1622 2.57707 14.0059C2.42079 13.8497 2.33299 13.6377 2.33299 13.4167V9.20834H4.83299V10.0833C4.83299 10.3044 4.92079 10.5163 5.07707 10.6726C5.23335 10.8289 5.44531 10.9167 5.66632 10.9167C5.88733 10.9167 6.0993 10.8289 6.25558 10.6726C6.41186 10.5163 6.49965 10.3044 6.49965 10.0833V9.20834H11.4997V10.0833C11.4997 10.3044 11.5875 10.5163 11.7437 10.6726C11.9 10.8289 12.112 10.9167 12.333 10.9167C12.554 10.9167 12.766 10.8289 12.9222 10.6726C13.0785 10.5163 13.1663 10.3044 13.1663 10.0833V9.20834H15.6663V13.4167ZM15.6663 7.58334H2.33299V5.91668C2.33299 5.69566 2.42079 5.4837 2.57707 5.32742C2.73335 5.17114 2.94531 5.08334 3.16632 5.08334H14.833C15.054 5.08334 15.266 5.17114 15.4222 5.32742C15.5785 5.4837 15.6663 5.69566 15.6663 5.91668V7.58334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Shuffle.dev</span>
            </div>
            <div class="flex items-center justify-between mb-10">
              <div class="flex items-center">
                <img class="w-8 h-8 rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1528936466093-76ffdfcf7a40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                <div class="inline-flex -ml-2 items-center justify-center w-8 h-8 rounded-full bg-indigo-50 text-xs font-medium text-indigo-500">+3</div>
              </div>
              <a href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00001 6.66666C7.26363 6.66666 6.66668 7.26362 6.66668 8C6.66668 8.73637 7.26363 9.33333 8.00001 9.33333C8.73639 9.33333 9.33334 8.73637 9.33334 7.99999C9.33334 7.26362 8.73639 6.66666 8.00001 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M12.6667 6.66666C11.9303 6.66666 11.3333 7.26362 11.3333 8C11.3333 8.73637 11.9303 9.33333 12.6667 9.33333C13.403 9.33333 14 8.73637 14 7.99999C14 7.26362 13.403 6.66666 12.6667 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M3.33332 6.66666C2.59694 6.66666 1.99999 7.26362 1.99999 8C1.99999 8.73637 2.59694 9.33333 3.33332 9.33333C4.0697 9.33333 4.66666 8.73637 4.66666 7.99999C4.66666 7.26362 4.0697 6.66666 3.33332 6.66666Z" fill="#E1E4E8"></path>
                </svg>
              </a>
            </div>
            <div class="relative w-full h-1 mb-3 rounded-full bg-gray-50">
              <div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-purple-500"></div>
            </div>
            <div class="flex items-center">
              <span class="inline-block py-1 px-2 mr-2 bg-indigo-50 rounded-full text-xs text-indigo-500">Phase 2</span>
              <span class="text-xs text-gray-500 font-medium">Implementation</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded">
          <div class="flex items-center mb-6">
            <span class="flex-shrink-0 inline-flex justify-center items-center mr-3 w-10 h-10 rounded-full bg-orange-500">
              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8335 2.58333H9.60016L9.33349 1.75C9.16062 1.26102 8.83995 0.837918 8.41591 0.539299C7.99187 0.24068 7.48546 0.0813322 6.96683 0.0833316H3.16682C2.50378 0.0833316 1.8679 0.346724 1.39906 0.815565C0.930217 1.28441 0.666824 1.92029 0.666824 2.58333V13.4167C0.666824 14.0797 0.930217 14.7156 1.39906 15.1844C1.8679 15.6533 2.50378 15.9167 3.16682 15.9167H14.8335C15.4965 15.9167 16.1324 15.6533 16.6013 15.1844C17.0701 14.7156 17.3335 14.0797 17.3335 13.4167V5.08333C17.3335 4.42029 17.0701 3.78441 16.6013 3.31557C16.1324 2.84672 15.4965 2.58333 14.8335 2.58333ZM15.6668 13.4167C15.6668 13.6377 15.579 13.8496 15.4227 14.0059C15.2665 14.1622 15.0545 14.25 14.8335 14.25H3.16682C2.94581 14.25 2.73385 14.1622 2.57757 14.0059C2.42129 13.8496 2.33349 13.6377 2.33349 13.4167V2.58333C2.33349 2.36232 2.42129 2.15036 2.57757 1.99408C2.73385 1.8378 2.94581 1.75 3.16682 1.75H6.96683C7.14153 1.74955 7.31195 1.80401 7.45402 1.9057C7.59608 2.00739 7.70259 2.15115 7.75849 2.31667L8.20849 3.68333C8.2644 3.84885 8.37091 3.99261 8.51297 4.0943C8.65503 4.19598 8.82545 4.25045 9.00016 4.25H14.8335C15.0545 4.25 15.2665 4.3378 15.4227 4.49408C15.579 4.65036 15.6668 4.86232 15.6668 5.08333V13.4167Z" fill="#FDE4D4"></path>
              </svg>
            </span>
            <div>
              <p class="text-xs font-bold">Example project name here dolor sit</p>
            </div>
          </div>
          <div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6415 9.65834C10.5397 9.61785 10.431 9.5978 10.3215 9.59934C10.212 9.60088 10.1038 9.62397 10.0032 9.66731C9.90261 9.71064 9.81153 9.77337 9.73518 9.8519C9.65882 9.93043 9.59868 10.0232 9.55819 10.125C9.5177 10.2268 9.49765 10.3355 9.49919 10.4451C9.50073 10.5546 9.52382 10.6627 9.56716 10.7633C9.61049 10.8639 9.67321 10.955 9.75175 11.0314C9.83028 11.1077 9.92308 11.1678 10.0249 11.2083C11.2415 11.6917 11.9999 12.4417 11.9999 13.1667C11.9999 14.35 9.94986 15.6667 6.99986 15.6667C4.04986 15.6667 1.99986 14.35 1.99986 13.1667C1.99986 12.4417 2.75819 11.6917 3.97486 11.2083C4.1804 11.1266 4.34504 10.9665 4.43256 10.7633C4.52007 10.5602 4.5233 10.3305 4.44152 10.125C4.35975 9.91946 4.19967 9.75482 3.99651 9.66731C3.79334 9.57979 3.56373 9.57656 3.35819 9.65834C1.46652 10.4083 0.333191 11.7167 0.333191 13.1667C0.333191 15.5 3.25819 17.3333 6.99986 17.3333C10.7415 17.3333 13.6665 15.5 13.6665 13.1667C13.6665 11.7167 12.5332 10.4083 10.6415 9.65834ZM6.16652 7.21667V13.1667C6.16652 13.3877 6.25432 13.5996 6.4106 13.7559C6.56688 13.9122 6.77884 14 6.99986 14C7.22087 14 7.43283 13.9122 7.58911 13.7559C7.74539 13.5996 7.83319 13.3877 7.83319 13.1667V7.21667C8.61874 7.01384 9.30335 6.53148 9.75869 5.86C10.214 5.18852 10.4088 4.37402 10.3066 3.56917C10.2044 2.76433 9.81214 2.0244 9.20338 1.48807C8.59463 0.951747 7.81117 0.655853 6.99986 0.655853C6.18855 0.655853 5.40508 0.951747 4.79633 1.48807C4.18757 2.0244 3.79532 2.76433 3.69309 3.56917C3.59086 4.37402 3.78568 5.18852 4.24102 5.86C4.69637 6.53148 5.38097 7.01384 6.16652 7.21667ZM6.99986 2.33334C7.32949 2.33334 7.65172 2.43109 7.92581 2.61422C8.19989 2.79736 8.41351 3.05766 8.53966 3.3622C8.6658 3.66674 8.69881 4.00185 8.6345 4.32516C8.57019 4.64846 8.41146 4.94543 8.17837 5.17852C7.94528 5.41161 7.64831 5.57034 7.32501 5.63465C7.00171 5.69896 6.66659 5.66595 6.36205 5.53981C6.05751 5.41366 5.79721 5.20004 5.61407 4.92596C5.43094 4.65187 5.33319 4.32964 5.33319 4.00001C5.33319 3.55798 5.50879 3.13406 5.82135 2.82149C6.13391 2.50893 6.55783 2.33334 6.99986 2.33334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Warsaw, Poland</span>
            </div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.833 3.41668H12.333V2.58334C12.333 1.9203 12.0696 1.28442 11.6008 0.815577C11.1319 0.346736 10.496 0.0833435 9.83299 0.0833435H8.16632C7.50328 0.0833435 6.86739 0.346736 6.39855 0.815577C5.92971 1.28442 5.66632 1.9203 5.66632 2.58334V3.41668H3.16632C2.50328 3.41668 1.86739 3.68007 1.39855 4.14891C0.929713 4.61775 0.666321 5.25363 0.666321 5.91668V13.4167C0.666321 14.0797 0.929713 14.7156 1.39855 15.1844C1.86739 15.6533 2.50328 15.9167 3.16632 15.9167H14.833C15.496 15.9167 16.1319 15.6533 16.6008 15.1844C17.0696 14.7156 17.333 14.0797 17.333 13.4167V5.91668C17.333 5.25363 17.0696 4.61775 16.6008 4.14891C16.1319 3.68007 15.496 3.41668 14.833 3.41668ZM7.33299 2.58334C7.33299 2.36233 7.42079 2.15037 7.57707 1.99409C7.73335 1.83781 7.94531 1.75001 8.16632 1.75001H9.83299C10.054 1.75001 10.266 1.83781 10.4222 1.99409C10.5785 2.15037 10.6663 2.36233 10.6663 2.58334V3.41668H7.33299V2.58334ZM15.6663 13.4167C15.6663 13.6377 15.5785 13.8497 15.4222 14.0059C15.266 14.1622 15.054 14.25 14.833 14.25H3.16632C2.94531 14.25 2.73335 14.1622 2.57707 14.0059C2.42079 13.8497 2.33299 13.6377 2.33299 13.4167V9.20834H4.83299V10.0833C4.83299 10.3044 4.92079 10.5163 5.07707 10.6726C5.23335 10.8289 5.44531 10.9167 5.66632 10.9167C5.88733 10.9167 6.0993 10.8289 6.25558 10.6726C6.41186 10.5163 6.49965 10.3044 6.49965 10.0833V9.20834H11.4997V10.0833C11.4997 10.3044 11.5875 10.5163 11.7437 10.6726C11.9 10.8289 12.112 10.9167 12.333 10.9167C12.554 10.9167 12.766 10.8289 12.9222 10.6726C13.0785 10.5163 13.1663 10.3044 13.1663 10.0833V9.20834H15.6663V13.4167ZM15.6663 7.58334H2.33299V5.91668C2.33299 5.69566 2.42079 5.4837 2.57707 5.32742C2.73335 5.17114 2.94531 5.08334 3.16632 5.08334H14.833C15.054 5.08334 15.266 5.17114 15.4222 5.32742C15.5785 5.4837 15.6663 5.69566 15.6663 5.91668V7.58334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Shuffle.dev</span>
            </div>
            <div class="flex items-center justify-between mb-10">
              <div class="flex items-center">
                <img class="w-8 h-8 rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1528936466093-76ffdfcf7a40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                <div class="inline-flex -ml-2 items-center justify-center w-8 h-8 rounded-full bg-indigo-50 text-xs font-medium text-indigo-500">+3</div>
              </div>
              <a href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00001 6.66666C7.26363 6.66666 6.66668 7.26362 6.66668 8C6.66668 8.73637 7.26363 9.33333 8.00001 9.33333C8.73639 9.33333 9.33334 8.73637 9.33334 7.99999C9.33334 7.26362 8.73639 6.66666 8.00001 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M12.6667 6.66666C11.9303 6.66666 11.3333 7.26362 11.3333 8C11.3333 8.73637 11.9303 9.33333 12.6667 9.33333C13.403 9.33333 14 8.73637 14 7.99999C14 7.26362 13.403 6.66666 12.6667 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M3.33332 6.66666C2.59694 6.66666 1.99999 7.26362 1.99999 8C1.99999 8.73637 2.59694 9.33333 3.33332 9.33333C4.0697 9.33333 4.66666 8.73637 4.66666 7.99999C4.66666 7.26362 4.0697 6.66666 3.33332 6.66666Z" fill="#E1E4E8"></path>
                </svg>
              </a>
            </div>
            <div class="relative w-full h-1 mb-3 rounded-full bg-gray-50">
              <div class="absolute top-0 left-0 h-full w-1/6 rounded-full bg-orange-500"></div>
            </div>
            <div class="flex items-center">
              <span class="inline-block py-1 px-2 mr-2 bg-indigo-50 rounded-full text-xs text-indigo-500">Phase 1</span>
              <span class="text-xs text-gray-500 font-medium">Getting started</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded">
          <div class="flex items-center mb-6">
            <span class="flex-shrink-0 inline-flex justify-center items-center mr-3 w-10 h-10 rounded-full bg-indigo-500">
              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8335 2.58333H9.60016L9.3335 1.75C9.16062 1.26102 8.83995 0.837918 8.41591 0.539299C7.99187 0.24068 7.48546 0.0813322 6.96683 0.0833316H3.16683C2.50379 0.0833316 1.8679 0.346724 1.39906 0.815565C0.93022 1.28441 0.666828 1.92029 0.666828 2.58333V13.4167C0.666828 14.0797 0.93022 14.7156 1.39906 15.1844C1.8679 15.6533 2.50379 15.9167 3.16683 15.9167H14.8335C15.4965 15.9167 16.1324 15.6533 16.6013 15.1844C17.0701 14.7156 17.3335 14.0797 17.3335 13.4167V5.08333C17.3335 4.42029 17.0701 3.78441 16.6013 3.31557C16.1324 2.84672 15.4965 2.58333 14.8335 2.58333ZM15.6668 13.4167C15.6668 13.6377 15.579 13.8496 15.4228 14.0059C15.2665 14.1622 15.0545 14.25 14.8335 14.25H3.16683C2.94581 14.25 2.73385 14.1622 2.57757 14.0059C2.42129 13.8496 2.33349 13.6377 2.33349 13.4167V2.58333C2.33349 2.36232 2.42129 2.15036 2.57757 1.99408C2.73385 1.8378 2.94581 1.75 3.16683 1.75H6.96683C7.14153 1.74955 7.31196 1.80401 7.45402 1.9057C7.59608 2.00739 7.70259 2.15115 7.7585 2.31667L8.2085 3.68333C8.2644 3.84885 8.37091 3.99261 8.51297 4.0943C8.65503 4.19598 8.82546 4.25045 9.00016 4.25H14.8335C15.0545 4.25 15.2665 4.3378 15.4228 4.49408C15.579 4.65036 15.6668 4.86232 15.6668 5.08333V13.4167Z" fill="#D5E2FD"></path>
              </svg>
            </span>
            <div>
              <p class="text-xs font-bold">Example project name here dolor sit</p>
            </div>
          </div>
          <div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6415 9.65834C10.5397 9.61785 10.431 9.5978 10.3215 9.59934C10.212 9.60088 10.1038 9.62397 10.0032 9.66731C9.90261 9.71064 9.81153 9.77337 9.73518 9.8519C9.65882 9.93043 9.59868 10.0232 9.55819 10.125C9.5177 10.2268 9.49765 10.3355 9.49919 10.4451C9.50073 10.5546 9.52382 10.6627 9.56716 10.7633C9.61049 10.8639 9.67321 10.955 9.75175 11.0314C9.83028 11.1077 9.92308 11.1678 10.0249 11.2083C11.2415 11.6917 11.9999 12.4417 11.9999 13.1667C11.9999 14.35 9.94986 15.6667 6.99986 15.6667C4.04986 15.6667 1.99986 14.35 1.99986 13.1667C1.99986 12.4417 2.75819 11.6917 3.97486 11.2083C4.1804 11.1266 4.34504 10.9665 4.43256 10.7633C4.52007 10.5602 4.5233 10.3305 4.44152 10.125C4.35975 9.91946 4.19967 9.75482 3.99651 9.66731C3.79334 9.57979 3.56373 9.57656 3.35819 9.65834C1.46652 10.4083 0.333191 11.7167 0.333191 13.1667C0.333191 15.5 3.25819 17.3333 6.99986 17.3333C10.7415 17.3333 13.6665 15.5 13.6665 13.1667C13.6665 11.7167 12.5332 10.4083 10.6415 9.65834ZM6.16652 7.21667V13.1667C6.16652 13.3877 6.25432 13.5996 6.4106 13.7559C6.56688 13.9122 6.77884 14 6.99986 14C7.22087 14 7.43283 13.9122 7.58911 13.7559C7.74539 13.5996 7.83319 13.3877 7.83319 13.1667V7.21667C8.61874 7.01384 9.30335 6.53148 9.75869 5.86C10.214 5.18852 10.4088 4.37402 10.3066 3.56917C10.2044 2.76433 9.81214 2.0244 9.20338 1.48807C8.59463 0.951747 7.81117 0.655853 6.99986 0.655853C6.18855 0.655853 5.40508 0.951747 4.79633 1.48807C4.18757 2.0244 3.79532 2.76433 3.69309 3.56917C3.59086 4.37402 3.78568 5.18852 4.24102 5.86C4.69637 6.53148 5.38097 7.01384 6.16652 7.21667ZM6.99986 2.33334C7.32949 2.33334 7.65172 2.43109 7.92581 2.61422C8.19989 2.79736 8.41351 3.05766 8.53966 3.3622C8.6658 3.66674 8.69881 4.00185 8.6345 4.32516C8.57019 4.64846 8.41146 4.94543 8.17837 5.17852C7.94528 5.41161 7.64831 5.57034 7.32501 5.63465C7.00171 5.69896 6.66659 5.66595 6.36205 5.53981C6.05751 5.41366 5.79721 5.20004 5.61407 4.92596C5.43094 4.65187 5.33319 4.32964 5.33319 4.00001C5.33319 3.55798 5.50879 3.13406 5.82135 2.82149C6.13391 2.50893 6.55783 2.33334 6.99986 2.33334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Warsaw, Poland</span>
            </div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.833 3.41668H12.333V2.58334C12.333 1.9203 12.0696 1.28442 11.6008 0.815577C11.1319 0.346736 10.496 0.0833435 9.83299 0.0833435H8.16632C7.50328 0.0833435 6.86739 0.346736 6.39855 0.815577C5.92971 1.28442 5.66632 1.9203 5.66632 2.58334V3.41668H3.16632C2.50328 3.41668 1.86739 3.68007 1.39855 4.14891C0.929713 4.61775 0.666321 5.25363 0.666321 5.91668V13.4167C0.666321 14.0797 0.929713 14.7156 1.39855 15.1844C1.86739 15.6533 2.50328 15.9167 3.16632 15.9167H14.833C15.496 15.9167 16.1319 15.6533 16.6008 15.1844C17.0696 14.7156 17.333 14.0797 17.333 13.4167V5.91668C17.333 5.25363 17.0696 4.61775 16.6008 4.14891C16.1319 3.68007 15.496 3.41668 14.833 3.41668ZM7.33299 2.58334C7.33299 2.36233 7.42079 2.15037 7.57707 1.99409C7.73335 1.83781 7.94531 1.75001 8.16632 1.75001H9.83299C10.054 1.75001 10.266 1.83781 10.4222 1.99409C10.5785 2.15037 10.6663 2.36233 10.6663 2.58334V3.41668H7.33299V2.58334ZM15.6663 13.4167C15.6663 13.6377 15.5785 13.8497 15.4222 14.0059C15.266 14.1622 15.054 14.25 14.833 14.25H3.16632C2.94531 14.25 2.73335 14.1622 2.57707 14.0059C2.42079 13.8497 2.33299 13.6377 2.33299 13.4167V9.20834H4.83299V10.0833C4.83299 10.3044 4.92079 10.5163 5.07707 10.6726C5.23335 10.8289 5.44531 10.9167 5.66632 10.9167C5.88733 10.9167 6.0993 10.8289 6.25558 10.6726C6.41186 10.5163 6.49965 10.3044 6.49965 10.0833V9.20834H11.4997V10.0833C11.4997 10.3044 11.5875 10.5163 11.7437 10.6726C11.9 10.8289 12.112 10.9167 12.333 10.9167C12.554 10.9167 12.766 10.8289 12.9222 10.6726C13.0785 10.5163 13.1663 10.3044 13.1663 10.0833V9.20834H15.6663V13.4167ZM15.6663 7.58334H2.33299V5.91668C2.33299 5.69566 2.42079 5.4837 2.57707 5.32742C2.73335 5.17114 2.94531 5.08334 3.16632 5.08334H14.833C15.054 5.08334 15.266 5.17114 15.4222 5.32742C15.5785 5.4837 15.6663 5.69566 15.6663 5.91668V7.58334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Shuffle.dev</span>
            </div>
            <div class="flex items-center justify-between mb-10">
              <div class="flex items-center">
                <img class="w-8 h-8 rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1528936466093-76ffdfcf7a40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                <div class="inline-flex -ml-2 items-center justify-center w-8 h-8 rounded-full bg-indigo-50 text-xs font-medium text-indigo-500">+3</div>
              </div>
              <a href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00001 6.66666C7.26363 6.66666 6.66668 7.26362 6.66668 8C6.66668 8.73637 7.26363 9.33333 8.00001 9.33333C8.73639 9.33333 9.33334 8.73637 9.33334 7.99999C9.33334 7.26362 8.73639 6.66666 8.00001 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M12.6667 6.66666C11.9303 6.66666 11.3333 7.26362 11.3333 8C11.3333 8.73637 11.9303 9.33333 12.6667 9.33333C13.403 9.33333 14 8.73637 14 7.99999C14 7.26362 13.403 6.66666 12.6667 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M3.33332 6.66666C2.59694 6.66666 1.99999 7.26362 1.99999 8C1.99999 8.73637 2.59694 9.33333 3.33332 9.33333C4.0697 9.33333 4.66666 8.73637 4.66666 7.99999C4.66666 7.26362 4.0697 6.66666 3.33332 6.66666Z" fill="#E1E4E8"></path>
                </svg>
              </a>
            </div>
            <div class="relative w-full h-1 mb-3 rounded-full bg-gray-50">
              <div class="absolute top-0 left-0 h-full w-4/5 rounded-full bg-indigo-500"></div>
            </div>
            <div class="flex items-center">
              <span class="inline-block py-1 px-2 mr-2 bg-indigo-50 rounded-full text-xs text-indigo-500">Phase 3</span>
              <span class="text-xs text-gray-500 font-medium">Final adjustments</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded">
          <div class="flex items-center mb-6">
            <span class="flex-shrink-0 inline-flex justify-center items-center mr-3 w-10 h-10 rounded-full bg-green-500">
              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8335 2.58333H9.60017L9.33351 1.75C9.16063 1.26102 8.83996 0.837918 8.41592 0.539299C7.99189 0.24068 7.48547 0.0813322 6.96684 0.0833316H3.16684C2.5038 0.0833316 1.86791 0.346724 1.39907 0.815565C0.930232 1.28441 0.66684 1.92029 0.66684 2.58333V13.4167C0.66684 14.0797 0.930232 14.7156 1.39907 15.1844C1.86791 15.6533 2.5038 15.9167 3.16684 15.9167H14.8335C15.4965 15.9167 16.1324 15.6533 16.6013 15.1844C17.0701 14.7156 17.3335 14.0797 17.3335 13.4167V5.08333C17.3335 4.42029 17.0701 3.78441 16.6013 3.31557C16.1324 2.84672 15.4965 2.58333 14.8335 2.58333ZM15.6668 13.4167C15.6668 13.6377 15.579 13.8496 15.4228 14.0059C15.2665 14.1622 15.0545 14.25 14.8335 14.25H3.16684C2.94583 14.25 2.73386 14.1622 2.57758 14.0059C2.4213 13.8496 2.33351 13.6377 2.33351 13.4167V2.58333C2.33351 2.36232 2.4213 2.15036 2.57758 1.99408C2.73386 1.8378 2.94583 1.75 3.16684 1.75H6.96684C7.14154 1.74955 7.31197 1.80401 7.45403 1.9057C7.59609 2.00739 7.7026 2.15115 7.75851 2.31667L8.20851 3.68333C8.26441 3.84885 8.37092 3.99261 8.51298 4.0943C8.65504 4.19598 8.82547 4.25045 9.00017 4.25H14.8335C15.0545 4.25 15.2665 4.3378 15.4228 4.49408C15.579 4.65036 15.6668 4.86232 15.6668 5.08333V13.4167Z" fill="#D1F1E6"></path>
              </svg>
            </span>
            <div>
              <p class="text-xs font-bold">Example project name here dolor sit</p>
            </div>
          </div>
          <div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6415 9.65834C10.5397 9.61785 10.431 9.5978 10.3215 9.59934C10.212 9.60088 10.1038 9.62397 10.0032 9.66731C9.90261 9.71064 9.81153 9.77337 9.73518 9.8519C9.65882 9.93043 9.59868 10.0232 9.55819 10.125C9.5177 10.2268 9.49765 10.3355 9.49919 10.4451C9.50073 10.5546 9.52382 10.6627 9.56716 10.7633C9.61049 10.8639 9.67321 10.955 9.75175 11.0314C9.83028 11.1077 9.92308 11.1678 10.0249 11.2083C11.2415 11.6917 11.9999 12.4417 11.9999 13.1667C11.9999 14.35 9.94986 15.6667 6.99986 15.6667C4.04986 15.6667 1.99986 14.35 1.99986 13.1667C1.99986 12.4417 2.75819 11.6917 3.97486 11.2083C4.1804 11.1266 4.34504 10.9665 4.43256 10.7633C4.52007 10.5602 4.5233 10.3305 4.44152 10.125C4.35975 9.91946 4.19967 9.75482 3.99651 9.66731C3.79334 9.57979 3.56373 9.57656 3.35819 9.65834C1.46652 10.4083 0.333191 11.7167 0.333191 13.1667C0.333191 15.5 3.25819 17.3333 6.99986 17.3333C10.7415 17.3333 13.6665 15.5 13.6665 13.1667C13.6665 11.7167 12.5332 10.4083 10.6415 9.65834ZM6.16652 7.21667V13.1667C6.16652 13.3877 6.25432 13.5996 6.4106 13.7559C6.56688 13.9122 6.77884 14 6.99986 14C7.22087 14 7.43283 13.9122 7.58911 13.7559C7.74539 13.5996 7.83319 13.3877 7.83319 13.1667V7.21667C8.61874 7.01384 9.30335 6.53148 9.75869 5.86C10.214 5.18852 10.4088 4.37402 10.3066 3.56917C10.2044 2.76433 9.81214 2.0244 9.20338 1.48807C8.59463 0.951747 7.81117 0.655853 6.99986 0.655853C6.18855 0.655853 5.40508 0.951747 4.79633 1.48807C4.18757 2.0244 3.79532 2.76433 3.69309 3.56917C3.59086 4.37402 3.78568 5.18852 4.24102 5.86C4.69637 6.53148 5.38097 7.01384 6.16652 7.21667ZM6.99986 2.33334C7.32949 2.33334 7.65172 2.43109 7.92581 2.61422C8.19989 2.79736 8.41351 3.05766 8.53966 3.3622C8.6658 3.66674 8.69881 4.00185 8.6345 4.32516C8.57019 4.64846 8.41146 4.94543 8.17837 5.17852C7.94528 5.41161 7.64831 5.57034 7.32501 5.63465C7.00171 5.69896 6.66659 5.66595 6.36205 5.53981C6.05751 5.41366 5.79721 5.20004 5.61407 4.92596C5.43094 4.65187 5.33319 4.32964 5.33319 4.00001C5.33319 3.55798 5.50879 3.13406 5.82135 2.82149C6.13391 2.50893 6.55783 2.33334 6.99986 2.33334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Warsaw, Poland</span>
            </div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.833 3.41668H12.333V2.58334C12.333 1.9203 12.0696 1.28442 11.6008 0.815577C11.1319 0.346736 10.496 0.0833435 9.83299 0.0833435H8.16632C7.50328 0.0833435 6.86739 0.346736 6.39855 0.815577C5.92971 1.28442 5.66632 1.9203 5.66632 2.58334V3.41668H3.16632C2.50328 3.41668 1.86739 3.68007 1.39855 4.14891C0.929713 4.61775 0.666321 5.25363 0.666321 5.91668V13.4167C0.666321 14.0797 0.929713 14.7156 1.39855 15.1844C1.86739 15.6533 2.50328 15.9167 3.16632 15.9167H14.833C15.496 15.9167 16.1319 15.6533 16.6008 15.1844C17.0696 14.7156 17.333 14.0797 17.333 13.4167V5.91668C17.333 5.25363 17.0696 4.61775 16.6008 4.14891C16.1319 3.68007 15.496 3.41668 14.833 3.41668ZM7.33299 2.58334C7.33299 2.36233 7.42079 2.15037 7.57707 1.99409C7.73335 1.83781 7.94531 1.75001 8.16632 1.75001H9.83299C10.054 1.75001 10.266 1.83781 10.4222 1.99409C10.5785 2.15037 10.6663 2.36233 10.6663 2.58334V3.41668H7.33299V2.58334ZM15.6663 13.4167C15.6663 13.6377 15.5785 13.8497 15.4222 14.0059C15.266 14.1622 15.054 14.25 14.833 14.25H3.16632C2.94531 14.25 2.73335 14.1622 2.57707 14.0059C2.42079 13.8497 2.33299 13.6377 2.33299 13.4167V9.20834H4.83299V10.0833C4.83299 10.3044 4.92079 10.5163 5.07707 10.6726C5.23335 10.8289 5.44531 10.9167 5.66632 10.9167C5.88733 10.9167 6.0993 10.8289 6.25558 10.6726C6.41186 10.5163 6.49965 10.3044 6.49965 10.0833V9.20834H11.4997V10.0833C11.4997 10.3044 11.5875 10.5163 11.7437 10.6726C11.9 10.8289 12.112 10.9167 12.333 10.9167C12.554 10.9167 12.766 10.8289 12.9222 10.6726C13.0785 10.5163 13.1663 10.3044 13.1663 10.0833V9.20834H15.6663V13.4167ZM15.6663 7.58334H2.33299V5.91668C2.33299 5.69566 2.42079 5.4837 2.57707 5.32742C2.73335 5.17114 2.94531 5.08334 3.16632 5.08334H14.833C15.054 5.08334 15.266 5.17114 15.4222 5.32742C15.5785 5.4837 15.6663 5.69566 15.6663 5.91668V7.58334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Shuffle.dev</span>
            </div>
            <div class="flex items-center justify-between mb-10">
              <div class="flex items-center">
                <img class="w-8 h-8 rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1528936466093-76ffdfcf7a40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                <div class="inline-flex -ml-2 items-center justify-center w-8 h-8 rounded-full bg-indigo-50 text-xs font-medium text-indigo-500">+3</div>
              </div>
              <a href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00001 6.66666C7.26363 6.66666 6.66668 7.26362 6.66668 8C6.66668 8.73637 7.26363 9.33333 8.00001 9.33333C8.73639 9.33333 9.33334 8.73637 9.33334 7.99999C9.33334 7.26362 8.73639 6.66666 8.00001 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M12.6667 6.66666C11.9303 6.66666 11.3333 7.26362 11.3333 8C11.3333 8.73637 11.9303 9.33333 12.6667 9.33333C13.403 9.33333 14 8.73637 14 7.99999C14 7.26362 13.403 6.66666 12.6667 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M3.33332 6.66666C2.59694 6.66666 1.99999 7.26362 1.99999 8C1.99999 8.73637 2.59694 9.33333 3.33332 9.33333C4.0697 9.33333 4.66666 8.73637 4.66666 7.99999C4.66666 7.26362 4.0697 6.66666 3.33332 6.66666Z" fill="#E1E4E8"></path>
                </svg>
              </a>
            </div>
            <div class="relative w-full h-1 mb-3 rounded-full bg-gray-50">
              <div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-green-500"></div>
            </div>
            <div class="flex items-center">
              <span class="inline-block py-1 px-2 mr-2 bg-indigo-50 rounded-full text-xs text-indigo-500">Phase 2</span>
              <span class="text-xs text-gray-500 font-medium">Implementation</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded">
          <div class="flex items-center mb-6">
            <span class="flex-shrink-0 inline-flex justify-center items-center mr-3 w-10 h-10 rounded-full bg-purple-500">
              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8335 2.58333H9.60014L9.33348 1.75C9.1606 1.26102 8.83993 0.837918 8.41589 0.539299C7.99185 0.24068 7.48544 0.0813322 6.96681 0.0833316H3.16681C2.50377 0.0833316 1.86788 0.346724 1.39904 0.815565C0.930201 1.28441 0.666809 1.92029 0.666809 2.58333V13.4167C0.666809 14.0797 0.930201 14.7156 1.39904 15.1844C1.86788 15.6533 2.50377 15.9167 3.16681 15.9167H14.8335C15.4965 15.9167 16.1324 15.6533 16.6012 15.1844C17.0701 14.7156 17.3335 14.0797 17.3335 13.4167V5.08333C17.3335 4.42029 17.0701 3.78441 16.6012 3.31557C16.1324 2.84672 15.4965 2.58333 14.8335 2.58333ZM15.6668 13.4167C15.6668 13.6377 15.579 13.8496 15.4227 14.0059C15.2665 14.1622 15.0545 14.25 14.8335 14.25H3.16681C2.9458 14.25 2.73383 14.1622 2.57755 14.0059C2.42127 13.8496 2.33348 13.6377 2.33348 13.4167V2.58333C2.33348 2.36232 2.42127 2.15036 2.57755 1.99408C2.73383 1.8378 2.9458 1.75 3.16681 1.75H6.96681C7.14151 1.74955 7.31194 1.80401 7.454 1.9057C7.59606 2.00739 7.70257 2.15115 7.75848 2.31667L8.20848 3.68333C8.26438 3.84885 8.37089 3.99261 8.51295 4.0943C8.65501 4.19598 8.82544 4.25045 9.00014 4.25H14.8335C15.0545 4.25 15.2665 4.3378 15.4227 4.49408C15.579 4.65036 15.6668 4.86232 15.6668 5.08333V13.4167Z" fill="#E6D4F8"></path>
              </svg>
            </span>
            <div>
              <p class="text-xs font-bold">Example project name here dolor sit</p>
            </div>
          </div>
          <div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6415 9.65834C10.5397 9.61785 10.431 9.5978 10.3215 9.59934C10.212 9.60088 10.1038 9.62397 10.0032 9.66731C9.90261 9.71064 9.81153 9.77337 9.73518 9.8519C9.65882 9.93043 9.59868 10.0232 9.55819 10.125C9.5177 10.2268 9.49765 10.3355 9.49919 10.4451C9.50073 10.5546 9.52382 10.6627 9.56716 10.7633C9.61049 10.8639 9.67321 10.955 9.75175 11.0314C9.83028 11.1077 9.92308 11.1678 10.0249 11.2083C11.2415 11.6917 11.9999 12.4417 11.9999 13.1667C11.9999 14.35 9.94986 15.6667 6.99986 15.6667C4.04986 15.6667 1.99986 14.35 1.99986 13.1667C1.99986 12.4417 2.75819 11.6917 3.97486 11.2083C4.1804 11.1266 4.34504 10.9665 4.43256 10.7633C4.52007 10.5602 4.5233 10.3305 4.44152 10.125C4.35975 9.91946 4.19967 9.75482 3.99651 9.66731C3.79334 9.57979 3.56373 9.57656 3.35819 9.65834C1.46652 10.4083 0.333191 11.7167 0.333191 13.1667C0.333191 15.5 3.25819 17.3333 6.99986 17.3333C10.7415 17.3333 13.6665 15.5 13.6665 13.1667C13.6665 11.7167 12.5332 10.4083 10.6415 9.65834ZM6.16652 7.21667V13.1667C6.16652 13.3877 6.25432 13.5996 6.4106 13.7559C6.56688 13.9122 6.77884 14 6.99986 14C7.22087 14 7.43283 13.9122 7.58911 13.7559C7.74539 13.5996 7.83319 13.3877 7.83319 13.1667V7.21667C8.61874 7.01384 9.30335 6.53148 9.75869 5.86C10.214 5.18852 10.4088 4.37402 10.3066 3.56917C10.2044 2.76433 9.81214 2.0244 9.20338 1.48807C8.59463 0.951747 7.81117 0.655853 6.99986 0.655853C6.18855 0.655853 5.40508 0.951747 4.79633 1.48807C4.18757 2.0244 3.79532 2.76433 3.69309 3.56917C3.59086 4.37402 3.78568 5.18852 4.24102 5.86C4.69637 6.53148 5.38097 7.01384 6.16652 7.21667ZM6.99986 2.33334C7.32949 2.33334 7.65172 2.43109 7.92581 2.61422C8.19989 2.79736 8.41351 3.05766 8.53966 3.3622C8.6658 3.66674 8.69881 4.00185 8.6345 4.32516C8.57019 4.64846 8.41146 4.94543 8.17837 5.17852C7.94528 5.41161 7.64831 5.57034 7.32501 5.63465C7.00171 5.69896 6.66659 5.66595 6.36205 5.53981C6.05751 5.41366 5.79721 5.20004 5.61407 4.92596C5.43094 4.65187 5.33319 4.32964 5.33319 4.00001C5.33319 3.55798 5.50879 3.13406 5.82135 2.82149C6.13391 2.50893 6.55783 2.33334 6.99986 2.33334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Warsaw, Poland</span>
            </div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.833 3.41668H12.333V2.58334C12.333 1.9203 12.0696 1.28442 11.6008 0.815577C11.1319 0.346736 10.496 0.0833435 9.83299 0.0833435H8.16632C7.50328 0.0833435 6.86739 0.346736 6.39855 0.815577C5.92971 1.28442 5.66632 1.9203 5.66632 2.58334V3.41668H3.16632C2.50328 3.41668 1.86739 3.68007 1.39855 4.14891C0.929713 4.61775 0.666321 5.25363 0.666321 5.91668V13.4167C0.666321 14.0797 0.929713 14.7156 1.39855 15.1844C1.86739 15.6533 2.50328 15.9167 3.16632 15.9167H14.833C15.496 15.9167 16.1319 15.6533 16.6008 15.1844C17.0696 14.7156 17.333 14.0797 17.333 13.4167V5.91668C17.333 5.25363 17.0696 4.61775 16.6008 4.14891C16.1319 3.68007 15.496 3.41668 14.833 3.41668ZM7.33299 2.58334C7.33299 2.36233 7.42079 2.15037 7.57707 1.99409C7.73335 1.83781 7.94531 1.75001 8.16632 1.75001H9.83299C10.054 1.75001 10.266 1.83781 10.4222 1.99409C10.5785 2.15037 10.6663 2.36233 10.6663 2.58334V3.41668H7.33299V2.58334ZM15.6663 13.4167C15.6663 13.6377 15.5785 13.8497 15.4222 14.0059C15.266 14.1622 15.054 14.25 14.833 14.25H3.16632C2.94531 14.25 2.73335 14.1622 2.57707 14.0059C2.42079 13.8497 2.33299 13.6377 2.33299 13.4167V9.20834H4.83299V10.0833C4.83299 10.3044 4.92079 10.5163 5.07707 10.6726C5.23335 10.8289 5.44531 10.9167 5.66632 10.9167C5.88733 10.9167 6.0993 10.8289 6.25558 10.6726C6.41186 10.5163 6.49965 10.3044 6.49965 10.0833V9.20834H11.4997V10.0833C11.4997 10.3044 11.5875 10.5163 11.7437 10.6726C11.9 10.8289 12.112 10.9167 12.333 10.9167C12.554 10.9167 12.766 10.8289 12.9222 10.6726C13.0785 10.5163 13.1663 10.3044 13.1663 10.0833V9.20834H15.6663V13.4167ZM15.6663 7.58334H2.33299V5.91668C2.33299 5.69566 2.42079 5.4837 2.57707 5.32742C2.73335 5.17114 2.94531 5.08334 3.16632 5.08334H14.833C15.054 5.08334 15.266 5.17114 15.4222 5.32742C15.5785 5.4837 15.6663 5.69566 15.6663 5.91668V7.58334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Shuffle.dev</span>
            </div>
            <div class="flex items-center justify-between mb-10">
              <div class="flex items-center">
                <img class="w-8 h-8 rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1528936466093-76ffdfcf7a40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                <div class="inline-flex -ml-2 items-center justify-center w-8 h-8 rounded-full bg-indigo-50 text-xs font-medium text-indigo-500">+3</div>
              </div>
              <a href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00001 6.66666C7.26363 6.66666 6.66668 7.26362 6.66668 8C6.66668 8.73637 7.26363 9.33333 8.00001 9.33333C8.73639 9.33333 9.33334 8.73637 9.33334 7.99999C9.33334 7.26362 8.73639 6.66666 8.00001 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M12.6667 6.66666C11.9303 6.66666 11.3333 7.26362 11.3333 8C11.3333 8.73637 11.9303 9.33333 12.6667 9.33333C13.403 9.33333 14 8.73637 14 7.99999C14 7.26362 13.403 6.66666 12.6667 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M3.33332 6.66666C2.59694 6.66666 1.99999 7.26362 1.99999 8C1.99999 8.73637 2.59694 9.33333 3.33332 9.33333C4.0697 9.33333 4.66666 8.73637 4.66666 7.99999C4.66666 7.26362 4.0697 6.66666 3.33332 6.66666Z" fill="#E1E4E8"></path>
                </svg>
              </a>
            </div>
            <div class="relative w-full h-1 mb-3 rounded-full bg-gray-50">
              <div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-purple-500"></div>
            </div>
            <div class="flex items-center">
              <span class="inline-block py-1 px-2 mr-2 bg-indigo-50 rounded-full text-xs text-indigo-500">Phase 2</span>
              <span class="text-xs text-gray-500 font-medium">Implementation</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded">
          <div class="flex items-center mb-6">
            <span class="flex-shrink-0 inline-flex justify-center items-center mr-3 w-10 h-10 rounded-full bg-orange-500">
              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8335 2.58333H9.60016L9.33349 1.75C9.16062 1.26102 8.83995 0.837918 8.41591 0.539299C7.99187 0.24068 7.48546 0.0813322 6.96683 0.0833316H3.16682C2.50378 0.0833316 1.8679 0.346724 1.39906 0.815565C0.930217 1.28441 0.666824 1.92029 0.666824 2.58333V13.4167C0.666824 14.0797 0.930217 14.7156 1.39906 15.1844C1.8679 15.6533 2.50378 15.9167 3.16682 15.9167H14.8335C15.4965 15.9167 16.1324 15.6533 16.6013 15.1844C17.0701 14.7156 17.3335 14.0797 17.3335 13.4167V5.08333C17.3335 4.42029 17.0701 3.78441 16.6013 3.31557C16.1324 2.84672 15.4965 2.58333 14.8335 2.58333ZM15.6668 13.4167C15.6668 13.6377 15.579 13.8496 15.4227 14.0059C15.2665 14.1622 15.0545 14.25 14.8335 14.25H3.16682C2.94581 14.25 2.73385 14.1622 2.57757 14.0059C2.42129 13.8496 2.33349 13.6377 2.33349 13.4167V2.58333C2.33349 2.36232 2.42129 2.15036 2.57757 1.99408C2.73385 1.8378 2.94581 1.75 3.16682 1.75H6.96683C7.14153 1.74955 7.31195 1.80401 7.45402 1.9057C7.59608 2.00739 7.70259 2.15115 7.75849 2.31667L8.20849 3.68333C8.2644 3.84885 8.37091 3.99261 8.51297 4.0943C8.65503 4.19598 8.82545 4.25045 9.00016 4.25H14.8335C15.0545 4.25 15.2665 4.3378 15.4227 4.49408C15.579 4.65036 15.6668 4.86232 15.6668 5.08333V13.4167Z" fill="#FDE4D4"></path>
              </svg>
            </span>
            <div>
              <p class="text-xs font-bold">Example project name here dolor sit</p>
            </div>
          </div>
          <div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6415 9.65834C10.5397 9.61785 10.431 9.5978 10.3215 9.59934C10.212 9.60088 10.1038 9.62397 10.0032 9.66731C9.90261 9.71064 9.81153 9.77337 9.73518 9.8519C9.65882 9.93043 9.59868 10.0232 9.55819 10.125C9.5177 10.2268 9.49765 10.3355 9.49919 10.4451C9.50073 10.5546 9.52382 10.6627 9.56716 10.7633C9.61049 10.8639 9.67321 10.955 9.75175 11.0314C9.83028 11.1077 9.92308 11.1678 10.0249 11.2083C11.2415 11.6917 11.9999 12.4417 11.9999 13.1667C11.9999 14.35 9.94986 15.6667 6.99986 15.6667C4.04986 15.6667 1.99986 14.35 1.99986 13.1667C1.99986 12.4417 2.75819 11.6917 3.97486 11.2083C4.1804 11.1266 4.34504 10.9665 4.43256 10.7633C4.52007 10.5602 4.5233 10.3305 4.44152 10.125C4.35975 9.91946 4.19967 9.75482 3.99651 9.66731C3.79334 9.57979 3.56373 9.57656 3.35819 9.65834C1.46652 10.4083 0.333191 11.7167 0.333191 13.1667C0.333191 15.5 3.25819 17.3333 6.99986 17.3333C10.7415 17.3333 13.6665 15.5 13.6665 13.1667C13.6665 11.7167 12.5332 10.4083 10.6415 9.65834ZM6.16652 7.21667V13.1667C6.16652 13.3877 6.25432 13.5996 6.4106 13.7559C6.56688 13.9122 6.77884 14 6.99986 14C7.22087 14 7.43283 13.9122 7.58911 13.7559C7.74539 13.5996 7.83319 13.3877 7.83319 13.1667V7.21667C8.61874 7.01384 9.30335 6.53148 9.75869 5.86C10.214 5.18852 10.4088 4.37402 10.3066 3.56917C10.2044 2.76433 9.81214 2.0244 9.20338 1.48807C8.59463 0.951747 7.81117 0.655853 6.99986 0.655853C6.18855 0.655853 5.40508 0.951747 4.79633 1.48807C4.18757 2.0244 3.79532 2.76433 3.69309 3.56917C3.59086 4.37402 3.78568 5.18852 4.24102 5.86C4.69637 6.53148 5.38097 7.01384 6.16652 7.21667ZM6.99986 2.33334C7.32949 2.33334 7.65172 2.43109 7.92581 2.61422C8.19989 2.79736 8.41351 3.05766 8.53966 3.3622C8.6658 3.66674 8.69881 4.00185 8.6345 4.32516C8.57019 4.64846 8.41146 4.94543 8.17837 5.17852C7.94528 5.41161 7.64831 5.57034 7.32501 5.63465C7.00171 5.69896 6.66659 5.66595 6.36205 5.53981C6.05751 5.41366 5.79721 5.20004 5.61407 4.92596C5.43094 4.65187 5.33319 4.32964 5.33319 4.00001C5.33319 3.55798 5.50879 3.13406 5.82135 2.82149C6.13391 2.50893 6.55783 2.33334 6.99986 2.33334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Warsaw, Poland</span>
            </div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.833 3.41668H12.333V2.58334C12.333 1.9203 12.0696 1.28442 11.6008 0.815577C11.1319 0.346736 10.496 0.0833435 9.83299 0.0833435H8.16632C7.50328 0.0833435 6.86739 0.346736 6.39855 0.815577C5.92971 1.28442 5.66632 1.9203 5.66632 2.58334V3.41668H3.16632C2.50328 3.41668 1.86739 3.68007 1.39855 4.14891C0.929713 4.61775 0.666321 5.25363 0.666321 5.91668V13.4167C0.666321 14.0797 0.929713 14.7156 1.39855 15.1844C1.86739 15.6533 2.50328 15.9167 3.16632 15.9167H14.833C15.496 15.9167 16.1319 15.6533 16.6008 15.1844C17.0696 14.7156 17.333 14.0797 17.333 13.4167V5.91668C17.333 5.25363 17.0696 4.61775 16.6008 4.14891C16.1319 3.68007 15.496 3.41668 14.833 3.41668ZM7.33299 2.58334C7.33299 2.36233 7.42079 2.15037 7.57707 1.99409C7.73335 1.83781 7.94531 1.75001 8.16632 1.75001H9.83299C10.054 1.75001 10.266 1.83781 10.4222 1.99409C10.5785 2.15037 10.6663 2.36233 10.6663 2.58334V3.41668H7.33299V2.58334ZM15.6663 13.4167C15.6663 13.6377 15.5785 13.8497 15.4222 14.0059C15.266 14.1622 15.054 14.25 14.833 14.25H3.16632C2.94531 14.25 2.73335 14.1622 2.57707 14.0059C2.42079 13.8497 2.33299 13.6377 2.33299 13.4167V9.20834H4.83299V10.0833C4.83299 10.3044 4.92079 10.5163 5.07707 10.6726C5.23335 10.8289 5.44531 10.9167 5.66632 10.9167C5.88733 10.9167 6.0993 10.8289 6.25558 10.6726C6.41186 10.5163 6.49965 10.3044 6.49965 10.0833V9.20834H11.4997V10.0833C11.4997 10.3044 11.5875 10.5163 11.7437 10.6726C11.9 10.8289 12.112 10.9167 12.333 10.9167C12.554 10.9167 12.766 10.8289 12.9222 10.6726C13.0785 10.5163 13.1663 10.3044 13.1663 10.0833V9.20834H15.6663V13.4167ZM15.6663 7.58334H2.33299V5.91668C2.33299 5.69566 2.42079 5.4837 2.57707 5.32742C2.73335 5.17114 2.94531 5.08334 3.16632 5.08334H14.833C15.054 5.08334 15.266 5.17114 15.4222 5.32742C15.5785 5.4837 15.6663 5.69566 15.6663 5.91668V7.58334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Shuffle.dev</span>
            </div>
            <div class="flex items-center justify-between mb-10">
              <div class="flex items-center">
                <img class="w-8 h-8 rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1528936466093-76ffdfcf7a40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                <div class="inline-flex -ml-2 items-center justify-center w-8 h-8 rounded-full bg-indigo-50 text-xs font-medium text-indigo-500">+3</div>
              </div>
              <a href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00001 6.66666C7.26363 6.66666 6.66668 7.26362 6.66668 8C6.66668 8.73637 7.26363 9.33333 8.00001 9.33333C8.73639 9.33333 9.33334 8.73637 9.33334 7.99999C9.33334 7.26362 8.73639 6.66666 8.00001 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M12.6667 6.66666C11.9303 6.66666 11.3333 7.26362 11.3333 8C11.3333 8.73637 11.9303 9.33333 12.6667 9.33333C13.403 9.33333 14 8.73637 14 7.99999C14 7.26362 13.403 6.66666 12.6667 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M3.33332 6.66666C2.59694 6.66666 1.99999 7.26362 1.99999 8C1.99999 8.73637 2.59694 9.33333 3.33332 9.33333C4.0697 9.33333 4.66666 8.73637 4.66666 7.99999C4.66666 7.26362 4.0697 6.66666 3.33332 6.66666Z" fill="#E1E4E8"></path>
                </svg>
              </a>
            </div>
            <div class="relative w-full h-1 mb-3 rounded-full bg-gray-50">
              <div class="absolute top-0 left-0 h-full w-1/6 rounded-full bg-orange-500"></div>
            </div>
            <div class="flex items-center">
              <span class="inline-block py-1 px-2 mr-2 bg-indigo-50 rounded-full text-xs text-indigo-500">Phase 1</span>
              <span class="text-xs text-gray-500 font-medium">Getting started</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded">
          <div class="flex items-center mb-6">
            <span class="flex-shrink-0 inline-flex justify-center items-center mr-3 w-10 h-10 rounded-full bg-indigo-500">
              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8335 2.58333H9.60016L9.3335 1.75C9.16062 1.26102 8.83995 0.837918 8.41591 0.539299C7.99187 0.24068 7.48546 0.0813322 6.96683 0.0833316H3.16683C2.50379 0.0833316 1.8679 0.346724 1.39906 0.815565C0.93022 1.28441 0.666828 1.92029 0.666828 2.58333V13.4167C0.666828 14.0797 0.93022 14.7156 1.39906 15.1844C1.8679 15.6533 2.50379 15.9167 3.16683 15.9167H14.8335C15.4965 15.9167 16.1324 15.6533 16.6013 15.1844C17.0701 14.7156 17.3335 14.0797 17.3335 13.4167V5.08333C17.3335 4.42029 17.0701 3.78441 16.6013 3.31557C16.1324 2.84672 15.4965 2.58333 14.8335 2.58333ZM15.6668 13.4167C15.6668 13.6377 15.579 13.8496 15.4228 14.0059C15.2665 14.1622 15.0545 14.25 14.8335 14.25H3.16683C2.94581 14.25 2.73385 14.1622 2.57757 14.0059C2.42129 13.8496 2.33349 13.6377 2.33349 13.4167V2.58333C2.33349 2.36232 2.42129 2.15036 2.57757 1.99408C2.73385 1.8378 2.94581 1.75 3.16683 1.75H6.96683C7.14153 1.74955 7.31196 1.80401 7.45402 1.9057C7.59608 2.00739 7.70259 2.15115 7.7585 2.31667L8.2085 3.68333C8.2644 3.84885 8.37091 3.99261 8.51297 4.0943C8.65503 4.19598 8.82546 4.25045 9.00016 4.25H14.8335C15.0545 4.25 15.2665 4.3378 15.4228 4.49408C15.579 4.65036 15.6668 4.86232 15.6668 5.08333V13.4167Z" fill="#D5E2FD"></path>
              </svg>
            </span>
            <div>
              <p class="text-xs font-bold">Example project name here dolor sit</p>
            </div>
          </div>
          <div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6415 9.65834C10.5397 9.61785 10.431 9.5978 10.3215 9.59934C10.212 9.60088 10.1038 9.62397 10.0032 9.66731C9.90261 9.71064 9.81153 9.77337 9.73518 9.8519C9.65882 9.93043 9.59868 10.0232 9.55819 10.125C9.5177 10.2268 9.49765 10.3355 9.49919 10.4451C9.50073 10.5546 9.52382 10.6627 9.56716 10.7633C9.61049 10.8639 9.67321 10.955 9.75175 11.0314C9.83028 11.1077 9.92308 11.1678 10.0249 11.2083C11.2415 11.6917 11.9999 12.4417 11.9999 13.1667C11.9999 14.35 9.94986 15.6667 6.99986 15.6667C4.04986 15.6667 1.99986 14.35 1.99986 13.1667C1.99986 12.4417 2.75819 11.6917 3.97486 11.2083C4.1804 11.1266 4.34504 10.9665 4.43256 10.7633C4.52007 10.5602 4.5233 10.3305 4.44152 10.125C4.35975 9.91946 4.19967 9.75482 3.99651 9.66731C3.79334 9.57979 3.56373 9.57656 3.35819 9.65834C1.46652 10.4083 0.333191 11.7167 0.333191 13.1667C0.333191 15.5 3.25819 17.3333 6.99986 17.3333C10.7415 17.3333 13.6665 15.5 13.6665 13.1667C13.6665 11.7167 12.5332 10.4083 10.6415 9.65834ZM6.16652 7.21667V13.1667C6.16652 13.3877 6.25432 13.5996 6.4106 13.7559C6.56688 13.9122 6.77884 14 6.99986 14C7.22087 14 7.43283 13.9122 7.58911 13.7559C7.74539 13.5996 7.83319 13.3877 7.83319 13.1667V7.21667C8.61874 7.01384 9.30335 6.53148 9.75869 5.86C10.214 5.18852 10.4088 4.37402 10.3066 3.56917C10.2044 2.76433 9.81214 2.0244 9.20338 1.48807C8.59463 0.951747 7.81117 0.655853 6.99986 0.655853C6.18855 0.655853 5.40508 0.951747 4.79633 1.48807C4.18757 2.0244 3.79532 2.76433 3.69309 3.56917C3.59086 4.37402 3.78568 5.18852 4.24102 5.86C4.69637 6.53148 5.38097 7.01384 6.16652 7.21667ZM6.99986 2.33334C7.32949 2.33334 7.65172 2.43109 7.92581 2.61422C8.19989 2.79736 8.41351 3.05766 8.53966 3.3622C8.6658 3.66674 8.69881 4.00185 8.6345 4.32516C8.57019 4.64846 8.41146 4.94543 8.17837 5.17852C7.94528 5.41161 7.64831 5.57034 7.32501 5.63465C7.00171 5.69896 6.66659 5.66595 6.36205 5.53981C6.05751 5.41366 5.79721 5.20004 5.61407 4.92596C5.43094 4.65187 5.33319 4.32964 5.33319 4.00001C5.33319 3.55798 5.50879 3.13406 5.82135 2.82149C6.13391 2.50893 6.55783 2.33334 6.99986 2.33334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Warsaw, Poland</span>
            </div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.833 3.41668H12.333V2.58334C12.333 1.9203 12.0696 1.28442 11.6008 0.815577C11.1319 0.346736 10.496 0.0833435 9.83299 0.0833435H8.16632C7.50328 0.0833435 6.86739 0.346736 6.39855 0.815577C5.92971 1.28442 5.66632 1.9203 5.66632 2.58334V3.41668H3.16632C2.50328 3.41668 1.86739 3.68007 1.39855 4.14891C0.929713 4.61775 0.666321 5.25363 0.666321 5.91668V13.4167C0.666321 14.0797 0.929713 14.7156 1.39855 15.1844C1.86739 15.6533 2.50328 15.9167 3.16632 15.9167H14.833C15.496 15.9167 16.1319 15.6533 16.6008 15.1844C17.0696 14.7156 17.333 14.0797 17.333 13.4167V5.91668C17.333 5.25363 17.0696 4.61775 16.6008 4.14891C16.1319 3.68007 15.496 3.41668 14.833 3.41668ZM7.33299 2.58334C7.33299 2.36233 7.42079 2.15037 7.57707 1.99409C7.73335 1.83781 7.94531 1.75001 8.16632 1.75001H9.83299C10.054 1.75001 10.266 1.83781 10.4222 1.99409C10.5785 2.15037 10.6663 2.36233 10.6663 2.58334V3.41668H7.33299V2.58334ZM15.6663 13.4167C15.6663 13.6377 15.5785 13.8497 15.4222 14.0059C15.266 14.1622 15.054 14.25 14.833 14.25H3.16632C2.94531 14.25 2.73335 14.1622 2.57707 14.0059C2.42079 13.8497 2.33299 13.6377 2.33299 13.4167V9.20834H4.83299V10.0833C4.83299 10.3044 4.92079 10.5163 5.07707 10.6726C5.23335 10.8289 5.44531 10.9167 5.66632 10.9167C5.88733 10.9167 6.0993 10.8289 6.25558 10.6726C6.41186 10.5163 6.49965 10.3044 6.49965 10.0833V9.20834H11.4997V10.0833C11.4997 10.3044 11.5875 10.5163 11.7437 10.6726C11.9 10.8289 12.112 10.9167 12.333 10.9167C12.554 10.9167 12.766 10.8289 12.9222 10.6726C13.0785 10.5163 13.1663 10.3044 13.1663 10.0833V9.20834H15.6663V13.4167ZM15.6663 7.58334H2.33299V5.91668C2.33299 5.69566 2.42079 5.4837 2.57707 5.32742C2.73335 5.17114 2.94531 5.08334 3.16632 5.08334H14.833C15.054 5.08334 15.266 5.17114 15.4222 5.32742C15.5785 5.4837 15.6663 5.69566 15.6663 5.91668V7.58334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Shuffle.dev</span>
            </div>
            <div class="flex items-center justify-between mb-10">
              <div class="flex items-center">
                <img class="w-8 h-8 rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1528936466093-76ffdfcf7a40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                <div class="inline-flex -ml-2 items-center justify-center w-8 h-8 rounded-full bg-indigo-50 text-xs font-medium text-indigo-500">+3</div>
              </div>
              <a href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00001 6.66666C7.26363 6.66666 6.66668 7.26362 6.66668 8C6.66668 8.73637 7.26363 9.33333 8.00001 9.33333C8.73639 9.33333 9.33334 8.73637 9.33334 7.99999C9.33334 7.26362 8.73639 6.66666 8.00001 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M12.6667 6.66666C11.9303 6.66666 11.3333 7.26362 11.3333 8C11.3333 8.73637 11.9303 9.33333 12.6667 9.33333C13.403 9.33333 14 8.73637 14 7.99999C14 7.26362 13.403 6.66666 12.6667 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M3.33332 6.66666C2.59694 6.66666 1.99999 7.26362 1.99999 8C1.99999 8.73637 2.59694 9.33333 3.33332 9.33333C4.0697 9.33333 4.66666 8.73637 4.66666 7.99999C4.66666 7.26362 4.0697 6.66666 3.33332 6.66666Z" fill="#E1E4E8"></path>
                </svg>
              </a>
            </div>
            <div class="relative w-full h-1 mb-3 rounded-full bg-gray-50">
              <div class="absolute top-0 left-0 h-full w-4/5 rounded-full bg-indigo-500"></div>
            </div>
            <div class="flex items-center">
              <span class="inline-block py-1 px-2 mr-2 bg-indigo-50 rounded-full text-xs text-indigo-500">Phase 3</span>
              <span class="text-xs text-gray-500 font-medium">Final adjustments</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded">
          <div class="flex items-center mb-6">
            <span class="flex-shrink-0 inline-flex justify-center items-center mr-3 w-10 h-10 rounded-full bg-green-500">
              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8335 2.58333H9.60017L9.33351 1.75C9.16063 1.26102 8.83996 0.837918 8.41592 0.539299C7.99189 0.24068 7.48547 0.0813322 6.96684 0.0833316H3.16684C2.5038 0.0833316 1.86791 0.346724 1.39907 0.815565C0.930232 1.28441 0.66684 1.92029 0.66684 2.58333V13.4167C0.66684 14.0797 0.930232 14.7156 1.39907 15.1844C1.86791 15.6533 2.5038 15.9167 3.16684 15.9167H14.8335C15.4965 15.9167 16.1324 15.6533 16.6013 15.1844C17.0701 14.7156 17.3335 14.0797 17.3335 13.4167V5.08333C17.3335 4.42029 17.0701 3.78441 16.6013 3.31557C16.1324 2.84672 15.4965 2.58333 14.8335 2.58333ZM15.6668 13.4167C15.6668 13.6377 15.579 13.8496 15.4228 14.0059C15.2665 14.1622 15.0545 14.25 14.8335 14.25H3.16684C2.94583 14.25 2.73386 14.1622 2.57758 14.0059C2.4213 13.8496 2.33351 13.6377 2.33351 13.4167V2.58333C2.33351 2.36232 2.4213 2.15036 2.57758 1.99408C2.73386 1.8378 2.94583 1.75 3.16684 1.75H6.96684C7.14154 1.74955 7.31197 1.80401 7.45403 1.9057C7.59609 2.00739 7.7026 2.15115 7.75851 2.31667L8.20851 3.68333C8.26441 3.84885 8.37092 3.99261 8.51298 4.0943C8.65504 4.19598 8.82547 4.25045 9.00017 4.25H14.8335C15.0545 4.25 15.2665 4.3378 15.4228 4.49408C15.579 4.65036 15.6668 4.86232 15.6668 5.08333V13.4167Z" fill="#D1F1E6"></path>
              </svg>
            </span>
            <div>
              <p class="text-xs font-bold">Example project name here dolor sit</p>
            </div>
          </div>
          <div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6415 9.65834C10.5397 9.61785 10.431 9.5978 10.3215 9.59934C10.212 9.60088 10.1038 9.62397 10.0032 9.66731C9.90261 9.71064 9.81153 9.77337 9.73518 9.8519C9.65882 9.93043 9.59868 10.0232 9.55819 10.125C9.5177 10.2268 9.49765 10.3355 9.49919 10.4451C9.50073 10.5546 9.52382 10.6627 9.56716 10.7633C9.61049 10.8639 9.67321 10.955 9.75175 11.0314C9.83028 11.1077 9.92308 11.1678 10.0249 11.2083C11.2415 11.6917 11.9999 12.4417 11.9999 13.1667C11.9999 14.35 9.94986 15.6667 6.99986 15.6667C4.04986 15.6667 1.99986 14.35 1.99986 13.1667C1.99986 12.4417 2.75819 11.6917 3.97486 11.2083C4.1804 11.1266 4.34504 10.9665 4.43256 10.7633C4.52007 10.5602 4.5233 10.3305 4.44152 10.125C4.35975 9.91946 4.19967 9.75482 3.99651 9.66731C3.79334 9.57979 3.56373 9.57656 3.35819 9.65834C1.46652 10.4083 0.333191 11.7167 0.333191 13.1667C0.333191 15.5 3.25819 17.3333 6.99986 17.3333C10.7415 17.3333 13.6665 15.5 13.6665 13.1667C13.6665 11.7167 12.5332 10.4083 10.6415 9.65834ZM6.16652 7.21667V13.1667C6.16652 13.3877 6.25432 13.5996 6.4106 13.7559C6.56688 13.9122 6.77884 14 6.99986 14C7.22087 14 7.43283 13.9122 7.58911 13.7559C7.74539 13.5996 7.83319 13.3877 7.83319 13.1667V7.21667C8.61874 7.01384 9.30335 6.53148 9.75869 5.86C10.214 5.18852 10.4088 4.37402 10.3066 3.56917C10.2044 2.76433 9.81214 2.0244 9.20338 1.48807C8.59463 0.951747 7.81117 0.655853 6.99986 0.655853C6.18855 0.655853 5.40508 0.951747 4.79633 1.48807C4.18757 2.0244 3.79532 2.76433 3.69309 3.56917C3.59086 4.37402 3.78568 5.18852 4.24102 5.86C4.69637 6.53148 5.38097 7.01384 6.16652 7.21667ZM6.99986 2.33334C7.32949 2.33334 7.65172 2.43109 7.92581 2.61422C8.19989 2.79736 8.41351 3.05766 8.53966 3.3622C8.6658 3.66674 8.69881 4.00185 8.6345 4.32516C8.57019 4.64846 8.41146 4.94543 8.17837 5.17852C7.94528 5.41161 7.64831 5.57034 7.32501 5.63465C7.00171 5.69896 6.66659 5.66595 6.36205 5.53981C6.05751 5.41366 5.79721 5.20004 5.61407 4.92596C5.43094 4.65187 5.33319 4.32964 5.33319 4.00001C5.33319 3.55798 5.50879 3.13406 5.82135 2.82149C6.13391 2.50893 6.55783 2.33334 6.99986 2.33334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Warsaw, Poland</span>
            </div>
            <div class="flex items-center mb-3">
              <span class="mr-3">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.833 3.41668H12.333V2.58334C12.333 1.9203 12.0696 1.28442 11.6008 0.815577C11.1319 0.346736 10.496 0.0833435 9.83299 0.0833435H8.16632C7.50328 0.0833435 6.86739 0.346736 6.39855 0.815577C5.92971 1.28442 5.66632 1.9203 5.66632 2.58334V3.41668H3.16632C2.50328 3.41668 1.86739 3.68007 1.39855 4.14891C0.929713 4.61775 0.666321 5.25363 0.666321 5.91668V13.4167C0.666321 14.0797 0.929713 14.7156 1.39855 15.1844C1.86739 15.6533 2.50328 15.9167 3.16632 15.9167H14.833C15.496 15.9167 16.1319 15.6533 16.6008 15.1844C17.0696 14.7156 17.333 14.0797 17.333 13.4167V5.91668C17.333 5.25363 17.0696 4.61775 16.6008 4.14891C16.1319 3.68007 15.496 3.41668 14.833 3.41668ZM7.33299 2.58334C7.33299 2.36233 7.42079 2.15037 7.57707 1.99409C7.73335 1.83781 7.94531 1.75001 8.16632 1.75001H9.83299C10.054 1.75001 10.266 1.83781 10.4222 1.99409C10.5785 2.15037 10.6663 2.36233 10.6663 2.58334V3.41668H7.33299V2.58334ZM15.6663 13.4167C15.6663 13.6377 15.5785 13.8497 15.4222 14.0059C15.266 14.1622 15.054 14.25 14.833 14.25H3.16632C2.94531 14.25 2.73335 14.1622 2.57707 14.0059C2.42079 13.8497 2.33299 13.6377 2.33299 13.4167V9.20834H4.83299V10.0833C4.83299 10.3044 4.92079 10.5163 5.07707 10.6726C5.23335 10.8289 5.44531 10.9167 5.66632 10.9167C5.88733 10.9167 6.0993 10.8289 6.25558 10.6726C6.41186 10.5163 6.49965 10.3044 6.49965 10.0833V9.20834H11.4997V10.0833C11.4997 10.3044 11.5875 10.5163 11.7437 10.6726C11.9 10.8289 12.112 10.9167 12.333 10.9167C12.554 10.9167 12.766 10.8289 12.9222 10.6726C13.0785 10.5163 13.1663 10.3044 13.1663 10.0833V9.20834H15.6663V13.4167ZM15.6663 7.58334H2.33299V5.91668C2.33299 5.69566 2.42079 5.4837 2.57707 5.32742C2.73335 5.17114 2.94531 5.08334 3.16632 5.08334H14.833C15.054 5.08334 15.266 5.17114 15.4222 5.32742C15.5785 5.4837 15.6663 5.69566 15.6663 5.91668V7.58334Z" fill="#C2C9D2"></path>
                </svg>
              </span>
              <span class="text-xs text-gray-500">Shuffle.dev</span>
            </div>
            <div class="flex items-center justify-between mb-10">
              <div class="flex items-center">
                <img class="w-8 h-8 rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <img class="w-8 h-8 -ml-2 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1528936466093-76ffdfcf7a40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
                <div class="inline-flex -ml-2 items-center justify-center w-8 h-8 rounded-full bg-indigo-50 text-xs font-medium text-indigo-500">+3</div>
              </div>
              <a href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.00001 6.66666C7.26363 6.66666 6.66668 7.26362 6.66668 8C6.66668 8.73637 7.26363 9.33333 8.00001 9.33333C8.73639 9.33333 9.33334 8.73637 9.33334 7.99999C9.33334 7.26362 8.73639 6.66666 8.00001 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M12.6667 6.66666C11.9303 6.66666 11.3333 7.26362 11.3333 8C11.3333 8.73637 11.9303 9.33333 12.6667 9.33333C13.403 9.33333 14 8.73637 14 7.99999C14 7.26362 13.403 6.66666 12.6667 6.66666Z" fill="#E1E4E8"></path>
                  <path d="M3.33332 6.66666C2.59694 6.66666 1.99999 7.26362 1.99999 8C1.99999 8.73637 2.59694 9.33333 3.33332 9.33333C4.0697 9.33333 4.66666 8.73637 4.66666 7.99999C4.66666 7.26362 4.0697 6.66666 3.33332 6.66666Z" fill="#E1E4E8"></path>
                </svg>
              </a>
            </div>
            <div class="relative w-full h-1 mb-3 rounded-full bg-gray-50">
              <div class="absolute top-0 left-0 h-full w-1/2 rounded-full bg-green-500"></div>
            </div>
            <div class="flex items-center">
              <span class="inline-block py-1 px-2 mr-2 bg-indigo-50 rounded-full text-xs text-indigo-500">Phase 2</span>
              <span class="text-xs text-gray-500 font-medium">Implementation</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Content from Wrexa

Tailwind CSS

Wrexa

Dark Split-Layout Hero with Feature List and Photo Collage

A marketing hero section on a dark background with a large two-line-plus heading, short supporting text, a three-item feature list with dot bullets, and a purple call-to-action button. Photographs are arranged in a collage at the left, top right, and right edges.

<section class="pt-40 bg-white">
  <div class="md:ml-10 bg-gray-900 relative">
    <img class="hidden 2xl:block max-w-xs 3xl:max-w-sm absolute top-0 left-0 z-10" src="wrexa-assets/images/work-office.png" alt="">
    <img class="hidden md:block absolute top-1/2 right-0" src="wrexa-assets/images/women-photo2.png" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="hidden sm:block absolute top-0 left-0 bottom-0 h-full ml-12 lg:ml-40 xl:ml-64 3xl:ml-80 w-px bg-gray-600"></div>
      <img class="max-w-xs absolute top-0 right-0 -mt-40 mr-8" src="wrexa-assets/images/women-photo1.png" alt="">
      <div>
        <div class="sm:pb-40 pt-64 md:pt-52 max-w-md mx-auto">
          <h1 class="font-heading text-5xl sm:text-6xl text-white mb-10">What you need, when you need it</h1>
          <p class="font-light text-gray-500 mb-16">The pond cras ornare, some chords for a three moments, like a sense of truth that comes from within.</p>
          <div class="pl-8 xl:pl-16 mb-24">
            <div class="flex items-center mb-4">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
              <span class="ml-8 text-white">One platform for you</span>
            </div>
            <div class="flex items-center mb-4">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
              <span class="ml-8 text-white">Integrations</span>
            </div>
            <div class="flex items-center">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
              <span class="ml-8 text-white">Workflow builder</span>
            </div>
          </div>
          <a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Discover Now</a>
        </div>
        <img class="block mx-auto mt-24 mb-6 2xl:hidden" src="wrexa-assets/images/work-office.png" alt="">
        <img class="block md:hidden ml-auto" src="wrexa-assets/images/women-photo2.png" alt="">
      </div>
    </div>
  </div>
</section>

Content from Zospace

Tailwind CSS

Zospace

Dark split-screen hero with heading and founder story link

A dark promotional hero section with a large centered-left heading "We're Zospace - Founded in London", a short supporting sentence, a small lightbulb icon, and a "Learn our story" text link with an arrow. A photograph of a smiling woman in sunlit street occupies the right half, with a smaller portrait overlapping the lower-left corner.

<section class="relative pb-20 lg:pb-40 lg:pt-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <img class="hidden lg:block absolute bottom-0 left-0 w-40 h-48 object-cover" src="https://images.pexels.com/photos/7193529/pexels-photo-7193529.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=650&amp;w=450" alt="">
  <div class="relative w-full lg:w-1/2 lg:ml-auto mb-20 lg:mb-0">
    <img class="hidden lg:block lg:absolute right-0 top-0 w-full h-128 object-cover" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt="">
    <img class="lg:hidden w-full h-96 object-cover" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-lg">
          <h2 class="mb-12 lg:mb-20 text-5xl lg:text-7xl lg:text-center font-bold font-heading text-white">We're Zospace - Founded in London</h2>
          <div class="flex items-center mb-8 pb-14 border-b border-gray-500">
            <img class="mr-14" src="zospace-assets/images/light-bulb-purple.svg" alt="">
            <div class="max-w-sm">
              <p class="text-lg text-gray-200">A short message that will bring your customers into the world of your imagination.</p>
            </div>
          </div>
          <a class="flex items-center justify-end font-bold text-gray-200" href="#">
            <span>Learn our story</span>
            <span class="ml-5">
              <svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.7387 1.47293L18.7387 10.93L17.5565 10.93L17.5565 2.89739L0.835337 19.6245L0.00193592 18.7911L16.7231 2.064L9.28164 2.064L9.28164 0.881867L18.1476 0.881866C18.4741 0.881866 18.7387 1.14648 18.7387 1.47293Z" fill="white"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Content from Flex

Tailwind CSS

Flex

Blog Article Layout with Hero Image, Pull Quote, and Share Links

A long-form article page with a centered byline, title, subtitle, category tag, full-width hero photo, body text with headings, a green-bordered pull quote, an inline image with caption, and a footer with copy link and social share buttons. The content is stacked vertically in a narrow centered column.

<section class="py-16 md:py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center top;">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-2xl mx-auto mb-12 text-center">
      <div class="flex items-center justify-center">
        <p class="inline-block text-green-500 font-medium">John Doe</p>
        <span class="mx-1 text-green-500">&bull;</span>
        <p class="inline-block text-green-500 font-medium">19 Jan 2022</p>
      </div>
      <h2 class="mb-4 text-3xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Lorem ipsum dolor sit amet</h2>
      <p class="mb-6 text-lg md:text-xl font-medium text-coolGray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="inline-block py-1 px-3 text-xs leading-5 text-green-500 font-medium uppercase bg-green-100 rounded-full shadow-sm">Technology</div>
    </div>
    <div class="mb-10 mx-auto max-w-max overflow-hidden rounded-lg">
      <img src="flex-ui-assets/images/blog-content/content-photo1.jpg" alt="">
    </div>
    <div class="md:max-w-3xl mx-auto">
      <p class="mb-8 pb-10 text-lg md:text-xl font-medium text-coolGray-500 border-b border-coolGray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <h3 class="mb-4 text-2xl md:text-3xl font-semibold text-coolGray-800">Header 1</h3>
      <p class="mb-4 text-base md:text-lg text-coolGray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <div class="mb-6 p-6 border-l-2 border-green-500">
        <p class="mb-4 text-xl md:text-2xl leading-tight font-medium text-coolGray-800">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</p>
        <span class="text-base md:text-lg text-coolGray-400 font-medium">&mdash; John Doe, CEO &amp; Founder</span>
      </div>
      <p class="mb-6 text-base md:text-lg text-coolGray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <div class="mb-4 max-w-max overflow-hidden rounded-md">
        <img src="flex-ui-assets/images/blog-content/content-photo2.jpg" alt="">
      </div>
      <p class="mb-8 text-base md:text-lg text-coolGray-400 font-medium">
        <span>Non massa enim vitae duis mattis. Vel in</span>
        <a class="hover:text-coolGray-600 underline" href="#">ultricies</a>
        <span>vel fringilla.</span>
      </p>
      <h3 class="mb-4 text-2xl md:text-3xl font-semibold text-coolGray-800">Header 1</h3>
      <p class="mb-14 text-base md:text-lg text-coolGray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <p class="mb-4 text-base md:text-lg text-coolGray-500">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</p>
      <ol class="list-decimal list-inside md:px-5 mb-14 text-base md:text-lg text-coolGray-500">
        <li>Lectus id duis vitae porttitor enim gravida morbi.</li>
        <li>Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
        <li>Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
      </ol>
      <p class="mb-10 pb-10 text-base md:text-lg text-coolGray-500 border-b border-coolGray-100">
        <span>Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim.</span>
        <a class="text-green-500 hover:text-green-600 underline" href="#">Vivamus id pharetra massa</a>
        <span>. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</span>
      </p>
      <div class="flex items-center justify-center">
        <a class="inline-flex mr-4 items-center justify-center py-2 px-4 text-coolGray-300 hover:text-coolGray-400 bg-white hover:bg-coolGray-100 border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-md transition duration-200" href="#">
          <svg width="20" height="16" viewbox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 13.8333H5C4.33696 13.8333 3.70108 13.5699 3.23224 13.1011C2.76339 12.6323 2.5 11.9964 2.5 11.3333V4.66667C2.5 4.44565 2.41221 4.23369 2.25592 4.07741C2.09964 3.92113 1.88768 3.83333 1.66667 3.83333C1.44566 3.83333 1.23369 3.92113 1.07741 4.07741C0.921133 4.23369 0.833336 4.44565 0.833336 4.66667V11.3333C0.833336 12.4384 1.27232 13.4982 2.05372 14.2796C2.44063 14.6665 2.89996 14.9734 3.40549 15.1828C3.91101 15.3922 4.45283 15.5 5 15.5H15C15.221 15.5 15.433 15.4122 15.5893 15.2559C15.7455 15.0996 15.8333 14.8877 15.8333 14.6667C15.8333 14.4457 15.7455 14.2337 15.5893 14.0774C15.433 13.9211 15.221 13.8333 15 13.8333ZM19.1667 6.28333C19.158 6.20678 19.1412 6.13136 19.1167 6.05833V5.98333C19.0766 5.89765 19.0232 5.81889 18.9583 5.75V5.75L13.9583 0.75C13.8894 0.68518 13.8107 0.631734 13.725 0.591667H13.65L13.3833 0.5H6.66667C6.00363 0.5 5.36774 0.763392 4.8989 1.23223C4.43006 1.70107 4.16667 2.33696 4.16667 3V9.66667C4.16667 10.3297 4.43006 10.9656 4.8989 11.4344C5.36774 11.9033 6.00363 12.1667 6.66667 12.1667H16.6667C17.3297 12.1667 17.9656 11.9033 18.4344 11.4344C18.9033 10.9656 19.1667 10.3297 19.1667 9.66667V6.33333C19.1667 6.33333 19.1667 6.33333 19.1667 6.28333ZM14.1667 3.34167L16.325 5.5H15C14.779 5.5 14.567 5.4122 14.4107 5.25592C14.2545 5.09964 14.1667 4.88768 14.1667 4.66667V3.34167ZM17.5 9.66667C17.5 9.88768 17.4122 10.0996 17.2559 10.2559C17.0996 10.4122 16.8877 10.5 16.6667 10.5H6.66667C6.44565 10.5 6.23369 10.4122 6.07741 10.2559C5.92113 10.0996 5.83334 9.88768 5.83334 9.66667V3C5.83334 2.77899 5.92113 2.56702 6.07741 2.41074C6.23369 2.25446 6.44565 2.16667 6.66667 2.16667H12.5V4.66667C12.5 5.32971 12.7634 5.96559 13.2322 6.43443C13.7011 6.90327 14.337 7.16667 15 7.16667H17.5V9.66667Z" fill="currentColor"></path>
          </svg>
          <span class="ml-2 text-sm text-coolGray-500 hover:text-coolGray-600 font-medium">Copy Link</span>
        </a>
        <a class="inline-flex mr-2 h-9 w-9 items-center justify-center text-coolGray-500 hover:text-coolGray-600 bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-md transition duration-200" href="#">
          <svg width="10" height="18" viewbox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.6 3.43332H9.16667V0.783318C8.40813 0.70444 7.64596 0.665497 6.88333 0.666651C4.61667 0.666651 3.06667 2.04998 3.06667 4.58332V6.76665H0.508333V9.73332H3.06667V17.3333H6.13333V9.73332H8.68333L9.06667 6.76665H6.13333V4.87498C6.13333 3.99998 6.36667 3.43332 7.6 3.43332Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="inline-flex mr-2 h-9 w-9 items-center justify-center text-coolGray-500 hover:text-coolGray-600 bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-md transition duration-200" href="#">
          <svg width="18" height="14" viewbox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.3333 1.83339C16.7069 2.10513 16.0445 2.28477 15.3667 2.36672C16.0818 1.93949 16.6177 1.26737 16.875 0.475053C16.203 0.875105 15.4673 1.15697 14.7 1.30839C14.1871 0.752196 13.5041 0.381966 12.7582 0.255762C12.0122 0.129558 11.2455 0.254518 10.5782 0.611044C9.91087 0.96757 9.38078 1.5355 9.07104 2.22575C8.76129 2.916 8.68941 3.68954 8.86667 4.42505C7.50786 4.35632 6.1787 4.00251 4.96555 3.3866C3.75239 2.77069 2.68237 1.90646 1.825 0.850052C1.52428 1.37519 1.36627 1.9699 1.36667 2.57505C1.3656 3.13704 1.50352 3.69057 1.76813 4.18636C2.03275 4.68215 2.41585 5.10481 2.88333 5.41672C2.33998 5.40194 1.80824 5.25613 1.33333 4.99172V5.03339C1.33741 5.82079 1.61333 6.58263 2.11443 7.19002C2.61553 7.79742 3.31105 8.21309 4.08333 8.36672C3.78605 8.45719 3.4774 8.50489 3.16667 8.50839C2.95158 8.50587 2.73702 8.48637 2.525 8.45005C2.74493 9.1274 3.17052 9.71934 3.74256 10.1435C4.31461 10.5677 5.00465 10.803 5.71667 10.8167C4.51434 11.7628 3.0299 12.2791 1.5 12.2834C1.22145 12.2843 0.943114 12.2676 0.666668 12.2334C2.22869 13.2419 4.04901 13.7773 5.90833 13.7751C7.19141 13.7884 8.46428 13.5459 9.6526 13.0618C10.8409 12.5777 11.9209 11.8616 12.8293 10.9555C13.7378 10.0493 14.4566 8.97121 14.9438 7.78414C15.431 6.59707 15.6767 5.32483 15.6667 4.04172C15.6667 3.90005 15.6667 3.75005 15.6667 3.60005C16.3206 3.11239 16.8846 2.51457 17.3333 1.83339V1.83339Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="inline-flex h-9 w-9 items-center justify-center text-coolGray-500 hover:text-coolGray-600 bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-md transition duration-200" href="#">
          <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.45 3.54996C13.2522 3.54996 13.0589 3.60861 12.8944 3.71849C12.73 3.82837 12.6018 3.98455 12.5261 4.16728C12.4504 4.35 12.4306 4.55107 12.4692 4.74505C12.5078 4.93903 12.603 5.11721 12.7429 5.25707C12.8827 5.39692 13.0609 5.49216 13.2549 5.53074C13.4489 5.56933 13.65 5.54953 13.8327 5.47384C14.0154 5.39815 14.1716 5.26998 14.2815 5.10553C14.3913 4.94108 14.45 4.74774 14.45 4.54996C14.45 4.28474 14.3446 4.03039 14.1571 3.84285C13.9696 3.65532 13.7152 3.54996 13.45 3.54996V3.54996ZM17.2833 5.56663C17.2671 4.87521 17.1376 4.19113 16.9 3.54163C16.6881 2.9859 16.3583 2.48269 15.9333 2.06663C15.5207 1.63948 15.0163 1.31177 14.4583 1.10829C13.8105 0.863427 13.1257 0.730968 12.4333 0.716626C11.55 0.666626 11.2667 0.666626 9 0.666626C6.73333 0.666626 6.45 0.666626 5.56666 0.716626C4.87429 0.730968 4.18945 0.863427 3.54166 1.10829C2.98473 1.31383 2.48078 1.64126 2.06666 2.06663C1.63952 2.47927 1.31181 2.98366 1.10833 3.54163C0.863465 4.18941 0.731006 4.87425 0.716664 5.56663C0.666664 6.44996 0.666664 6.73329 0.666664 8.99996C0.666664 11.2666 0.666664 11.55 0.716664 12.4333C0.731006 13.1257 0.863465 13.8105 1.10833 14.4583C1.31181 15.0163 1.63952 15.5206 2.06666 15.9333C2.48078 16.3587 2.98473 16.6861 3.54166 16.8916C4.18945 17.1365 4.87429 17.269 5.56666 17.2833C6.45 17.3333 6.73333 17.3333 9 17.3333C11.2667 17.3333 11.55 17.3333 12.4333 17.2833C13.1257 17.269 13.8105 17.1365 14.4583 16.8916C15.0163 16.6881 15.5207 16.3604 15.9333 15.9333C16.3602 15.5188 16.6903 15.0151 16.9 14.4583C17.1376 13.8088 17.2671 13.1247 17.2833 12.4333C17.2833 11.55 17.3333 11.2666 17.3333 8.99996C17.3333 6.73329 17.3333 6.44996 17.2833 5.56663V5.56663ZM15.7833 12.3333C15.7773 12.8623 15.6815 13.3864 15.5 13.8833C15.3669 14.246 15.1532 14.5736 14.875 14.8416C14.6047 15.117 14.2777 15.3303 13.9167 15.4666C13.4197 15.6481 12.8956 15.7439 12.3667 15.75C11.5333 15.7916 11.225 15.8 9.03333 15.8C6.84166 15.8 6.53333 15.8 5.7 15.75C5.15074 15.7602 4.60383 15.6757 4.08333 15.5C3.73815 15.3567 3.42613 15.1439 3.16666 14.875C2.89007 14.6072 2.67903 14.2793 2.55 13.9166C2.34654 13.4126 2.2337 12.8766 2.21666 12.3333C2.21666 11.5 2.16666 11.1916 2.16666 8.99996C2.16666 6.80829 2.16666 6.49996 2.21666 5.66663C2.2204 5.12584 2.31912 4.58991 2.50833 4.08329C2.65504 3.73155 2.88022 3.41801 3.16666 3.16663C3.41984 2.8801 3.73274 2.65254 4.08333 2.49996C4.59129 2.31666 5.12666 2.22086 5.66666 2.21663C6.5 2.21663 6.80833 2.16663 9 2.16663C11.1917 2.16663 11.5 2.16663 12.3333 2.21663C12.8623 2.22269 13.3864 2.3185 13.8833 2.49996C14.262 2.6405 14.6019 2.869 14.875 3.16663C15.1481 3.42261 15.3615 3.73557 15.5 4.08329C15.6852 4.59074 15.7811 5.12644 15.7833 5.66663C15.825 6.49996 15.8333 6.80829 15.8333 8.99996C15.8333 11.1916 15.825 11.5 15.7833 12.3333ZM9 4.72496C8.15484 4.72661 7.32913 4.97873 6.62721 5.44947C5.92529 5.92022 5.37865 6.58846 5.05636 7.36975C4.73407 8.15105 4.6506 9.01035 4.81649 9.83907C4.98238 10.6678 5.39019 11.4287 5.98839 12.0258C6.58659 12.6228 7.34834 13.0291 8.17738 13.1934C9.00642 13.3577 9.86555 13.2725 10.6462 12.9487C11.4269 12.6249 12.0941 12.077 12.5634 11.3742C13.0328 10.6713 13.2833 9.84512 13.2833 8.99996C13.2844 8.43755 13.1743 7.88047 12.9594 7.36076C12.7444 6.84105 12.4288 6.36897 12.0307 5.97167C11.6326 5.57437 11.16 5.25969 10.6398 5.04573C10.1197 4.83178 9.56241 4.72276 9 4.72496V4.72496ZM9 11.775C8.45115 11.775 7.91464 11.6122 7.45829 11.3073C7.00194 11.0024 6.64627 10.569 6.43623 10.0619C6.2262 9.55484 6.17124 8.99688 6.27832 8.45858C6.38539 7.92029 6.64969 7.42583 7.03778 7.03774C7.42587 6.64965 7.92033 6.38535 8.45862 6.27828C8.99692 6.17121 9.55488 6.22616 10.0619 6.43619C10.569 6.64623 11.0024 7.00191 11.3073 7.45825C11.6122 7.9146 11.775 8.45112 11.775 8.99996C11.775 9.36438 11.7032 9.72523 11.5638 10.0619C11.4243 10.3986 11.2199 10.7045 10.9622 10.9622C10.7045 11.2199 10.3986 11.4243 10.0619 11.5637C9.72527 11.7032 9.36442 11.775 9 11.775V11.775Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>

Content from Uinel

Tailwind CSS

Uinel

Split-screen feature section with prototype illustration and heading

A marketing feature section headed "Free your ideas" with a centered intro, followed by a split layout: a light gray panel showing an illustrative prototype card and a blue "1.3k Templates" tile on the left, and an orange icon, large heading, supporting text, and green "Official website" text link on the right.

<section class="py-24 2xl:py-44">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="mb-9 block font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">Discover special tools</span>
      <h2 class="mb-12 font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Free your ideas</h2>
      <p class="mb-20 xl:mb-32 font-heading text-lg leading-8 text-darkBlueGray-400 max-w-lg mx-auto">Newest haretra neque non mi aliquam, finibus mollis is the nulla aliquet in molestie odio congue.</p>
    </div>
    <div class="grid lg:grid-cols-2 lg:items-center gap-14 lg:gap-16 xl:gap-44">
      <img src="uinel-assets/images/content/widget.png" alt="">
      <div class="lg:max-w-lg">
        <img class="h-18 mb-9" src="uinel-assets/elements/content/icon-orange-pencil.svg" alt="">
        <h2 class="mb-10 font-heading font-medium text-7xl xl:text-8xl leading-snug">A spatial system is a set of rules for how you measure and size your UI elements.</h2>
        <p class="mb-14 text-lg leading-6 text-darkBlueGray-400">The nulla commodo, commodo eros a, tristique lectus.</p>
        <a class="inline-flex items-center text-green-600 hover:text-green-700 border-b border-green-600 pb-1 hover:border-green-700" href="#">
          <span class="text-xl font-bold tracking-tight">Official website</span>
          <svg class="ml-4" width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.8 1L15 7H1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M11 12L15 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>

Content from Yofte

Tailwind CSS

Yofte

Dark Blog Article Header with Hero Image and Body Text

A dark-background editorial article layout with a small eyebrow label, large bold heading, a wide photo banner with blue accent bars, and a centered text column with a lead paragraph and body copy. It reads as a blog or content post rather than a product marketing section.

<section class="relative pt-20 md:pt-32 pb-20 bg-blue-800 overflow-x-hidden">
  <img class="absolute top-0 left-0 w-full max-h-32" src="yofte-assets/elements/line-content.svg" alt="">
  <div class="container mx-auto px-4">
    <span class="text-white font-bold font-heading">Online shopping</span>
    <h2 class="mt-4 mb-16 text-6xl md:text-7xl font-bold font-heading text-white">How to improve online store?</h2>
    <div class="relative h-96 -mx-6 mb-20">
      <div class="absolute top-1/2 transform -translate-y-1/2 left-0 right-0 h-80 w-full bg-blue-300"></div>
      <img class="relative w-full h-96 px-6 object-cover" src="yofte-assets/images/placeholder-banner.png" alt="">
    </div>
    <div class="max-w-3xl mx-auto">
      <h3 class="mb-12 text-3xl text-white">This morning, platea dictumst nec nunc. In hac habitasse, general, dignissim accumsan just. Suspendisse vitae ligula convallis, porta tortor et, finibus neque.</h3>
      <p class="mb-10 text-xl text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat nisl quis justo egestas, nec eleifend erat egestas. Curabitur purus neque, tincidunt ac malesuada nec, ornare non odio. Nulla nec lorem sed purus semper porta vel sit amet sem. Nunc placerat non turpis eu molestie. Nam consectetur lacus ut lacus elementum dapibus. Etiam vehicula ipsum ac dolor tristique placerat. In hac habitasse platea dictumst.</p>
      <p class="text-xl text-gray-400">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam venenatis est quis venenatis dignissim. Maecenas a sem eros. Quisque hendrerit vitae libero non porta. Maecenas quis sem et nulla pellentesque accumsan. Proin blandit bibendum orci, a aliquam augue sagittis sed. Quisque pharetra ut quam eget varius. Morbi nisi nunc, ultricies id ligula id, feugiat eleifend est. Etiam metus sem, ornare vitae porta vel, porta a mauris. Fusce dapibus egestas lorem eu tincidunt. Quisque lobortis placerat placerat. Donec eget lectus blandit ex pellentesque iaculis. Proin aliquam vulputate arcu et blandit. Duis sed lobortis mauris, vel porttitor lectus. Pellentesque vel ultrices odio.</p>
    </div>
  </div>
</section>

Content from Nigodo

Tailwind CSS

Nigodo

Blog article layout with hero image, pull quote, and share footer

A long-form blog article page showing a centered header with date, title, subtitle, and category tag, followed by a hero photo, body text sections, a blockquote attributed to an author, a repeated image with caption, and a footer with a Copy Link button and social icons. Content is arranged in a single centered column with a dark navy and pink accent palette.

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto mb-12 text-center">
      <p class="text-xl font-bold text-pink-400 mb-2">John Doe • 19 Jan 2022</p>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-4">Lorem ipsum dolor sit amet</h1>
      <p class="text-xl font-extrabold leading-8 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <span class="inline-flex h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border border-indigo-900 bg-green-200 uppercase">Technology</span>
    </div>
    <img class="block w-full mb-12 h-112 lg:h-140 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2072&amp;q=80" alt="">
    <div class="max-w-4xl mx-auto">
      <p class="text-xl font-extrabold leading-7 pb-12 mb-12 border-b-3 border-indigo-900">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <h3 class="text-2xl font-extrabold mb-4">Header 1</h3>
      <p class="text-xl font-extrabold leading-7 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <div class="mb-10 p-8 border-l-3 border-indigo-500">
        <p class="text-2xl font-extrabold leading-8 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</p>
        <span class="text-xl text-pink-400 font-extrabold leading-7">— John Doe, CEO &amp; Founder</span>
      </div>
      <p class="text-xl font-extrabold leading-7 mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <img class="block mb-6 w-full h-112 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2072&amp;q=80" alt="">
      <p class="text-xl font-extrabold text-pink-400 mb-8">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <h3 class="text-2xl font-extrabold mb-4">Header 1</h3>
      <p class="text-xl font-extrabold leading-7 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <p class="text-xl font-extrabold leading-7 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <p class="text-xl font-extrabold leading-7 mb-10">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</p>
      <ul class="mb-10">
        <li class="text-xl font-extrabold leading-7 mb-2">1. Lectus id duis vitae porttitor enim gravida morbi.</li>
        <li class="text-xl font-extrabold leading-7 mb-2">2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
        <li class="text-xl font-extrabold leading-7">3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
      </ul>
      <p class="text-xl font-extrabold leading-7 pb-12 mb-12 border-b-3 border-indigo-900">Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim. Vivamus id pharetra massa. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</p>
      <div class="md:flex justify-center items-center">
        <a class="inline-block w-full md:w-auto mb-4 md:mb-0 md:mr-6 py-3 px-8 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Copy Link</a>
        <a class="inline-flex items-center justify-center w-14 h-14 mr-6 border-3 border-indigo-900 hover:border-indigo-800 rounded bg-white text-indigo-900 hover:text-indigo-800 shadow" href="#">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.1798 27.6364V17.0214H21.8109L22.3557 12.8833H18.1798V10.2417C18.1798 9.04402 18.5175 8.22781 20.2705 8.22781L22.5027 8.22691V4.52566C22.1166 4.47646 20.7916 4.36365 19.2493 4.36365C16.0288 4.36365 13.824 6.29175 13.824 9.83189V12.8833H10.1818V17.0214H13.824V27.6364H18.1798Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="inline-flex items-center justify-center w-14 h-14 mr-6 border-3 border-indigo-900 hover:border-indigo-800 rounded bg-white text-indigo-900 hover:text-indigo-800 shadow" href="#">
          <svg width="32" height="32" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.13417 0.909058H19.8655C23.8497 0.909058 27.0911 4.15039 27.0909 8.13429V19.8656C27.0909 23.8495 23.8497 27.0909 19.8655 27.0909H8.13417C4.15026 27.0909 0.909088 23.8497 0.909088 19.8656V8.13429C0.909088 4.15039 4.15026 0.909058 8.13417 0.909058ZM19.8657 24.7679C22.5688 24.7679 24.7681 22.5688 24.7681 19.8656H24.7679V8.13429C24.7679 5.43128 22.5687 3.23204 19.8655 3.23204H8.13417C5.43115 3.23204 3.23207 5.43128 3.23207 8.13429V19.8656C3.23207 22.5688 5.43115 24.7681 8.13417 24.7679H19.8657ZM7.14285 14.0001C7.14285 10.219 10.2189 7.14282 14 7.14282C17.7811 7.14282 20.8571 10.219 20.8571 14.0001C20.8571 17.7811 17.7811 20.8571 14 20.8571C10.2189 20.8571 7.14285 17.7811 7.14285 14.0001ZM9.50397 14C9.50397 16.479 11.521 18.4958 14 18.4958C16.479 18.4958 18.496 16.479 18.496 14C18.496 11.5207 16.4792 9.50383 14 9.50383C11.5208 9.50383 9.50397 11.5207 9.50397 14Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="inline-flex items-center justify-center w-14 h-14 border-3 border-indigo-900 hover:border-indigo-800 rounded bg-white text-indigo-900 hover:text-indigo-800 shadow" href="#">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M29.0909 8.19468C28.1808 8.59795 27.2042 8.87145 26.1782 8.99355C27.2259 8.3662 28.0278 7.37113 28.4079 6.18907C27.4252 6.77004 26.3404 7.19189 25.1846 7.42058C24.2591 6.43323 22.9426 5.81824 21.4824 5.81824C18.681 5.81824 16.4097 8.08963 16.4097 10.8895C16.4097 11.2866 16.4545 11.6744 16.541 12.0453C12.3258 11.8336 8.58808 9.81404 6.08646 6.74531C5.64917 7.49319 5.4004 8.36462 5.4004 9.29484C5.4004 11.0548 6.2966 12.6077 7.65636 13.5162C6.82505 13.4884 6.04319 13.2597 5.3587 12.8796V12.943C5.3587 15.3998 7.10783 17.4502 9.42711 17.9169C9.00218 18.0312 8.5541 18.0946 8.09054 18.0946C7.76299 18.0946 7.44622 18.0621 7.13563 18.0003C7.78149 20.0167 9.65426 21.4831 11.8731 21.5233C10.1379 22.883 7.94994 23.6912 5.57349 23.6912C5.16404 23.6912 4.76072 23.6664 4.36363 23.6216C6.60876 25.0633 9.27418 25.9039 12.1389 25.9039C21.4701 25.9039 26.5707 18.1749 26.5707 11.472L26.5537 10.8153C27.5503 10.1045 28.4125 9.21141 29.0909 8.19468Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>

Content from Pstls.

Tailwind CSS

Pstls.

Blog article layout with hero image, serif headings, pull quote, and body text

A long-form blog article page showing a published date, large serif headline, intro paragraph, full-width hero photo, and body sections with an inline image, numbered list, and styled pull quote. The content is centered in a narrow reading column with generous whitespace and a light background.

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mb-12"><span class="text-indigo-300" >Published 02 September 2022</span>
      <h2 class="text-4xl md:text-5xl font-heading mt-4 mb-6" >Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="leading-8" >These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
    </div><img class="block w-full mb-12" src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80" alt="" >
    <div class="max-w-xl mx-auto">
      <p class="leading-8 mb-8 pb-8 border-b" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <h2 class="text-4xl font-heading mb-6" >Lorem ipsum</h2>
      <p class="leading-8 mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p><img class="block w-full mb-4" src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80" alt="" >
      <p class="text-sm mb-6"><span >Brown wooden dock by Mark Harpur via</span> <a class="text-indigo-500 hover:text-indigo-600 underline hover:no-underline" href="#" >Unsplash</a></p>
      <p class="leading-8 mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor commodo arcu id ullamcorper. Aliquam vestibulum lobortis venenatis. Aenean in pharetra risus, id iaculis leo. Proin id risus sit amet mauris hendrerit tincidunt. Vestibulum pulvinar nec leo nec sagittis. Duis vestibulum sit amet odio sodales consequat. Nam eget elit tempus, cursus lorem vel, sollicitudin massa. Sed varius condimentum massa, et volutpat ante eleifend a. Praesent purus justo, finibus eu suscipit in, vulputate quis est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin euismod tellus quam, eget interdum diam consectetur eget. Phasellus felis quam, iaculis at malesuada nec, varius nec massa. Integer rhoncus sapien faucibus turpis bibendum, quis maximus magna vehicula. Quisque pharetra, tortor sit amet vestibulum tincidunt, tortor lectus pretium ipsum, a elementum risus libero id diam. Morbi ut sem elementum, blandit augue eu, vehicula nunc. Ut et pellentesque mauris.</p>
      
      <ul class="mb-6 list-decimal list-inside">
        <li class="leading-8 mb-2" >Pellentesque in elit nec velit suscipit tincidunt sit amet sed augue. Proin augue justo, imperdiet nec ultrices non, dapibus sit amet risus. Nunc pellentesque nisl at neque pulvinar ornare.</li>
        <li class="leading-8 mb-2" >Nullam euismod, turpis a fermentum malesuada, lectus ante consectetur sem, ac eleifend ipsum diam vitae nisi. Pellentesque feugiat, nibh ut hendrerit porta, erat lectus aliquet libero, vitae vulputate leo neque id sapien.</li>
        <li class="leading-8" >Praesent a consequat velit, a tincidunt est. Proin eu facilisis lacus. Fusce orci elit, pharetra at orci at, sagittis sollicitudin ex. Duis vitae nunc mollis, ultrices risus vel, consequat erat. Nam vel diam risus. Ut sed sagittis nibh, sed bibendum eros.</li>
      </ul>
      
      <div class="flex mb-6 bg-indigo-100 relative">
        <div class="absolute top-0 left-0 px-1 h-full bg-indigo-200"></div>
        <div class="pl-14 py-10 pr-10">
          <h2 class="text-4xl font-heading"  >“On the other hand, perfection can also haunt some of us to the point of inaction.”</h2>
        </div>
      </div>
      <p class="text-sm mb-6"><span >Danny Bailey, CEO &amp; Founder at </span> <a class="text-indigo-500 hover:text-indigo-600 underline hover:no-underline" href="#" >Pstls</a></p>
      <p class="leading-8" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor commodo arcu id ullamcorper. Aliquam vestibulum lobortis venenatis. Aenean in pharetra risus, id iaculis leo. Proin id risus sit amet mauris hendrerit tincidunt. Vestibulum pulvinar nec leo nec sagittis. Duis vestibulum sit amet odio sodales consequat. Nam eget elit tempus, cursus lorem vel, sollicitudin massa. Sed varius condimentum massa, et volutpat ante eleifend a. Praesent purus justo, finibus eu suscipit in, vulputate quis est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin euismod tellus quam, eget interdum diam consectetur eget. Phasellus felis quam, iaculis at malesuada nec, varius nec massa. Integer rhoncus sapien faucibus turpis bibendum, quis maximus magna vehicula. Quisque pharetra, tortor sit amet vestibulum tincidunt, tortor lectus pretium ipsum, a elementum risus libero id diam. Morbi ut sem elementum, blandit augue eu, vehicula nunc. Ut et pellentesque mauris.</p>
    </div>
  </div>
</section>

Content from BoldUI

Tailwind CSS

BoldUI

Dark Blog Article Header with Author Byline and Split Photo

A dark-themed blog article layout with breadcrumbs, a bold uppercase headline, an author avatar with name and role, and body text on the left, paired with a full-height portrait photo on the right. A top-right panel shows a 'Read next article' link with a yellow arrow.

<section class="relative bg-black bg-no-repeat bg-cover overflow-hidden" style="background-image: url('boldui-assets/images/content1.png');">
  <div class="w-full sm:w-3/5 md:w-1/3 ml-auto">
    <div class="flex md:h-80 items-center justify-center px-4 bg-black">
      <a class="relative inline-flex items-center h-52 md:h-64 text-white hover:underline" href="#">
        <img class="absolute top-0 h-full left-0" src="boldui-assets/elements/ellipse-right.svg" alt="">
        <div class="flex items-center">
          <span class="mr-2 text-sm font-heading">Read next article</span>
          <svg width="17" height="9" viewBox="0 0 17 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.3264 3.70975H0.316406V5.80206H12.3264V8.94052L16.3164 4.7559L12.3264 0.571289V3.70975Z" fill="#FFEC3E"></path>
          </svg>
        </div>
      </a>
    </div>
  </div>
  <div class="w-full sm:w-5/6 md:w-2/3 px-4 bg-black">
    <div class="pt-12 pb-24 md:pt-24 px-4">
      <div class="max-w-xl mx-auto">
        <ul class="flex items-center mb-12">
          <li class="flex items-center mr-3">
            <a class="inline-block mr-3 text-xs text-gray-500 uppercase font-semibold" href="#">Home</a>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 6.18506H0L0 4.10173H12.01V0.976726L16 5.14339L12.01 9.31006V6.18506Z" fill="#7E7E7E"></path>
            </svg>
          </li>
          <li class="flex items-center mr-3">
            <a class="inline-block mr-3 text-xs text-gray-500 uppercase font-semibold" href="#">Blog</a>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 6.18506H0L0 4.10173H12.01V0.976726L16 5.14339L12.01 9.31006V6.18506Z" fill="#7E7E7E"></path>
            </svg>
          </li>
          <li><a class="inline-block text-xs text-gray-500 uppercase font-semibold" href="#">Article</a></li>
        </ul>
        <h2 class="inline-block mb-6 text-3xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
        <div class="flex items-center mb-8">
          <img class="h-24" src="boldui-assets/images/team6.png" alt="">
          <div class="ml-4">
            <h3 class="mb-2 text-white font-heading">Clara Osborne</h3>
            <p class="text-xs text-gray-500 uppercase font-semibold tracking-widest">Product designer</p>
          </div>
        </div>
        <div>
          <p class="mb-8 text-lg text-gray-500">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
          <p class="text-lg text-gray-500">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Content from Acros

Tailwind CSS

Acros

Blog Article Header and Body Layout

A blog article page with breadcrumb navigation, a teal hashtag tag, a serif headline, author and date metadata, a full-width photo, and a centered body text column. It is a content reading layout rather than a marketing section or application UI.

<section>
  <div class="container px-4 mx-auto mb-14">
    <div class="flex items-center pt-4 mb-14">
      <a class="inline-block text-xs font-medium uppercase hover:underline" href="#">Home</a>
      <span class="mx-2 text-gray-300">
        <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.33325 1.66675L3.66659 4.00008L1.33325 6.33341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <a class="inline-block text-xs font-medium uppercase hover:underline" href="#">Blog</a>
      <span class="mx-2 text-gray-300">
        <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.33325 1.66675L3.66659 4.00008L1.33325 6.33341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <a class="inline-block text-xs text-gray-300 font-medium uppercase" href="#">Article</a>
    </div>
    <div class="max-w-3xl">
      <a class="inline-block font-heading text-green-500 hover:text-green-600 mb-2" href="#">#family</a>
      <h3 class="font-heading text-3xl sm:text-4xl mb-8">The generated Lorem Ipsum is therefore always free from repetition</h3>
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full mr-3" src="acros-assets/images/blog-content/man-32x32.png" alt="">
        <a class="text-sm leading-6 font-medium hover:underline" href="#">Denny Bailey</a>
        <div class="w-px h-8 mx-4 sm:mx-8 bg-gray-200"></div>
        <div class="flex items-center">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.09277 9.40421H20.9167" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.4422 13.3097H16.4515" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.0045 13.3097H12.0137" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.55793 13.3097H7.5672" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.4422 17.1962H16.4515" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M12.0045 17.1962H12.0137" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.55793 17.1962H7.5672" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16.0438 2V5.29078" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.9654 2V5.29078" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2383 3.5791H7.77096C4.83427 3.5791 3 5.21504 3 8.22213V17.2718C3 20.3261 4.83427 21.9999 7.77096 21.9999H16.229C19.175 21.9999 21 20.3545 21 17.3474V8.22213C21.0092 5.21504 19.1842 3.5791 16.2383 3.5791Z" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <a class="ml-2 text-sm leading-6 font-medium hover:underline" href="#">Denny Bailey</a>
        </div>
      </div>
    </div>
  </div>
  <img class="block w-full h-112 object-cover" src="acros-assets/images/blog-content/people-1100x480.jpg" alt="">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto pt-12 pb-14">
      <p class="text-lg leading-8 mb-6">Building websites from wireframes that I had received. Some of those questions were:</p>
      <p class="text-lg leading-8 mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg leading-8">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

Content from Bendis

Tailwind CSS

Bendis

Blog article header with hero image, breadcrumbs, title, author byline, and body text

A blog article page layout featuring a full-width skateboarding photo at top, followed by breadcrumb navigation, a bold centered serif-free headline, an author avatar with name and date, and a narrow column of body paragraphs. It presents editorial article content rather than interactive controls.

<section class="pb-24">
  <div class="h-64 lg:h-144">
    <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
  </div>
  <div class="relative container px-4 mx-auto -mt-24">
    <div class="max-w-5xl px-4 pt-12 lg:pt-20 mx-auto bg-white">
      <div class="max-w-2xl mb-12 mx-auto text-center">
        <div class="flex items-center justify-center mb-6 text-xs text-blue-500 font-semibold uppercase">
          <a href="#">Home</a>
          <span class="inline-block mx-2">
            <svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
            </svg>
          </span>
          <a href="#">Blog</a>
          <span class="inline-block mx-2">
            <svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
            </svg>
          </span>
          <a href="#">Article</a>
        </div>
        <h2 class="mb-6 text-5xl text-blue-800 font-bold font-heading">Lorem ipsum dolor sit amet consectutar</h2>
        <div class="flex items-center justify-center">
          <div class="mr-6">
            <img class="w-14 h-14 object-cover" src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <div class="text-left">
            <h3 class="mb-2 text-lg text-gray-500 font-semibold font-heading">Sara Sampton</h3>
            <p class="text-blue-500 text-xs">10 Jun 2021 | 19:40</p>
          </div>
        </div>
      </div>
      <div class="max-w-2xl mx-auto -mb-6">
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque eveniet est laborum exercitationem!</p>
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</p>
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur aperiam ipsum vel facilis, quibusdam velit. Et, ipsam repellat? Possimus id exercitationem aut voluptatum cumque, nemo quaerat officiis accusamus.</p>
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</p>
      </div>
    </div>
  </div>
</section>

Content from Shuffle UX

Tailwind CSS

Shuffle UX

Blog article header with breadcrumb, headline, author byline, and image placeholder

A centered article header showing a breadcrumb trail (Home, Blog, Article), a bold two-line headline, an author avatar with name and date, followed by a full-width gray image placeholder block. The layout is a simple centered stack on a white background.

<section class="py-20">
  <div class="container px-4 mx-auto mb-16">
    <div class="max-w-2xl mx-auto text-center">
      <div class="flex mb-2 items-center justify-center">
        <a class="text-xs text-gray-200" href="#">Home</a>
        <svg class="w-3 h-3 mx-1 text-gray-200" xmlns="http://www.w3.org/2000/svg" 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"></path>
        </svg>
        <a class="text-xs text-gray-200" href="#">Blog</a>
        <svg class="w-3 h-3 mx-1 text-gray-200" xmlns="http://www.w3.org/2000/svg" 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"></path>
        </svg>
        <a class="text-xs text-gray-200" href="#">Article</a>
      </div>
      <h2 class="mb-6 text-4xl lg:text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <div class="flex items-center justify-center">
        <div class="mr-6">
          <img class="w-16 h-16 object-cover rounded-full" src="mockup-assets/images/gray-300-avatar.png" alt="">
        </div>
        <div>
          <h3 class="text-2xl font-bold font-heading">Danny Bailey</h3>
          <p class="text-lg text-gray-500">February 26, 2021</p>
        </div>
      </div>
    </div>
  </div>
  <div class="h-112">
    <img class="w-full h-full object-cover" src="mockup-assets/images/gray-500-horizontal.png" alt="">
  </div>
</section>

Content from Cronos

Tailwind CSS

Cronos

Blog article header with breadcrumb, author byline, and hero landscape image

A centered blog article page header showing breadcrumb navigation (Home, Blog, Article), a bold serif-style heading, an author avatar with name and date, and a full-width green hillside photo with decorative colored squares, followed by body paragraphs in a narrow centered column.

<section class="py-20">
    <div class="container mx-auto px-4">
        <div class="max-w-2xl mx-auto text-center mb-12">
            <div class="flex items-center justify-center mb-4">
                <a class="text-gray-400 text-xs font-bold" href="#">Home</a>
                <svg class="mx-2" width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.12038 7.17461C-0.0593306 7.38428 -0.0350499 7.69993 0.174613 7.87964C0.384276 8.05935 0.699926 8.03507 0.879637 7.8254L3.87964 4.3254C4.04013 4.13816 4.04013 3.86186 3.87964 3.67461L0.879637 0.174613C0.699926 -0.0350495 0.384276 -0.0593303 0.174613 0.120381C-0.0350496 0.300092 -0.0593303 0.615742 0.120381 0.825405L2.84147 4.00001L0.12038 7.17461Z" fill="#A8A29E"></path>
                </svg>
                <a class="text-gray-400 text-xs font-bold" href="#">Blog</a>
                <svg class="mx-2" width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.12038 7.17461C-0.0593306 7.38428 -0.0350499 7.69993 0.174613 7.87964C0.384276 8.05935 0.699926 8.03507 0.879637 7.8254L3.87964 4.3254C4.04013 4.13816 4.04013 3.86186 3.87964 3.67461L0.879637 0.174613C0.699926 -0.0350495 0.384276 -0.0593303 0.174613 0.120381C-0.0350496 0.300092 -0.0593303 0.615742 0.120381 0.825405L2.84147 4.00001L0.12038 7.17461Z" fill="#A8A29E"></path>
                </svg>
                <a class="text-gray-400 text-xs font-bold" href="#">Article</a>
            </div>
            <h1 class="font-heading text-4xl font-bold mb-6">Lorem ipsum dolor sit amet consectutar domor</h1>
            <div class="flex items-center justify-center">
                <div class="mr-4">
                    <img class="rounded-full w-16 h-16 object-cover" src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=547&amp;q=80" alt="">
                </div>
                <div class="text-left">
                    <p class="text-gray-600 text-xl font-bold">Danny Bailey</p>
                    <p class="text-gray-600 text-xl">Februrary 26, 2021</p>
                </div>
            </div>
        </div>
        <div class="mb-12 relative">
            <img class="absolute hidden lg:block top-0 right-0 w-40 h-40 z-10" src="cronos-assets/elements/warning-light-small.svg" alt="">
            <img class="absolute hidden lg:block bottom-0 left-0 w-40 h-40 z-10" src="cronos-assets/elements/white-green-dark.svg" alt="">
            <img class="w-full object-cover" src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1300&amp;q=80" alt="">
        </div>
    </div>
    <div class="container mx-auto px-4">
        <div class="max-w-2xl mx-auto">
            <p class="mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
            <p class="mb-6">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
            <p>These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
        </div>
    </div>
</section>

Content from NEUB

Tailwind CSS

NEUB

Blog Article Header with Hero Image and Quote Blocks

A yellow-background blog article layout showing breadcrumbs, a bold multi-line headline with a pink accent word, author byline with avatar and date, a framed hero photo with pink offset border, and stacked text callout blocks in pink, dark, and light styles. Content is arranged in a centered vertical stack with neo-brutalist hard black shadows and borders.

<section class="py-20 bg-yellow-300">
  <div class="container px-4 mx-auto mb-16">
    <div class="max-w-xl lg:max-w-4xl mx-auto">
      <div class="flex mb-6 items-center justify-center">
        <a class="text-sm font-black font-heading text-black hover:text-pink-500" href="#">HOME</a>
        <svg class="w-3 h-3 mx-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
        </svg>
        <a class="text-sm font-black font-heading text-black hover:text-pink-500" href="#">BLOG</a>
        <svg class="w-3 h-3 mx-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
        </svg>
        <a class="text-sm font-black font-heading text-pink-500" href="#">ARTICLE</a>
      </div>
      <h2 class="mb-8 text-center text-5xl sm:text-6xl lg:text-7xl leading-tight font-black font-heading tracking-tight text-black">LOREM IPSUM DOLOR SIT AMET <span class="text-pink-500">CONSECTUTAR</span> DOMOR AT ELIS</h2>
      <div class="flex items-center justify-center">
        <div class="mr-6 w-16 h-16 relative">
          <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>
          <img class="relative w-full h-full object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&amp;w=1470&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
        </div>
        <div>
          <h3 class="text-2xl font-black font-heading tracking-tight text-black">DIANE BAILEY</h3>
          <p class="text-lg font-bold text-black">FEBRUARY 26, 2021</p>
        </div>
      </div>
    </div>
  </div>
  <div class="h-96 mb-12 lg:mb-16 relative mx-10">
    <div class="absolute inset-0 bg-pink-500 translate-x-6 translate-y-6 border-4 border-black"></div>
    <img class="relative w-full h-full object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1713947506242-8fcae733d158?q=80&amp;w=1332&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
    <div class="absolute -bottom-3 -right-3 w-24 h-24 bg-white border-4 border-black"></div>
    <div class="absolute -top-4 -left-4 w-16 h-16 bg-pink-500 border-4 border-black"></div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto">
      <div class="mb-8 lg:mb-12 p-6 lg:p-8 bg-pink-500 border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
        <p class="text-lg leading-loose lg:text-xl lg:leading-relaxed text-white font-medium">Building websites from wireframes that I had received. Some of those questions
          were:</p>

      </div>
      <div class="mb-8 lg:mb-12 p-6 lg:p-8 bg-gray-900 border-4 border-black shadow-[8px_8px_0px_0px_#f6339a]">
        <p class="text-lg leading-loose lg:text-xl lg:leading-relaxed text-white font-medium">Now that I am a UX designer, I notice that some designers tend to forget that
          wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also
          responsible for creating product specifications. I admit that there can be so many details to remember that
          it's easy to lose track. To save time and energy for myself, I gatheblue all of my years of wireframing
          knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge
          with you, so that you can get back to being creative.</p>

      </div>
      <div class="p-6 lg:p-8 bg-gray-100 border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
        <p class="text-lg leading-loose lg:text-xl lg:leading-relaxed text-gray-700 font-medium">These types of questions led me to miss numerous deadlines, and I wasted time
          and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes
          had provided enough detail.</p>

      </div>
    </div>
  </div>
</section>

Content from Casper

Tailwind CSS

Casper

Dark Split-Screen Hero with Headline and Space Illustration

A dark promotional section with a large headline and muted supporting text on the left, and a subheading, body paragraphs, and a 3D space illustration of a robot on the right. It introduces a UI library with a split-screen layout and no visible navigation or form controls.

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 left-0 -ml-60 -mt-96 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-2xl mx-auto lg:mx-0 lg:max-w-md xl:max-w-lg">
          <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl xl:text-7xl font-medium text-white tracking-tight mb-6">
            <span class="block">Casper</span>
            <span>is an awesome UI Library</span>
          </h2>
          <p class="text-3xl font-medium text-gray-600 mb-4">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
          <p class="text-3xl font-medium text-gray-600">Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-2xl mx-auto lg:mx-0 lg:max-w-md xl:max-w-xl">
          <h3 class="text-2xl text-gray-50 font-medium mb-8">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</h3>
          <p class="text-lg tracking-tight text-gray-200 mb-4">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
          <p class="text-lg tracking-tight text-gray-200 mb-10">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
          <img class="block w-full" src="casper-assets/content/image-robot.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Content makes the page. In our Tailwind content components, we provide you with many possible variations of content presentation. Regardless of its type and length, you'll find a way to show what's important to your audience.

Browse the Tailwind navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.

See all variations of Tailwind navigation components and the code underneath them in Shuffle Editor.

Try demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Content Components

Framework

UI Library

Components

Content from Saturn

Rich Text Feature Section with Headline and Illustration

Content from DarkPro

Dark blog article header with breadcrumb, author byline, hero code image, and body text

Content from Solstice

Blog Article Page with Hero Image and Newsletter Signup

Your next website starts here

Content from Nightsable

Blog article page with interview content and From the blog card grid

Content from Zeus

Blog Article Header with Author and Hero Image

Content from Artemis Dashboard

Project Card Grid with Avatars and Progress Bars

Content from Wrexa

Dark Split-Layout Hero with Feature List and Photo Collage

Content from Zospace

Dark split-screen hero with heading and founder story link

Content from Flex

Blog Article Layout with Hero Image, Pull Quote, and Share Links

Content from Uinel

Split-screen feature section with prototype illustration and heading

Content from Yofte

Dark Blog Article Header with Hero Image and Body Text

Content from Nigodo

Blog article layout with hero image, pull quote, and share footer

Content from Pstls.

Blog article layout with hero image, serif headings, pull quote, and body text

Content from BoldUI

Dark Blog Article Header with Author Byline and Split Photo

Content from Acros

Blog Article Header and Body Layout

Content from Bendis

Blog article header with hero image, breadcrumbs, title, author byline, and body text

Content from Shuffle UX

Blog article header with breadcrumb, headline, author byline, and image placeholder

Content from Cronos

Blog article header with breadcrumb, author byline, and hero landscape image

Content from NEUB

Blog Article Header with Hero Image and Quote Blocks

Content from Casper

Dark Split-Screen Hero with Headline and Space Illustration

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support