Tailwind CSS Break Inside

export default function PreventColumnSplit() {
  return (
    <div className="columns-1 h-screen w-screen p-6">
      <div className="break-after-column bg-white transition-all">
        <h2 className="text-2xl font-semibold">
          Column Break
        </h2>
        <p>
          This section uses a <code>break-after-column</code>, enforcing the subsequent element to break into a new column. 
        </p>
      </div>

      {/* This Content that flows after the potential break */}
      <div className="bg-white break-inside-avoid pt-6">
        <h2 className="text-xl font-medium">
          Subsequent Content
        </h2>
        <p>
          This section uses a <code>break-inside-avoid</code> to avoid fragmenting into multiple columns. Remove the <code>break-inside-avoid</code> utility to break this line into another column.
        </p>
      </div>
    </div>
  );
}

export default function HoverAvoidBreak() {
  return (
    <div className="columns-1 h-screen w-screen p-6">
      <div className="break-after-column bg-white transition-all">
        <h2 className="text-2xl font-semibold">
          Column Break
        </h2>
        <p>
          This section uses a <code>break-after-column</code>, enforcing the subsequent element to break into a new column. 
        </p>
      </div>

      {/* This Content that flows after the potential break */}
      <div className="bg-white hover:break-inside-avoid pt-6">
        <h2 className="text-xl font-medium">
          Subsequent Content
        </h2>
        <p>
          On hover, this section applies a <code>break-inside-avoid</code> to avoid fragmenting into multiple columns. By default, this line will come into another column, hover over this section to avoid breaking it inside.
        </p>
      </div>
    </div>
  );
}

import React from "react";

export default function ResponsiveBreakControl() {
  return (
    <div className="columns-1 h-screen w-screen p-6">
      <div className="break-after-column bg-white transition-all">
        <h2 className="text-2xl font-semibold">
          Column Break
        </h2>
        <p>
          This section uses a <code>break-after-column</code>, enforcing the subsequent element to break into a new column. 
        </p>
      </div>

      {/* This Content that flows after the potential break */}
      <div className="bg-white md:break-inside-avoid pt-6">
        <h2 className="text-xl font-medium">
          Subsequent Content
        </h2>
        <p>
          On <code>md</code> breakpoint, this section applies a <code>break-inside-avoid</code> to avoid fragmenting into multiple columns. Below the <code>md</code> breakpoint, this line will come into another column.
        </p>
      </div>
    </div>
  );
}

const NewsArticle = () => {
  const article = {
    title: "The Future of Sustainable Technology",
    author: "Emma Thompson",
    date: "February 5, 2025",
    sections: [
      {
        id: 1,
        title: "Introduction",
        content: "As we move further into the digital age, the importance of sustainable technology becomes increasingly apparent. The intersection of environmental consciousness and technological advancement presents both challenges and opportunities."
      },
      {
        id: 2,
        title: "Current Landscape",
        content: "The technology sector currently accounts for approximately 2% of global carbon emissions. However, innovations in green computing and energy-efficient hardware are showing promising results in reducing this environmental impact."
      },
      {
        id: 3,
        title: "Innovation Trends",
        content: "Several key trends are emerging in sustainable technology. From biodegradable electronics to carbon-neutral data centers, companies are investing heavily in environmentally conscious solutions. These innovations are not just good for the planet but also drive economic growth."
      },
      {
        id: 4,
        title: "Market Impact",
        content: "The sustainable technology market is expected to reach $50 billion by 2026. This growth is driven by increasing consumer demand for eco-friendly products and stricter environmental regulations worldwide."
      },
      {
        id: 5,
        title: "Future Perspectives",
        content: "Looking ahead, the integration of AI with sustainable technology presents exciting possibilities. Smart grids, predictive maintenance, and automated energy management systems are just the beginning of this revolution."
      },
      {
        id: 6,
        title: "Conclusion",
        content: "The future of sustainable technology is bright, but it requires continued innovation and commitment from both industry leaders and consumers. As we face growing environmental challenges, the role of sustainable technology becomes increasingly critical."
      }
    ]
  };

  return (
    <div className="p-4 bg-slate-50 h-full overflow-auto">
      <article className="columns-2 gap-4 prose prose-sm">
        <header className="break-after-column mb-4 not-prose">
          <h1 className="text-xl font-bold">{article.title}</h1>
          <div className="text-sm text-gray-600 mt-2">
            <span>{article.author}</span> • <span>{article.date}</span>
          </div>
        </header>

        {article.sections.map((section, index) => (
          <section 
            key={section.id} 
            className={`mb-4 break-inside-avoid ${
              index === 3 ? 'break-before-column' : ''
            }`}
          >
            <h2 className="text-lg font-semibold mb-2">{section.title}</h2>
            <p className="text-sm leading-relaxed text-gray-700">{section.content}</p>
          </section>
        ))}
      </article>
    </div>
  );
};

export default NewsArticle;

const AcademicPaper = () => {
  const paper = {
    title: "Analysis of Machine Learning Approaches in Climate Modeling",
    authors: ["Dr. Sarah Chen", "Prof. James Wilson", "Dr. Maria Garcia"],
    abstract: "This paper examines the effectiveness of various machine learning approaches in climate modeling and prediction. We analyze neural networks, random forests, and gradient boosting methods across different climate datasets.",
    sections: [
      {
        id: 1,
        title: "Introduction",
        content: "Climate modeling presents unique challenges due to the complexity of environmental systems and the vast amount of data involved. Machine learning approaches offer promising solutions to these challenges."
      },
      {
        id: 2,
        title: "Methodology",
        content: "Our study employed three distinct machine learning approaches: deep neural networks with LSTM layers, random forest ensembles, and XGBoost models. Each method was evaluated using standardized climate datasets from 2010-2024."
      },
      {
        id: 3,
        title: "Results",
        content: "Neural networks showed superior performance in long-term predictions, while random forests excelled at regional climate pattern recognition. Gradient boosting methods demonstrated particular strength in handling extreme weather events."
      },
      {
        id: 4,
        title: "Discussion",
        content: "The comparative analysis reveals that each method has distinct advantages in specific climate modeling scenarios. The choice of approach should be guided by the specific requirements of the modeling task."
      },
      {
        id: 5,
        title: "Technical Implementation",
        content: "Implementation was carried out using PyTorch for neural networks and scikit-learn for traditional ML models. All experiments were conducted on a distributed computing cluster with GPU acceleration."
      },
      {
        id: 6,
        title: "Conclusion",
        content: "Our findings suggest that a hybrid approach, combining multiple machine learning methods, may offer the most robust solution for comprehensive climate modeling systems."
      }
    ],
    references: [
      "Chen et al. (2024) 'Deep Learning in Climate Science'",
      "Wilson, J. (2023) 'Machine Learning for Environmental Modeling'",
      "Garcia, M. (2024) 'Comparative Analysis of ML Approaches'"
    ]
  };

  return (
    <div className="p-4 bg-white h-full overflow-auto">
      <article className="columns-2 gap-4">
        <header className="break-after-column mb-6">
          <h1 className="text-lg font-bold mb-2">{paper.title}</h1>
          <div className="text-xs text-gray-600 mb-3">
            {paper.authors.join(' • ')}
          </div>
          <div className="bg-gray-50 p-3 rounded">
            <h2 className="text-sm font-semibold mb-1">Abstract</h2>
            <p className="text-xs leading-relaxed text-gray-700">{paper.abstract}</p>
          </div>
        </header>

        {paper.sections.map((section, index) => (
          <section 
            key={section.id}
            className={`mb-4 break-inside-avoid ${
              index === 2 ? 'break-before-column' : ''
            }`}
          >
            <h2 className="text-sm font-semibold mb-2">{section.title}</h2>
            <p className="text-xs leading-relaxed text-gray-700">{section.content}</p>
          </section>
        ))}

        <section className="break-before-column mt-4">
          <h2 className="text-sm font-semibold mb-2">References</h2>
          <ul className="text-xs space-y-1 text-gray-700">
            {paper.references.map((ref, index) => (
              <li key={index}>[{index + 1}] {ref}</li>
            ))}
          </ul>
        </section>
      </article>
    </div>
  );
};

export default AcademicPaper;

const MagazineFeature = () => {
  const article = {
    title: "The Rise of Urban Gardens",
    subtitle: "How city dwellers are transforming concrete jungles into green oases",
    author: "Alex Rivera",
    mainContent: [
      {
        id: 1,
        content: "Urban gardening has experienced an unprecedented surge in popularity over the past decade. What began as a grassroots movement has evolved into a citywide phenomenon, with rooftops and abandoned lots transformed into thriving green spaces."
      },
      {
        id: 2,
        content: "City planners and environmental scientists agree that these urban gardens serve multiple purposes: they provide fresh produce, reduce urban heat island effects, and create community gathering spaces."
      },
      {
        id: 3,
        pullQuote: "We're not just growing food, we're growing communities.",
        attribution: "- Maria Chen, Urban Garden Initiative"
      },
      {
        id: 4,
        content: "The impact extends beyond environmental benefits. Studies show that participants in community garden projects report improved mental health and stronger neighborhood connections."
      },
      {
        id: 5,
        sidebar: {
          title: "Starting Your Urban Garden",
          tips: [
            "Choose appropriate containers",
            "Consider sunlight exposure",
            "Start with hardy plants",
            "Implement water conservation"
          ]
        }
      },
      {
        id: 6,
        content: "Looking ahead, urban gardening is poised to play a crucial role in sustainable city development. With innovative approaches like vertical farming and hydroponics, the potential for urban agriculture continues to expand."
      }
    ]
  };

  return (
    <div className="p-4 bg-emerald-50 h-full overflow-auto">
      <article className="columns-2 gap-4">
        <header className="break-after-column mb-6">
          <h1 className="text-xl font-bold mb-2">{article.title}</h1>
          <p className="text-sm text-emerald-700 mb-3">{article.subtitle}</p>
          <p className="text-xs text-gray-600">By {article.author}</p>
        </header>

        {article.mainContent.map((section) => {
          if (section.pullQuote) {
            return (
              <blockquote 
                key={section.id}
                className="break-inside-avoid break-before-column my-4 pl-4 border-l-4 border-emerald-500"
              >
                <p className="text-lg font-serif italic text-emerald-800">
                  {section.pullQuote}
                </p>
                <cite className="text-xs text-gray-600">{section.attribution}</cite>
              </blockquote>
            );
          }

          if (section.sidebar) {
            return (
              <aside 
                key={section.id}
                className="break-inside-avoid break-before-column mb-4 bg-white p-4 rounded-lg"
              >
                <h3 className="text-sm font-semibold mb-2">{section.sidebar.title}</h3>
                <ul className="text-xs space-y-1 text-gray-700">
                  {section.sidebar.tips.map((tip, index) => (
                    <li key={index}>• {tip}</li>
                  ))}
                </ul>
              </aside>
            );
          }

          return (
            <p 
              key={section.id}
              className="mb-4 text-sm leading-relaxed text-gray-700 break-inside-avoid"
            >
              {section.content}
            </p>
          );
        })}
      </article>
    </div>
  );
};

export default MagazineFeature;

const BookChapter = () => {
  const chapter = {
    title: "Chapter 3: The Evolution of Digital Privacy",
    book: "The Digital Age: Rights and Responsibilities",
    author: "Dr. Thomas Moore",
    sections: [
      {
        id: 1,
        content: "The concept of privacy in the digital age has undergone radical transformation. What was once a clear line between public and private has become increasingly blurred by technological advancement.",
        marginNote: "Historical context: Pre-internet privacy norms"
      },
      {
        id: 2,
        content: "Early internet users enjoyed relative anonymity, but the rise of social media and sophisticated tracking technologies has fundamentally altered the landscape of digital privacy.",
        footnote: "Studies from 1995-2000 show minimal concerns about online privacy among early internet users."
      },
      {
        id: 3,
        subheading: "The Social Media Revolution",
        content: "Social networks introduced a new paradigm of voluntary information sharing. Users began trading privacy for convenience and social connection, often without fully understanding the implications."
      },
      {
        id: 4,
        content: "Data collection and analysis capabilities have grown exponentially. Modern algorithms can derive surprisingly accurate insights from seemingly innocuous data points.",
        marginNote: "Key development: Machine learning in data analysis"
      },
      {
        id: 5,
        subheading: "Privacy in the Age of AI",
        content: "Artificial intelligence has introduced new challenges to digital privacy. The ability to process and analyze vast amounts of data has created both opportunities and risks for individual privacy.",
        footnote: "Recent AI models can predict user behavior with 89% accuracy using minimal data points."
      },
      {
        id: 6,
        content: "Looking ahead, the future of digital privacy will likely require a delicate balance between technological innovation and personal rights. New frameworks for data protection continue to emerge.",
        marginNote: "Future implications for privacy laws"
      }
    ]
  };

  return (
    <div className="p-4 bg-amber-50 h-full overflow-auto">
      <article className="columns-2 gap-4">
        <header className="break-after-column mb-6">
          <p className="text-sm text-gray-600 mb-1">{chapter.book}</p>
          <h1 className="text-xl font-serif mb-2">{chapter.title}</h1>
          <p className="text-sm text-gray-700">By {chapter.author}</p>
        </header>

        <div className="relative">
          {chapter.sections.map((section, index) => (
            <div key={section.id}>
              {section.subheading && (
                <h2 
                  className="text-lg font-serif mb-2 break-inside-avoid break-before-column"
                >
                  {section.subheading}
                </h2>
              )}
              
              <div className="flex gap-4 mb-4">
                {section.marginNote && (
                  <div className="w-1/4">
                    <p className="text-xs text-amber-800 italic break-inside-avoid">
                      {section.marginNote}
                    </p>
                  </div>
                )}
                
                <div className={`${section.marginNote ? 'w-3/4' : 'w-full'}`}>
                  <p className="text-sm leading-relaxed text-gray-700 break-inside-avoid">
                    {section.content}
                  </p>
                  {section.footnote && (
                    <p className="text-xs text-gray-500 mt-1 break-inside-avoid">
                      * {section.footnote}
                    </p>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </article>
    </div>
  );
};

export default BookChapter;

const Newsletter = () => {
  const content = {
    title: "Tech Weekly Insights",
    issue: "Issue #42 - February 2025",
    sections: [
      {
        id: 1,
        type: "featured",
        title: "AI Breakthrough in Healthcare",
        content: "A groundbreaking development in AI-powered diagnostics has shown promising results in early disease detection. The new system demonstrates 95% accuracy in identifying potential health risks through routine blood tests.",
        importance: "high"
      },
      {
        id: 2,
        type: "industry",
        title: "Market Trends",
        content: "The tech sector continues to evolve rapidly. This week saw major developments in quantum computing, with several startups announcing significant breakthroughs in qubit stability. These advances could accelerate the timeline for practical quantum applications.",
        bulletPoints: [
          "Quantum computing investments up 40%",
          "New semiconductor facilities announced",
          "Cloud services market expands"
        ]
      },
      {
        id: 3,
        type: "analysis",
        title: "Expert Analysis",
        content: "The convergence of AI and quantum computing presents unique opportunities and challenges. Industry experts suggest that the next five years will be crucial in determining the direction of these technologies. Security remains a top concern as systems become more sophisticated.",
        expertName: "Dr. Lisa Chen",
        expertise: "Quantum Computing Specialist"
      },
      {
        id: 4,
        type: "upcoming",
        title: "Upcoming Events",
        events: [
          {
            name: "Global Tech Summit",
            date: "March 15-17",
            location: "Virtual"
          },
          {
            name: "AI Ethics Workshop",
            date: "March 22",
            location: "London"
          },
          {
            name: "Developer Conference",
            date: "April 5-7",
            location: "San Francisco"
          }
        ]
      },
      {
        id: 5,
        type: "resources",
        title: "Further Reading",
        links: [
          "Complete Guide to Quantum Computing",
          "AI Ethics Framework 2025",
          "Future of Tech Report"
        ]
      },
      {
        id: 6,
        type: "footer",
        content: "Stay ahead of the curve with our weekly insights into the rapidly evolving technology landscape. Subscribe to our premium membership for in-depth analysis and exclusive content."
      }
    ]
  };

  return (
    <div className="p-4 bg-blue-50 h-full overflow-auto">
      <article className="columns-2 gap-4">
        <header className="break-after-column mb-6">
          <h1 className="text-xl font-bold text-blue-900">{content.title}</h1>
          <p className="text-sm text-blue-600">{content.issue}</p>
        </header>

        {content.sections.map((section) => {
          switch (section.type) {
            case 'featured':
              return (
                <section 
                  key={section.id}
                  className="mb-6 break-inside-avoid break-after-column"
                >
                  <h2 className="text-lg font-semibold text-blue-800 mb-2">
                    {section.title}
                  </h2>
                  <p className="text-sm leading-relaxed text-gray-700">
                    {section.content}
                  </p>
                </section>
              );

            case 'industry':
              return (
                <section 
                  key={section.id}
                  className="mb-6 break-inside-avoid break-before-column"
                >
                  <h2 className="text-lg font-semibold text-blue-800 mb-2">
                    {section.title}
                  </h2>
                  <p className="text-sm leading-relaxed text-gray-700 mb-3">
                    {section.content}
                  </p>
                  <ul className="text-sm space-y-1 text-gray-600">
                    {section.bulletPoints.map((point, index) => (
                      <li key={index} className="break-inside-avoid">• {point}</li>
                    ))}
                  </ul>
                </section>
              );

            case 'analysis':
              return (
                <section 
                  key={section.id}
                  className="mb-6 break-inside-avoid"
                >
                  <h2 className="text-lg font-semibold text-blue-800 mb-2">
                    {section.title}
                  </h2>
                  <p className="text-sm leading-relaxed text-gray-700 mb-2">
                    {section.content}
                  </p>
                  <p className="text-xs text-blue-600">
                    By {section.expertName} - {section.expertise}
                  </p>
                </section>
              );

            case 'upcoming':
              return (
                <section 
                  key={section.id}
                  className="mb-6 break-inside-avoid break-before-column"
                >
                  <h2 className="text-lg font-semibold text-blue-800 mb-2">
                    {section.title}
                  </h2>
                  <div className="space-y-2">
                    {section.events.map((event, index) => (
                      <div key={index} className="text-sm break-inside-avoid">
                        <p className="font-medium">{event.name}</p>
                        <p className="text-xs text-gray-600">
                          {event.date} - {event.location}
                        </p>
                      </div>
                    ))}
                  </div>
                </section>
              );

            case 'resources':
              return (
                <section 
                  key={section.id}
                  className="mb-6 break-inside-avoid"
                >
                  <h2 className="text-lg font-semibold text-blue-800 mb-2">
                    {section.title}
                  </h2>
                  <ul className="text-sm space-y-1 text-blue-600">
                    {section.links.map((link, index) => (
                      <li key={index} className="break-inside-avoid">
                        → {link}
                      </li>
                    ))}
                  </ul>
                </section>
              );

            case 'footer':
              return (
                <footer 
                  key={section.id}
                  className="mt-6 break-inside-avoid break-before-column"
                >
                  <p className="text-sm text-gray-600 italic">
                    {section.content}
                  </p>
                </footer>
              );
          }
        })}
      </article>
    </div>
  );
};

export default Newsletter;